Skip to content

Commit e0cc751

Browse files
authored
Merge pull request #2271 from gluestack/fix/alertDialog-content
feat: added features, voiceover, states to alertDialog
2 parents 7a62892 + 2144497 commit e0cc751

File tree

1 file changed

+22
-0
lines changed

1 file changed

+22
-0
lines changed

example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -414,10 +414,32 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
414414

415415
It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
416416

417+
### Features
418+
419+
- Keyboard support for actions.
420+
417421
### Accessibility
418422

419423
We have outlined the various features that ensure the AlertDialog component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.It uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/) which follows the [WAI-ARIA Alert and Message Dialogs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).
420424

425+
#### Keyboard
426+
427+
- `Tab`:
428+
- Moves focus to the next tabbable element inside the dialog.
429+
- If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog.
430+
- `Shift + Tab`:
431+
- Moves focus to the previous tabbable element inside the dialog.
432+
- If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog.
433+
- `Escape`: Closes the dialog.
434+
435+
#### Screen Reader
436+
437+
- VoiceOver: When the button is focused, the screen reader will announce the button's label and provide instructions on how to click it. When the alert dialog is triggered, the screen reader will read its content.
438+
439+
#### States
440+
441+
- When the alert dialog is triggered, `aria-modal="true"` is added to the alert dialog content. This attribute informs assistive technologies that the windows underneath the current alert dialog are not available for interaction(inert).
442+
421443
### Props
422444

423445
AlertDialog component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), and the props mentioned below.

0 commit comments

Comments
 (0)