WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Fixes #34273.
Built from https://develop.svn.wordpress.org/trunk@35427


git-svn-id: http://core.svn.wordpress.org/trunk@35391 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2015-10-28 23:08:24 +00:00
parent d7da5970fa
commit db8b09c40d
11 changed files with 77 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
wp-admin/css/media-rtl.css
View File

@ -500,7 +500,8 @@ border color while dragging a file over the uploader drop area */
color: #c00; 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; display: none;
} }
@ -1017,11 +1018,16 @@ border color while dragging a file over the uploader drop area */
margin: 0 0 0 8px; margin: 0 0 0 8px;
} }
#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; 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; text-decoration: none;
} }

12
wp-admin/css/media.css
View File

@ -500,7 +500,8 @@ border color while dragging a file over the uploader drop area */
color: #c00; 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; display: none;
} }
@ -1017,11 +1018,16 @@ border color while dragging a file over the uploader drop area */
margin: 0 8px 0 0; 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; 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; text-decoration: none;
} }

2
wp-admin/css/wp-admin-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-admin/css/wp-admin.min.css vendored
View File

File diff suppressed because one or more lines are too long

8
wp-admin/includes/image-edit.php
View File

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

25
wp-includes/css/media-views-rtl.css
View File

@ -298,8 +298,10 @@
width: 100%; width: 100%;
} }
.media-sidebar h3, .media-sidebar h3, /* Back-compat for pre-4.4 */
.image-details h3 { .image-details h3, /* Back-compat for pre-4.4 */
.media-sidebar h2,
.image-details h2 {
position: relative; position: relative;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
@ -1175,7 +1177,8 @@
max-width: 400px; max-width: 400px;
} }
.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; display: none;
} }
@ -1266,7 +1269,8 @@
border: 1px dashed #fff; border: 1px dashed #fff;
} }
.uploader-window h3 { .uploader-window h3, /* Back-compat for pre-4.4 */
.uploader-window h1 {
margin: -0.5em 0 0; margin: -0.5em 0 0;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -1321,7 +1325,8 @@
margin: 0 0 4em; margin: 0 0 4em;
} }
.uploader-inline h3 { .uploader-inline h3, /* Back-compat for pre-4.4 */
.uploader-inline h2 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
font-weight: 400; font-weight: 400;
@ -1740,7 +1745,8 @@
padding: 0; padding: 0;
} }
.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; text-transform: uppercase;
font-size: 12px; font-size: 12px;
color: #666; color: #666;
@ -1748,7 +1754,8 @@
margin-top: 24px; margin-top: 24px;
} }
.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; text-decoration: none;
color: #666; color: #666;
} }
@ -1878,10 +1885,12 @@
right: 0; right: 0;
} }
.image-details .column-settings h3 { .image-details .column-settings h3, /* Back-compat for pre-4.4 */
.image-details .column-settings h2 {
margin: 20px; margin: 20px;
padding-top: 20px; padding-top: 20px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
color: #23282d;
} }
.image-details .column-image { .image-details .column-image {

2
wp-includes/css/media-views-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

25
wp-includes/css/media-views.css
View File

@ -298,8 +298,10 @@
width: 100%; width: 100%;
} }
.media-sidebar h3, .media-sidebar h3, /* Back-compat for pre-4.4 */
.image-details h3 { .image-details h3, /* Back-compat for pre-4.4 */
.media-sidebar h2,
.image-details h2 {
position: relative; position: relative;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
@ -1175,7 +1177,8 @@
max-width: 400px; max-width: 400px;
} }
.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; display: none;
} }
@ -1266,7 +1269,8 @@
border: 1px dashed #fff; border: 1px dashed #fff;
} }
.uploader-window h3 { .uploader-window h3, /* Back-compat for pre-4.4 */
.uploader-window h1 {
margin: -0.5em 0 0; margin: -0.5em 0 0;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -1321,7 +1325,8 @@
margin: 0 0 4em; margin: 0 0 4em;
} }
.uploader-inline h3 { .uploader-inline h3, /* Back-compat for pre-4.4 */
.uploader-inline h2 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
font-weight: 400; font-weight: 400;
@ -1740,7 +1745,8 @@
padding: 0; padding: 0;
} }
.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; text-transform: uppercase;
font-size: 12px; font-size: 12px;
color: #666; color: #666;
@ -1748,7 +1754,8 @@
margin-top: 24px; margin-top: 24px;
} }
.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; text-decoration: none;
color: #666; color: #666;
} }
@ -1878,10 +1885,12 @@
left: 0; left: 0;
} }
.image-details .column-settings h3 { .image-details .column-settings h3, /* Back-compat for pre-4.4 */
.image-details .column-settings h2 {
margin: 20px; margin: 20px;
padding-top: 20px; padding-top: 20px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
color: #23282d;
} }
.image-details .column-image { .image-details .column-image {

2
wp-includes/css/media-views.min.css vendored
View File

File diff suppressed because one or more lines are too long

31
wp-includes/media-template.php
View File

@ -171,7 +171,7 @@ function wp_print_media_templates() {
<script type="text/html" id="tmpl-uploader-window"> <script type="text/html" id="tmpl-uploader-window">
<div class="uploader-window-content"> <div class="uploader-window-content">
<h3><?php _e( 'Drop files to upload' ); ?></h3> <h1><?php _e( 'Drop files to upload' ); ?></h1>
</div> </div>
</script> </script>
@ -188,19 +188,19 @@ function wp_print_media_templates() {
<# } #> <# } #>
<div class="uploader-inline-content {{ messageClass }}"> <div class="uploader-inline-content {{ messageClass }}">
<# if ( data.message ) { #> <# 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> <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 elseif ( is_multisite() && ! is_upload_space_available() ) : ?> <?php if ( is_multisite() && ! is_upload_space_available() ) : ?>
<h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3> <h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
<?php <?php
/** This action is documented in wp-admin/includes/media.php */ /** This action is documented in wp-admin/includes/media.php */
do_action( 'upload_ui_over_quota' ); ?> do_action( 'upload_ui_over_quota' ); ?>
<?php else : ?> <?php else : ?>
<div class="upload-ui"> <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> <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> <button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
</div> </div>
@ -257,7 +257,7 @@ function wp_print_media_templates() {
</script> </script>
<script type="text/html" id="tmpl-uploader-status"> <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> <button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
<div class="media-progress-bar"><div></div></div> <div class="media-progress-bar"><div></div></div>
@ -490,14 +490,13 @@ function wp_print_media_templates() {
</script> </script>
<script type="text/html" id="tmpl-attachment-details"> <script type="text/html" id="tmpl-attachment-details">
<h3> <h2>
<?php _e( 'Attachment Details' ); ?> <?php _e( 'Attachment Details' ); ?>
<span class="settings-save-status"> <span class="settings-save-status">
<span class="spinner"></span> <span class="spinner"></span>
<span class="saved"><?php esc_html_e('Saved.'); ?></span> <span class="saved"><?php esc_html_e('Saved.'); ?></span>
</span> </span>
</h3> </h2>
<div class="attachment-info"> <div class="attachment-info">
<div class="thumbnail thumbnail-{{ data.type }}"> <div class="thumbnail thumbnail-{{ data.type }}">
<# if ( data.uploading ) { #> <# if ( data.uploading ) { #>
@ -599,7 +598,7 @@ function wp_print_media_templates() {
</script> </script>
<script type="text/html" id="tmpl-attachment-display-settings"> <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 ) { #> <# if ( 'image' === data.type ) { #>
<label class="setting"> <label class="setting">
@ -706,7 +705,7 @@ function wp_print_media_templates() {
</script> </script>
<script type="text/html" id="tmpl-gallery-settings"> <script type="text/html" id="tmpl-gallery-settings">
<h3><?php _e('Gallery Settings'); ?></h3> <h2><?php _e( 'Gallery Settings' ); ?></h2>
<label class="setting"> <label class="setting">
<span><?php _e('Link To'); ?></span> <span><?php _e('Link To'); ?></span>
@ -776,7 +775,7 @@ function wp_print_media_templates() {
</script> </script>
<script type="text/html" id="tmpl-playlist-settings"> <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 ), <# var emptyModel = _.isEmpty( data.model ),
isVideo = 'video' === data.controller.get('library').props.get('type'); #> isVideo = 'video' === data.controller.get('library').props.get('type'); #>
@ -903,7 +902,7 @@ function wp_print_media_templates() {
<input type="text" data-setting="alt" value="{{ data.model.alt }}" /> <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
</label> </label>
<h3><?php _e( 'Display Settings' ); ?></h3> <h2><?php _e( 'Display Settings' ); ?></h2>
<div class="setting align"> <div class="setting align">
<span><?php _e('Align'); ?></span> <span><?php _e('Align'); ?></span>
<div class="button-group button-large" data-setting="align"> <div class="button-group button-large" data-setting="align">
@ -985,7 +984,7 @@ function wp_print_media_templates() {
<input type="text" class="link-to-custom" data-setting="linkUrl" /> <input type="text" class="link-to-custom" data-setting="linkUrl" />
</div> </div>
<div class="advanced-section"> <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-settings hidden">
<div class="advanced-image"> <div class="advanced-image">
<label class="setting title-text"> <label class="setting title-text">

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.4-beta2-35426'; $wp_version = '4.4-beta2-35427';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.