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

Fixes #34273.

git-svn-id: https://develop.svn.wordpress.org/trunk@35427 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2015-10-28 23:07:08 +00:00
parent 63b27d209a
commit 347b0bf108
4 changed files with 46 additions and 32 deletions

View File

@@ -500,7 +500,8 @@ border color while dragging a file over the uploader drop area */
color: #c00;
}
.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;
}
@@ -1017,11 +1018,16 @@ border color while dragging a file over the uploader drop area */
margin: 0 8px 0 0;
}
#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;
font-size: 14px;
line-height: 1.4;
}
.imgedit-group-top h3 a {
.imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
.imgedit-group-top h2 a {
text-decoration: none;
}

View File

@@ -46,7 +46,7 @@ function wp_image_editor($post_id, $msg = false) {
<div class="imgedit-settings">
<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>
</div>
@@ -65,7 +65,7 @@ function wp_image_editor($post_id, $msg = false) {
<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.');
@@ -84,7 +84,7 @@ function wp_image_editor($post_id, $msg = false) {
<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">
<p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p>
@@ -122,7 +122,7 @@ function wp_image_editor($post_id, $msg = false) {
<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>