Changeset 35427

Timestamp:

10/28/2015 11:07:08 PM (9 years ago)

Author:

afercia

Message:

Media: Improve the headings hierarchy in the Media Views for better accessibility.

Fixes #34273.

Location:

trunk/src

Files:

• wp-admin/css/media.css (modified) (2 diffs)
• wp-admin/includes/image-edit.php (modified) (4 diffs)
• wp-includes/css/media-views.css (modified) (7 diffs)
• wp-includes/media-template.php (modified) (10 diffs)

trunk/src/wp-admin/css/media.css

@@ -501 +501 @@
 }
 
-.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3 {
+.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3, /* Back-compat for pre-4.4 */
+.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
     display: none;
 }
@@ -1018 +1019 @@
 }
 
-#poststuff .imgedit-group-top h3 {
+#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
+#poststuff .imgedit-group-top h2 {
+    margin: 0;
     padding: 0;
-}
-
-.imgedit-group-top h3 a {
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
+.imgedit-group-top h2 a {
     text-decoration: none;
 }

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

@@ -47 +47 @@
     <div class="imgedit-group">
     <div class="imgedit-group-top">
-        <h3><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
+        <h2><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
         <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>
@@ -66 +66 @@
     <div class="imgedit-group">
     <div class="imgedit-group-top">
-        <h3><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h3>
+        <h2><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h2>
         <div class="imgedit-help">
         <p><?php _e('Discard any changes and restore the original image.');
@@ -85 +85 @@
     <div class="imgedit-group">
     <div class="imgedit-group-top">
-        <h3><?php _e('Image Crop'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
+        <h2><?php _e( 'Image Crop' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
 
         <div class="imgedit-help">
@@ -123 +123 @@
     <div class="imgedit-group imgedit-applyto">
     <div class="imgedit-group-top">
-        <h3><?php _e('Thumbnail Settings'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
+        <h2><?php _e( 'Thumbnail Settings' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
         <p class="imgedit-help"><?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>

trunk/src/wp-includes/css/media-views.css

@@ -299 +299 @@
 }
 
-.media-sidebar h3,
-.image-details h3 {
+.media-sidebar h3, /* Back-compat for pre-4.4 */
+.image-details h3, /* Back-compat for pre-4.4 */
+.media-sidebar h2,
+.image-details h2 {
     position: relative;
     font-weight: bold;
@@ -1176 +1178 @@
 }
 
-.uploader-inline .media-uploader-status h3 {
+.uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */
+.uploader-inline .media-uploader-status h2 {
     display: none;
 }
@@ -1267 +1270 @@
 }
 
-.uploader-window h3 {
+.uploader-window h3, /* Back-compat for pre-4.4 */
+.uploader-window h1 {
     margin: -0.5em 0 0;
     position: absolute;
@@ -1322 +1326 @@
 }
 
-.uploader-inline h3 {
+.uploader-inline h3, /* Back-compat for pre-4.4 */
+.uploader-inline h2 {
     font-size: 20px;
     line-height: 28px;
@@ -1741 +1746 @@
 }
 
-.media-modal .imgedit-group-top h3 {
+.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
+.media-modal .imgedit-group-top h2 {
     text-transform: uppercase;
     font-size: 12px;
@@ -1749 +1755 @@
 }
 
-.media-modal .imgedit-group-top h3 a {
+.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
+.media-modal .imgedit-group-top h2 a {
     text-decoration: none;
     color: #666;
@@ -1879 +1886 @@
 }
 
-.image-details .column-settings h3 {
+.image-details .column-settings h3, /* Back-compat for pre-4.4 */
+.image-details .column-settings h2 {
     margin: 20px;
     padding-top: 20px;
     border-top: 1px solid #ddd;
+    color: #23282d;
 }
 

trunk/src/wp-includes/media-template.php

@@ -172 +172 @@
     <script type="text/html" id="tmpl-uploader-window">
         <div class="uploader-window-content">
-            <h3><?php _e( 'Drop files to upload' ); ?></h3>
+            <h1><?php _e( 'Drop files to upload' ); ?></h1>
         </div>
     </script>
@@ -189 +189 @@
         <div class="uploader-inline-content {{ messageClass }}">
         <# if ( data.message ) { #>
-            <h3 class="upload-message">{{ data.message }}</h3>
+            <h2 class="upload-message">{{ data.message }}</h2>
         <# } #>
-        <?php if ( ! _device_can_upload() ) : ?>
-            <h3 class="upload-instructions"><?php printf( __('The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.'), 'https://apps.wordpress.org/' ); ?></h3>
-        <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
-            <h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3>
+
+            <h2 class="upload-instructions"><?php printf( __( 'The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.' ), 'https://apps.wordpress.org/' ); ?></h2>
+        <?php if ( is_multisite() && ! is_upload_space_available() ) : ?>
+            <h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
             <?php
             /** This action is documented in wp-admin/includes/media.php */
@@ -201 +201 @@
         <?php else : ?>
             <div class="upload-ui">
-                <h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
+                <h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h2>
                 <p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
                 <button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
@@ -258 +258 @@
 
     <script type="text/html" id="tmpl-uploader-status">
-        <h3><?php _e( 'Uploading' ); ?></h3>
+        <h2><?php _e( 'Uploading' ); ?></h2>
         <button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
 
@@ -491 +491 @@
 
     <script type="text/html" id="tmpl-attachment-details">
-        <h3>
-            <?php _e('Attachment Details'); ?>
-
+        <h2>
+            <?php _e( 'Attachment Details' ); ?>
             <span class="settings-save-status">
                 <span class="spinner"></span>
                 <span class="saved"><?php esc_html_e('Saved.'); ?></span>
             </span>
-        </h3>
+        </h2>
         <div class="attachment-info">
             <div class="thumbnail thumbnail-{{ data.type }}">
@@ -600 +599 @@
 
     <script type="text/html" id="tmpl-attachment-display-settings">
-        <h3><?php _e('Attachment Display Settings'); ?></h3>
+        <h2><?php _e( 'Attachment Display Settings' ); ?></h2>
 
         <# if ( 'image' === data.type ) { #>
@@ -707 +706 @@
 
     <script type="text/html" id="tmpl-gallery-settings">
-        <h3><?php _e('Gallery Settings'); ?></h3>
+        <h2><?php _e( 'Gallery Settings' ); ?></h2>
 
         <label class="setting">
@@ -777 +776 @@
 
     <script type="text/html" id="tmpl-playlist-settings">
-        <h3><?php _e( 'Playlist Settings' ); ?></h3>
+        <h2><?php _e( 'Playlist Settings' ); ?></h2>
 
         <# var emptyModel = _.isEmpty( data.model ),
@@ -904 +903 @@
                     </label>
 
-                    <h3><?php _e( 'Display Settings' ); ?></h3>
+                    <h2><?php _e( 'Display Settings' ); ?></h2>
                     <div class="setting align">
                         <span><?php _e('Align'); ?></span>
@@ -986 +985 @@
                     </div>
                     <div class="advanced-section">
-                        <h3><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h3>
+                        <h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
                         <div class="advanced-settings hidden">
                             <div class="advanced-image">