From 21a0d6969531ee142f7ac59869e8129ba38d1e8c Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Tue, 23 Aug 2022 12:30:26 -0500 Subject: [PATCH 1/2] docs(alert): add accessibility section --- docs/api/alert.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/api/alert.md b/docs/api/alert.md index edb38aeeb92..c9521f71730 100644 --- a/docs/api/alert.md +++ b/docs/api/alert.md @@ -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` or `alert`, depending on whether any buttons or inputs are included. + +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 From 6128fae4d2c8541725c47ff06d0b2a379ed7d2c7 Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Tue, 23 Aug 2022 15:29:39 -0500 Subject: [PATCH 2/2] docs(alert): clarify role info --- docs/api/alert.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/alert.md b/docs/api/alert.md index c9521f71730..491e4eecb45 100644 --- a/docs/api/alert.md +++ b/docs/api/alert.md @@ -162,7 +162,7 @@ import Customization from '@site/static/usage/alert/customization/index.md'; ## Accessibility -Ionic automatically sets the Alert's `role` to either `alertdialog` or `alert`, depending on whether any buttons or inputs are included. +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.