Skip to content

Commit

Permalink
docs(alert): add accessibility section (#2505)
Browse files Browse the repository at this point in the history
  • Loading branch information
averyjohnston authored Aug 23, 2022
1 parent 24a1e27 commit b99957f
Showing 1 changed file with 10 additions and 0 deletions.
10 changes: 10 additions & 0 deletions docs/api/alert.md
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,16 @@ import Customization from '@site/static/usage/alert/customization/index.md';
If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
:::

## Accessibility

Ionic automatically sets the Alert's `role` to either [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) if there are any inputs or buttons included, or [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) if there are none.

If the `header` property is defined for the Alert, the `aria-labelledby` attribute will be automatically set to the header's ID. The `subHeader` element will be used as a fallback if `header` is not defined. Similarly, the `aria-describedby` attribute will be automatically set to the ID of the `message` element if that property is defined.

It is strongly recommended that your Alert have a `message`, as well as either a `header` or `subHeader`, in order to align with the ARIA spec. If you choose not to include a `header` or `subHeader`, an alternative is to provide a descriptive `aria-label` using the `htmlAttributes` property.

All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert.


## Interfaces

Expand Down

1 comment on commit b99957f

@vercel
Copy link

@vercel vercel bot commented on b99957f 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-gqykycf8t.vercel.app
ionic-docs-git-main-ionic1.vercel.app
ionic-docs-ionic1.vercel.app

Please sign in to comment.