-
Notifications
You must be signed in to change notification settings - Fork 13.5k
bug(a11y): assertive toast not announced #25866
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
Thanks for the report. So there is an issue here, but it is unrelated to
This means that if you were to update the message a few seconds after the toast was shown, narrators would announce the updated content according to your However, the issue here is that narrators do not announce toasts when they first appear. This is a bit tricky because a) toasts never receive focus and b) the intent of toasts may differ between use cases. For toasts that require the user's immediate attention, For toasts that do not require the user's immediate attention, When adding support for #24484, this issue may go away since the overlay element will exist in the DOM ahead of time. However, we should investigate ways of solving this when using controller toasts too. |
Hi @liamdebeasi, and thank you for your quick answer 🚀 If it could help, I created this repo using the toast controller in an Angular project; Probably I could confirm what you said about #24484: in a pure JS environment, if I generate a div with aria-live attribute set, append it to body and then append the toast inside it, message is always announced. |
Thanks for the report. I was able to fix the NVDA announcement issue in #27198. I did more research into how toasts should be used as part of this work. I discovered that toasts should only use polite presentation (Material Design spec for reference: https://m2.material.io/components/snackbars/web#accessibility). As a result, I also have a PR to update the docs that notes this: ionic-team/ionic-docs#2914. This fix should be available in an upcoming release of Ionic. Let me know if you have questions. |
Issue URL: resolves #25866 --------- Docs PR: ionic-team/ionic-docs#2914 <!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing --> <!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. --> <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> <!-- Issues are required for both bug fixes and features. --> NVDA is not announcing toasts on present. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Toast has a "status" role and "polite" announcement. - We also revisited the intended behavior of toasts to better align with the Material Design v2 spec: https://m2.material.io/components/snackbars/web#accessibility ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: 7.0.3-dev.11681482468.19d7784f
Issue URL: resolves #25866 --------- Docs PR: ionic-team/ionic-docs#2914 <!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing --> <!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. --> <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> <!-- Issues are required for both bug fixes and features. --> NVDA is not announcing toasts on present. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Toast has a "status" role and "polite" announcement. - We also revisited the intended behavior of toasts to better align with the Material Design v2 spec: https://m2.material.io/components/snackbars/web#accessibility ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: 7.0.3-dev.11681482468.19d7784f
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Prerequisites
Ionic Framework Version
Current Behavior
The toast message in not announced by screenreaders even with aria-live='assertive'.
Tested with:
Expected Behavior
According to ARIA live regions spec:
So I expect assertive toast message to be announced when toast is shown.
Steps to Reproduce
I could provide a demo app using @ionic/angular, but I need to test the toast behaviour with JAWS (with NVDA on Chrome/Firefox is not working).
Code Reproduction URL
No response
Ionic Info
[WARN] You are not in an Ionic project directory. Project context may be missing.
Ionic:
Ionic CLI : 5.4.16
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v14.17.1
npm : 6.14.13
OS : Linux 4.4
Additional Information
No response
The text was updated successfully, but these errors were encountered: