Changeset 48375 for trunk/src/wp-admin/includes/image-edit.php

Timestamp:

07/07/2020 01:43:43 PM (5 years ago)

Author:

afercia

Message:

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.

File:

• trunk/src/wp-admin/includes/image-edit.php (modified) (5 diffs)

trunk/src/wp-admin/includes/image-edit.php

@@ -39 +39 @@
     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>";
         }
     }
@@ -104 +104 @@
     <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>
@@ -142 +142 @@
     <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>
@@ -165 +165 @@
     <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">
@@ -210 +210 @@
     <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>