Skip to content

Commit

Permalink
Revert out the guidance info (#1000)
Browse files Browse the repository at this point in the history
Co-authored-by: Scott Weber <[email protected]>
  • Loading branch information
nichia and line47 authored Apr 14, 2021
1 parent 8033779 commit fa3f54f
Showing 1 changed file with 6 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -34,36 +34,30 @@ Style guide: components.dialog.react
/*
---
### When to use
- Use when you require an immediate response from the user.
- Use to request information that is preventing the system from continuing a user-initiated process.
- Use to notify the user of urgent information concerning their current work. Modal dialogs are commonly used to report system errors or convey a consequence of a user’s action.
- Use to confirm a user decision. Clearly describe the action being confirmed and explain any potential consequences that it may cause. Both the title and the button should reflect the action that will occur. If the action is destructive or irreversible then use a transactional danger modal.
### Related patterns
### When to consider alternatives
- Every time! Before using a modal, consider whether there’s another component that might be less disruptive for the user. Modals should be a last resort.
- If you have a multi-step process. Avoid complicated user flows in a modal that may take the user away from the original page. A multi-step process is better suited to an individual page, guiding the user and accommodating complexities in the user flow.
- [Alert]({{root}}/components/alert)
### Usage
- `<Dialog>` makes use of the `<AriaModal>` component maintained by [react-aria-modal docs on Github](https://github.com/davidtheclark/react-aria-modal). The above documented props are only those directly exposed by the `<Dialog>` component, but you can pass props specific to `<AriaModal>` here as well, e.g. you can set the [`scrollDisabled`](https://github.com/davidtheclark/react-aria-modal#scrolldisabled) prop if you'd like to enable scrolling behind the modal window.
### Accessibility
#### Keyboard support
- `Enter` or `Space` to select the highlighted item.
- `Tab` to move the focus sequentially through the list of focusable items.
- `Shift + Tab` to move the focus sequentially through the list of focusable items in reversed order.
#### Focus Management
- When the modal is opened, the entire modal is the default focus state. Most screen readers will announce the entire dialog content.
- Focus is trapped within the modal and users can then navigate through the dialog actions with the keyboard.
- Escape will close the modal. To disable exiting when users press the Escape key, set the `escapeExits` prop to `false`
- When the modal closes, focus returns to the element that was focused just before the modal is activated
- To place the focus inside of the dialog on activating the modal, set the dialog focus using the `initialFocus` prop with boolean prop `focusDialog` set to `false`
### Related patterns
- [Alert]({{root}}/components/alert)
### Learn more
- [Making an accessible dialog box](https://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/)
Expand Down

0 comments on commit fa3f54f

Please sign in to comment.