Skip to content

Commit

Permalink
docs(modal): add label info (#2504)
Browse files Browse the repository at this point in the history
  • Loading branch information
liamdebeasi authored Aug 23, 2022
1 parent 75829eb commit 24a1e27
Showing 1 changed file with 5 additions and 0 deletions.
5 changes: 5 additions & 0 deletions docs/api/modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,11 @@ interface ModalCustomEvent extends CustomEvent {
| ----- | ------------------- |
| `Esc` | Dismisses the modal |


### Labels

Modals have a [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) role. As a result, developers **must** properly label their modals. If the modal is using `ion-title`, the text inside can be used to label the modal itself by setting [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) on `ion-modal`. If the modal contains additional descriptive text, this text can be associated with the modal by using [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby).

### Screen Readers

Modals have the `aria-modal` attribute applied. This attribute can cause assistive technologies to limit navigation to the modal element's contents. As a result, using gestures that move to the next or previous items may not focus elements outside of the modal. This applies even when the backdrop is disabled in sheet modals using the `backdropBreakpoint` property.
Expand Down

1 comment on commit 24a1e27

@vercel
Copy link

@vercel vercel bot commented on 24a1e27 Aug 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ionic-docs – ./

ionic-docs-git-main-ionic1.vercel.app
ionic-docs-ionic1.vercel.app
ionic-docs-gqykycf8t.vercel.app

Please sign in to comment.