From fa3f54fdcd120e2405517174090a6c5650ee25eb Mon Sep 17 00:00:00 2001 From: Ni Chia Date: Wed, 14 Apr 2021 11:47:04 -0400 Subject: [PATCH] Revert out the guidance info (#1000) Co-authored-by: Scott Weber --- .../pages/components/Dialog/_Dialog.docs.scss | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/design-system-docs/src/pages/components/Dialog/_Dialog.docs.scss b/packages/design-system-docs/src/pages/components/Dialog/_Dialog.docs.scss index 1118fa6032..8fc9613825 100644 --- a/packages/design-system-docs/src/pages/components/Dialog/_Dialog.docs.scss +++ b/packages/design-system-docs/src/pages/components/Dialog/_Dialog.docs.scss @@ -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 + - `` makes use of the `` 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 `` component, but you can pass props specific to `` 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/)