vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 12:20:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/includes/image-edit.php
+6 -6
View File
@@ -38,9 +38,9 @@ function wp_image_editor( $post_id, $msg = false ) {
if ( $msg ) {
if ( isset( $msg->error ) ) {
$note = "<div class='error'><p>$msg->error</p></div>";
$note = "<div class='notice notice-error' tabindex='-1' role='alert'><p>$msg->error</p></div>";
} elseif ( isset( $msg->msg ) ) {
$note = "<div class='updated'><p>$msg->msg</p></div>";
$note = "<div class='notice notice-success' tabindex='-1' role='alert'><p>$msg->msg</p></div>";
}
}
@@ -103,7 +103,7 @@ function wp_image_editor( $post_id, $msg = false ) {
<div class="imgedit-group">
<div class="imgedit-group-top">
<h2><?php _e( 'Scale Image' ); ?></h2>
<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Scale Image Help' ); ?></span></button>
<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Scale Image Help' ); ?></span></button>
<div class="imgedit-help">
<p><?php _e( 'You can proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up.' ); ?></p>
</div>
@@ -141,7 +141,7 @@ function wp_image_editor( $post_id, $msg = false ) {
<div class="imgedit-group">
<div class="imgedit-group-top">
<h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link"><?php _e( 'Restore Original Image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
<h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link" aria-expanded="false"><?php _e( 'Restore original image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
<div class="imgedit-help imgedit-restore">
<p>
<?php
@@ -164,7 +164,7 @@ function wp_image_editor( $post_id, $msg = false ) {
<div class="imgedit-group">
<div class="imgedit-group-top">
<h2><?php _e( 'Image Crop' ); ?></h2>
<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Image Crop Help' ); ?></span></button>
<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Image Crop Help' ); ?></span></button>
<div class="imgedit-help">
<p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
@@ -209,7 +209,7 @@ function wp_image_editor( $post_id, $msg = false ) {
<div class="imgedit-group imgedit-applyto">
<div class="imgedit-group-top">
<h2><?php _e( 'Thumbnail Settings' ); ?></h2>
<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail Settings Help' ); ?></span></button>
<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail Settings Help' ); ?></span></button>
<div class="imgedit-help">
<p><?php _e( 'You can edit the image while preserving the thumbnail. For example, you may wish to have a square thumbnail that displays just a section of the image.' ); ?></p>
</div>