mirror of
https://github.com/WordPress/WordPress.git
synced 2024-06-25 22:35:02 +02:00
Accessibility: Media: Make the Image Editor buttons text visible.
User interface controls that use only icons aren't ideal for many users. Universal icons are rare. Icons must communicate meaning but their actual meaning varies depending on many factors including the users cultural background. Moreover, users with cognitive impairments and speech recognition users need interface controls with visible text to be able to operate them. - shortens some of the buttons text to: Rotate left, Rotate right, Flip vertical, Flip horizontal - moves the Undo and Redo buttons underneath the main buttons group Props nrqsnchz, melchoyce, karmatosed, sabernhardt, mikeschroder. Fixes #47116. Built from https://develop.svn.wordpress.org/trunk@46326 git-svn-id: http://core.svn.wordpress.org/trunk@46125 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
parent
8affbd6404
commit
93dd6d907a
|
|
@ -845,8 +845,10 @@ border color while dragging a file over the uploader drop area */
|
|||
}
|
||||
|
||||
.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
|
||||
padding: 3px 0 0 16px;
|
||||
float: right;
|
||||
box-sizing: border-box;
|
||||
width: calc( 100% - 250px );
|
||||
padding: 3px 0 0 16px;
|
||||
}
|
||||
|
||||
.wp_attachment_holder .imgedit-wrap .imgedit-settings {
|
||||
|
|
@ -914,7 +916,6 @@ border color while dragging a file over the uploader drop area */
|
|||
}
|
||||
|
||||
.imgedit-menu {
|
||||
min-width: 300px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
|
|
@ -925,31 +926,35 @@ border color while dragging a file over the uploader drop area */
|
|||
}
|
||||
|
||||
.image-editor .imgedit-menu .button {
|
||||
float: right;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 0 0 8px;
|
||||
padding: 0;
|
||||
background: #f1f1f1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 1.23076923;
|
||||
color: #72777c;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
min-height: 28px;
|
||||
font-size: 13px;
|
||||
line-height: 2;
|
||||
margin: 0 0 8px 8px;
|
||||
padding: 0 10px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.imgedit-menu .button:before {
|
||||
font: normal 20px/1 dashicons;
|
||||
font: normal 16px/1 dashicons;
|
||||
margin-left: 8px;
|
||||
speak: none;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.imgedit-menu .button.disabled {
|
||||
border-color: #ccc;
|
||||
background-color: #ddd;
|
||||
color: #72777c;
|
||||
filter: alpha(opacity=50);
|
||||
opacity: 0.5;
|
||||
color: #a0a5aa;
|
||||
border-color: #ddd;
|
||||
background: #f7f7f7;
|
||||
box-shadow: none;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
cursor: default;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.imgedit-crop:before {
|
||||
|
|
@ -1187,6 +1192,12 @@ audio, video {
|
|||
font-size: 16px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
|
||||
.wp_attachment_holder .imgedit-wrap .imgedit-settings {
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
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
|
|
@ -845,8 +845,10 @@ border color while dragging a file over the uploader drop area */
|
|||
}
|
||||
|
||||
.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
|
||||
padding: 3px 16px 0 0;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
width: calc( 100% - 250px );
|
||||
padding: 3px 16px 0 0;
|
||||
}
|
||||
|
||||
.wp_attachment_holder .imgedit-wrap .imgedit-settings {
|
||||
|
|
@ -914,7 +916,6 @@ border color while dragging a file over the uploader drop area */
|
|||
}
|
||||
|
||||
.imgedit-menu {
|
||||
min-width: 300px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
|
|
@ -925,31 +926,35 @@ border color while dragging a file over the uploader drop area */
|
|||
}
|
||||
|
||||
.image-editor .imgedit-menu .button {
|
||||
float: left;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 8px 0 0;
|
||||
padding: 0;
|
||||
background: #f1f1f1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 1.23076923;
|
||||
color: #72777c;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
min-height: 28px;
|
||||
font-size: 13px;
|
||||
line-height: 2;
|
||||
margin: 0 8px 8px 0;
|
||||
padding: 0 10px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.imgedit-menu .button:before {
|
||||
font: normal 20px/1 dashicons;
|
||||
font: normal 16px/1 dashicons;
|
||||
margin-right: 8px;
|
||||
speak: none;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.imgedit-menu .button.disabled {
|
||||
border-color: #ccc;
|
||||
background-color: #ddd;
|
||||
color: #72777c;
|
||||
filter: alpha(opacity=50);
|
||||
opacity: 0.5;
|
||||
color: #a0a5aa;
|
||||
border-color: #ddd;
|
||||
background: #f7f7f7;
|
||||
box-shadow: none;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
cursor: default;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.imgedit-crop:before {
|
||||
|
|
@ -1187,6 +1192,12 @@ audio, video {
|
|||
font-size: 16px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
|
||||
.wp_attachment_holder .imgedit-wrap .imgedit-settings {
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
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
|
|
@ -196,7 +196,7 @@ function wp_image_editor( $post_id, $msg = false ) {
|
|||
<div class="imgedit-panel-content wp-clearfix">
|
||||
<?php echo $note; ?>
|
||||
<div class="imgedit-menu wp-clearfix">
|
||||
<button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button>
|
||||
<button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
|
||||
<?php
|
||||
|
||||
// On some setups GD library does not provide imagerotate() - Ticket #11536
|
||||
|
|
@ -208,8 +208,8 @@ function wp_image_editor( $post_id, $msg = false ) {
|
|||
) ) {
|
||||
$note_no_rotate = '';
|
||||
?>
|
||||
<button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate counter-clockwise' ); ?></span></button>
|
||||
<button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate clockwise' ); ?></span></button>
|
||||
<button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
|
||||
<button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
|
||||
<?php
|
||||
} else {
|
||||
$note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
|
||||
|
|
@ -218,11 +218,12 @@ function wp_image_editor( $post_id, $msg = false ) {
|
|||
<button type="button" class="imgedit-rright button disabled" disabled></button>
|
||||
<?php } ?>
|
||||
|
||||
<button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><span class="screen-reader-text"><?php esc_html_e( 'Flip vertically' ); ?></span></button>
|
||||
<button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><span class="screen-reader-text"><?php esc_html_e( 'Flip horizontally' ); ?></span></button>
|
||||
<button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
|
||||
<button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
|
||||
|
||||
<button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Undo' ); ?></span></button>
|
||||
<button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Redo' ); ?></span></button>
|
||||
<br class="imgedit-undo-redo-separator" />
|
||||
<button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled" disabled><?php esc_html_e( 'Undo' ); ?></button>
|
||||
<button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled" disabled><?php esc_html_e( 'Redo' ); ?></button>
|
||||
<?php echo $note_no_rotate; ?>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1330,13 +1330,13 @@ final class _WP_Editors {
|
|||
'Image options' => __( 'Image options' ),
|
||||
'Back' => __( 'Back' ),
|
||||
'Invert' => __( 'Invert' ),
|
||||
'Flip horizontally' => __( 'Flip horizontally' ),
|
||||
'Flip vertically' => __( 'Flip vertically' ),
|
||||
'Flip horizontally' => __( 'Flip horizontal' ),
|
||||
'Flip vertically' => __( 'Flip vertical' ),
|
||||
'Crop' => __( 'Crop' ),
|
||||
'Orientation' => __( 'Orientation' ),
|
||||
'Resize' => __( 'Resize' ),
|
||||
'Rotate clockwise' => __( 'Rotate clockwise' ),
|
||||
'Rotate counterclockwise' => __( 'Rotate counterclockwise' ),
|
||||
'Rotate clockwise' => __( 'Rotate right' ),
|
||||
'Rotate counterclockwise' => __( 'Rotate left' ),
|
||||
'Sharpen' => __( 'Sharpen' ),
|
||||
'Brightness' => __( 'Brightness' ),
|
||||
'Color levels' => __( 'Color levels' ),
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.3-beta1-46325';
|
||||
$wp_version = '5.3-beta1-46326';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user