mirror of
https://github.com/bitwarden/browser
synced 2025-12-14 15:23:33 +00:00
6ef6140b29
* updated sort order
* Update preview.tsx
* Create avatar.mdx
Added avatar documentation based on Figma docs
* Added badge docs
* fixed typos
* added breadcrumb docs
* Added callout docs
* added color password docs
* Added dialog docs
* fixed typo
* Updated Dialogs docs
Added a dialogs.mdx page for general docs that apply to both main Dialogs and Simple Dialogs.
Updated the sub-docs pages
* Update simple-dialog.mdx
* Added documentation from Figma to Forms docs
* Create icon-button.mdx
* added link docs
* Added menu docs
* Added progress indicator docs
* Updated table docs
* Added tab docs
* Added toggle group docs
* Revert "Update preview.tsx"
This reverts commit 4671d9726a.
* added docs for appA11yTitle
* Fixed typos
* Update libs/components/src/link/link.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* Update libs/components/src/menu/menu.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* Addressed feedback
* Addressed feedback on callout, menu, and progress
* moved stories mdx files to proper location
* Addressed feedback on dialogs.mdx
* Update libs/components/src/tabs/tabs.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* Addressed feedback on Tabs
* ran prettier
* Fixed title formatting
* ran prettier
* Update libs/components/src/dialog/dialogs.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* ran prettier
---------
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
57 lines
2.3 KiB
Plaintext
57 lines
2.3 KiB
Plaintext
import { Meta, Story, Source } from "@storybook/addon-docs";
|
||
|
||
<Meta title="Component Library/Dialogs" />
|
||
|
||
# Dialog
|
||
|
||
Dialogs are used throughout the app to help the user focus on a specific action.
|
||
|
||
Use the main [Dialog Component](?path=/docs/component-library-dialogs-dialog--docs). when content
|
||
exceeds 384px width or there are a high number of interactive elements needed. **Example:** The web
|
||
app's edit vault item form dialog
|
||
|
||
For alerts or simple confirmation actions, like speedbumps, use the
|
||
[Simple Dialog](?path=/docs/component-library-dialogs-simple-dialog--docs).
|
||
|
||
Dialogs's should be used sparingly as they do call extra attention to themselves and can be
|
||
interruptive if overused.
|
||
|
||
## Placement
|
||
|
||
Dialogs should be centered vertically and horizontally on screen. Dialogs height should expand to
|
||
fit its content until there are 2rems of margin on the top/bottom of the dialog; in this case, the
|
||
dialog should become scrollable.
|
||
|
||
A backdrop should be used to hide the content below the dialog. Use `#000000` with `30% opacity`.
|
||
|
||
<Story id="component-library-dialogs-service--default" />
|
||
|
||
## Accessibility
|
||
|
||
### Component behavior
|
||
|
||
- Dialog include `role="dialog"`
|
||
- The Dialog title is an `<h1>`
|
||
- A user should not be able to tab focus outside of the Dialog until it has been closed.
|
||
- Clicking outside the dialog or clicking escape should close the dialog (this prevents a keyboard
|
||
trap)
|
||
|
||
### Required per implementation
|
||
|
||
The triggering button should indicate to assistive technology that additional content will open or
|
||
appear when the trigger is selected. Consider using `aria-haspopup="true"`
|
||
|
||
Dialog title should be announced by a screen reader when launched. Consider using `aria-labelledby`
|
||
or `aria-label`
|
||
|
||
When opened, focus should follow the visual order of the popover’s focusable content. Typically
|
||
focus is moved to the close button, but it is acceptable to move focus to the first interactive
|
||
element after close since a user may not want to close the dialog immediately if there are
|
||
additional interactive elements. See
|
||
[WCAG Focus Order success criteria](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)
|
||
|
||
Once closed, focus should remain on the the element which triggered the Dialog.
|
||
|
||
**Note:** If a Simple Dialog is triggered from a main Dialog, be sure to make sure focus is moved to
|
||
the Simple Dialog.
|