Accessibility: Improve accessibility of all the media views form controls.
- changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
@@ -374,12 +374,11 @@
|
||||
}
|
||||
|
||||
.drag-drop .drag-drop-inside {
|
||||
margin: 70px auto 0;
|
||||
margin: 60px auto 0;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.drag-drop-inside p {
|
||||
color: #a0a5aa;
|
||||
font-size: 14px;
|
||||
margin: 5px 0;
|
||||
display: none;
|
||||
@@ -480,7 +479,6 @@ border color while dragging a file over the uploader drop area */
|
||||
color: #c00;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -1031,7 +1029,6 @@ border color while dragging a file over the uploader drop area */
|
||||
display: block;
|
||||
}
|
||||
|
||||
#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
|
||||
#poststuff .imgedit-group-top h2 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
@@ -1109,6 +1106,10 @@ span.imgedit-scale-warn {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.imgedit-save-target legend {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.imgedit-group {
|
||||
margin-bottom: 8px;
|
||||
padding: 10px;
|
||||
@@ -1126,7 +1127,6 @@ span.imgedit-scale-warn {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
}
|
||||
@@ -1190,10 +1190,6 @@ audio, video {
|
||||
font-size: 16px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.imgedit-applyto .imgedit-label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1232,10 +1228,6 @@ audio, video {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.upload-php .media-modal-close .media-modal-icon {
|
||||
margin: 9px 10px;
|
||||
}
|
||||
|
||||
.edit-attachment-frame .edit-media-header .right:before,
|
||||
.edit-attachment-frame .edit-media-header .left:before {
|
||||
line-height: 40px !important;
|
||||
|
||||
2
wp-admin/css/media-rtl.min.css
vendored
2
wp-admin/css/media-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -374,12 +374,11 @@
|
||||
}
|
||||
|
||||
.drag-drop .drag-drop-inside {
|
||||
margin: 70px auto 0;
|
||||
margin: 60px auto 0;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.drag-drop-inside p {
|
||||
color: #a0a5aa;
|
||||
font-size: 14px;
|
||||
margin: 5px 0;
|
||||
display: none;
|
||||
@@ -480,7 +479,6 @@ border color while dragging a file over the uploader drop area */
|
||||
color: #c00;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -1031,7 +1029,6 @@ border color while dragging a file over the uploader drop area */
|
||||
display: block;
|
||||
}
|
||||
|
||||
#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
|
||||
#poststuff .imgedit-group-top h2 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
@@ -1109,6 +1106,10 @@ span.imgedit-scale-warn {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.imgedit-save-target legend {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.imgedit-group {
|
||||
margin-bottom: 8px;
|
||||
padding: 10px;
|
||||
@@ -1126,7 +1127,6 @@ span.imgedit-scale-warn {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
}
|
||||
@@ -1190,10 +1190,6 @@ audio, video {
|
||||
font-size: 16px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.imgedit-applyto .imgedit-label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1232,10 +1228,6 @@ audio, video {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.upload-php .media-modal-close .media-modal-icon {
|
||||
margin: 9px 10px;
|
||||
}
|
||||
|
||||
.edit-attachment-frame .edit-media-header .right:before,
|
||||
.edit-attachment-frame .edit-media-header .left:before {
|
||||
line-height: 40px !important;
|
||||
|
||||
2
wp-admin/css/media.min.css
vendored
2
wp-admin/css/media.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -64,16 +64,14 @@ function wp_image_editor( $post_id, $msg = false ) {
|
||||
<fieldset class="imgedit-scale">
|
||||
<legend><?php _e( 'New dimensions:' ); ?></legend>
|
||||
<div class="nowrap">
|
||||
<label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
|
||||
<label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale width' ); ?></label>
|
||||
<input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
|
||||
</label>
|
||||
<span class="imgedit-separator">×</span>
|
||||
<label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
|
||||
<span class="imgedit-separator" aria-hidden="true">×</span>
|
||||
<label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
|
||||
<input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
|
||||
</label>
|
||||
<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
|
||||
<input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
@@ -124,26 +122,22 @@ function wp_image_editor( $post_id, $msg = false ) {
|
||||
<fieldset class="imgedit-crop-ratio">
|
||||
<legend><?php _e( 'Aspect ratio:' ); ?></legend>
|
||||
<div class="nowrap">
|
||||
<label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
|
||||
<label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></label>
|
||||
<input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
|
||||
</label>
|
||||
<span class="imgedit-separator">:</span>
|
||||
<label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
|
||||
<span class="imgedit-separator" aria-hidden="true">:</span>
|
||||
<label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></label>
|
||||
<input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
|
||||
<legend><?php _e( 'Selection:' ); ?></legend>
|
||||
<div class="nowrap">
|
||||
<label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
|
||||
<label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection width' ); ?></label>
|
||||
<input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
|
||||
</label>
|
||||
<span class="imgedit-separator">×</span>
|
||||
<label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
|
||||
<span class="imgedit-separator" aria-hidden="true">×</span>
|
||||
<label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection height' ); ?></label>
|
||||
<input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@@ -168,19 +162,22 @@ function wp_image_editor( $post_id, $msg = false ) {
|
||||
|
||||
<div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
|
||||
<fieldset>
|
||||
<legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
|
||||
<legend><?php _e( 'Apply changes to:' ); ?></legend>
|
||||
|
||||
<label class="imgedit-label">
|
||||
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
|
||||
<?php _e( 'All image sizes' ); ?></label>
|
||||
<span class="imgedit-label">
|
||||
<input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
|
||||
<label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
|
||||
</span>
|
||||
|
||||
<label class="imgedit-label">
|
||||
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
|
||||
<?php _e( 'Thumbnail' ); ?></label>
|
||||
<span class="imgedit-label">
|
||||
<input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
|
||||
<label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
|
||||
</span>
|
||||
|
||||
<label class="imgedit-label">
|
||||
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
|
||||
<?php _e( 'All sizes except thumbnail' ); ?></label>
|
||||
<span class="imgedit-label">
|
||||
<input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
|
||||
<label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
|
||||
</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2072,7 +2072,7 @@ wpUploaderInit = <?php echo wp_json_encode( $plupload_init ); ?>;
|
||||
?>
|
||||
<div id="drag-drop-area">
|
||||
<div class="drag-drop-inside">
|
||||
<p class="drag-drop-info"><?php _e( 'Drop files here' ); ?></p>
|
||||
<p class="drag-drop-info"><?php _e( 'Drop files to upload' ); ?></p>
|
||||
<p><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
|
||||
<p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e( 'Select Files' ); ?>" class="button" /></p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user