Skip to content

Commit 9dcd814

Browse files
docs(action-sheet): add accessibility section (#2511)
1 parent 948209f commit 9dcd814

File tree

1 file changed

+5
-0
lines changed

1 file changed

+5
-0
lines changed

docs/api/action-sheet.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,11 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
7272
If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.
7373
:::
7474

75+
## Accessibility
76+
77+
Action Sheets are given a `role` of [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role). In order to align with the ARIA spec, either the `aria-label` or `aria-labelledby` attribute must be set.
78+
79+
It is strongly recommended that every Action Sheet have the `header` property defined, as Ionic will automatically set `aria-labelledby` to point to the header element. However, if you choose not to include a `header`, an alternative is to use the `htmlAttributes` property to provide a descriptive `aria-label` or set a custom `aria-labelledby` value.
7580

7681
## Interfaces
7782

0 commit comments

Comments
 (0)