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

View File

@@ -1376,14 +1376,8 @@ function wp_default_scripts( $scripts ) {
)
);
$scripts->add( 'image-edit', "/wp-admin/js/image-edit$suffix.js", array( 'jquery', 'jquery-ui-core', 'json2', 'imgareaselect' ), false, 1 );
did_action( 'init' ) && $scripts->localize(
'image-edit',
'imageEditL10n',
array(
'error' => __( 'Could not load the preview image. Please reload the page and try again.' ),
)
);
$scripts->add( 'image-edit', "/wp-admin/js/image-edit$suffix.js", array( 'jquery', 'jquery-ui-core', 'json2', 'imgareaselect', 'wp-a11y' ), false, 1 );
$scripts->set_translations( 'image-edit' );
$scripts->add( 'set-post-thumbnail', "/wp-admin/js/set-post-thumbnail$suffix.js", array( 'jquery' ), false, 1 );
did_action( 'init' ) && $scripts->localize(