Skip to content
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

feat(accessibility): Move aria-live=polite to overlay container #934

Merged
merged 2 commits into from
Apr 18, 2022
Merged

feat(accessibility): Move aria-live=polite to overlay container #934

merged 2 commits into from
Apr 18, 2022

Conversation

patrickhlauke
Copy link
Contributor

@patrickhlauke patrickhlauke commented Apr 16, 2022

Closes #933, closes #444, closes #833

(note that I'm not too hot on angular per se, so this may need tweaking/correcting. In particular the change made to the README.md)

also updates the README.md to let authors know they'll need this attribute
if they're doing custom overlay containers
dialogs/alertdialogs are intended to receive focus when they're shown. toasts, by their very nature, are not meant to steal focus but happen in parallel/as an aside
@codecov
Copy link

codecov bot commented Apr 16, 2022

Codecov Report

Merging #934 (f459b99) into master (8a90dbb) will increase coverage by 0.67%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master     #934      +/-   ##
==========================================
+ Coverage   55.29%   55.96%   +0.67%     
==========================================
  Files          19       19              
  Lines         510      511       +1     
  Branches       88       88              
==========================================
+ Hits          282      286       +4     
  Misses        216      216              
+ Partials       12        9       -3     
Impacted Files Coverage Δ
src/app/bootstrap.toast.ts 12.50% <ø> (ø)
src/app/pink.toast.ts 55.55% <ø> (ø)
src/lib/toastr/toast-noanimation.component.ts 3.37% <ø> (ø)
src/lib/toastr/toast.component.ts 73.68% <ø> (ø)
src/lib/overlay/overlay-container.ts 83.33% <100.00%> (+1.51%) ⬆️
src/app/home/home.component.ts 60.00% <0.00%> (+1.42%) ⬆️
src/lib/toastr/toastr.service.ts 50.52% <0.00%> (+2.10%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8a90dbb...f459b99. Read the comment docs.

@patrickhlauke
Copy link
Contributor Author

patrickhlauke commented Apr 16, 2022

Video recording of https://ngx-toastr-dp73gf4hr-scoop1.vercel.app/ (using Chrome/NVDA) showing that after this change, all toasts are announced correctly and consistently (compare to the video in #933)

ngx-toastr-live-region-issue-fixed.mp4

@scttcper scttcper changed the title Accessibility: move aria-live="polite" to the overlay container, change role="alertdialog" to role="alert" feat(accessibility): Move aria-live="polite" to the overlay container, change role="alertdialog" to role="alert" Apr 18, 2022
@scttcper scttcper changed the title feat(accessibility): Move aria-live="polite" to the overlay container, change role="alertdialog" to role="alert" feat(accessibility): Move aria-live=polite to overlay container Apr 18, 2022
@scttcper scttcper merged commit 2fc890b into scttcper:master Apr 18, 2022
@scttcper
Copy link
Owner

🎉 This PR is included in version 14.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@patrickhlauke patrickhlauke deleted the patrickhlauke-issue933 branch April 18, 2022 08:25
@patrickhlauke
Copy link
Contributor Author

Thanks @scttcper :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Accessibility: aria-live and role used incorrectly Accessibility Enhancement Screenreader Accessibility
2 participants