Dialog
7.1.10
Dialogs fill the entire screen.
| Namn | Typ | Beskrivning |
|---|---|---|
AppBarProps | AppBarProps | Object to set props for the app bar in full screen mode. |
ariaLabel * | string | Provides a screen reader name for the dialog. Mandatory for WCAG 2.1 compliance. |
customAttributes | CustomAttribute[] | Array of custom attributes that can be used for testing purposes. |
customWidth | string | Indicating if it's possible to set a custom width. If no customWidth is set, it uses the default value depending on variant. |
disableEnforceFocus | boolean | If true, the modal will not prevent focus from leaving the modal while open. Default value is false |
disableFocusHeading | boolean | If true, the dialog will not automatically focus the first heading |
enteringDirection | EnteringDirectionType | Direction the dialog will enter from. |
open * | boolean | Boolean indicating if the dialog is open. Default value is false. |
shouldCloseOnBackdropClick | boolean | Close dialog on background click. Default value is false. |
variant | "alert" |
"fullscreen" |
"bottom-alert" | Layout variants of the dialog. |
npm install @sj-ab/component-library.ui.dialogAdaptive design
WAI-ARIA
Dialog-komponenten baseras till stor del på designmönstret "Dialog (Modal)" från WAI-ARIA Authoring practices guide.
Det innebär att komponenten flyttar och begränsar användarens fokus till enbart det som finns i dialogen när det öppnas. Användaren ska inte kunna tabba till dolt innehåll i bakgrunden, eller hitta dolt innehåll med skärmläsare.
Dialog-komponenten använder bland annat:
role="dialog" eller "alertdialog"på behållaren för att berätta för hjälpmedel att det är en dialog.aria-labelpå behållaren för att ge den ett unikt namnaria-hidden="true"på allt innehåll i bakgrunden för att dölja det för skärmläsare (sker automatiskt)Ett inbyggt "fokuslås" som loopar tangentbordsfokus inom Sheetet (sker automatiskt)
Importer av Dialog
Repos med Dialog
Senaste installerade version av Dialog
Äldsta installerade version av Dialog