WordPress.org

Make WordPress Core


Ignore:
Timestamp:
07/07/2020 01:43:43 PM (4 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/image-edit.php

    r48265 r48375  
    3939    if ( $msg ) {
    4040        if ( isset( $msg->error ) ) {
    41             $note = "<div class='error'><p>$msg->error</p></div>";
     41            $note = "<div class='notice notice-error' tabindex='-1' role='alert'><p>$msg->error</p></div>";
    4242        } elseif ( isset( $msg->msg ) ) {
    43             $note = "<div class='updated'><p>$msg->msg</p></div>";
     43            $note = "<div class='notice notice-success' tabindex='-1' role='alert'><p>$msg->msg</p></div>";
    4444        }
    4545    }
     
    104104    <div class="imgedit-group-top">
    105105        <h2><?php _e( 'Scale Image' ); ?></h2>
    106         <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>
     106        <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>
    107107        <div class="imgedit-help">
    108108        <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>
     
    142142    <div class="imgedit-group">
    143143    <div class="imgedit-group-top">
    144         <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>
     144        <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>
    145145        <div class="imgedit-help imgedit-restore">
    146146        <p>
     
    165165    <div class="imgedit-group-top">
    166166        <h2><?php _e( 'Image Crop' ); ?></h2>
    167         <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>
     167        <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>
    168168
    169169        <div class="imgedit-help">
     
    210210    <div class="imgedit-group-top">
    211211        <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
    212         <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>
     212        <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>
    213213        <div class="imgedit-help">
    214214        <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>
Note: See TracChangeset for help on using the changeset viewer.