Accessibility: Media: Improve accessibility of the status and error messages in the Image Editor.

- improves focus management by moving focus to the notices, if any, or to the first "tabbable" element
- this avoids a focus loss and helps Braille-only and screen magnification users to be aware of the messages
- adds an ARIA role `alert` to all the notices 
- uses `wp.a11y.speak()` to announce messages to assistive technology
- this way, all visual users will see the messages while assistive technology users will get an audible message
- uses `wp.i18n` for translatable strings in `wp-admin/js/image-edit.js`

Props anevins, ryanshoover, antpb, SergeyBiryukov, afercia.
See #20491.
Fixes #47147.


git-svn-id: https://develop.svn.wordpress.org/trunk@48375 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2020-07-07 13:43:43 +00:00
parent 41e572858d
commit ab3ce946c9
5 changed files with 122 additions and 59 deletions
+2 -1
View File
@@ -1998,7 +1998,8 @@
display: block;
}
.media-modal .imgedit-wrap div.updated {
.media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
.media-modal .imgedit-wrap .notice {
margin: 0;
margin-bottom: 16px;
}