vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-12 04:40:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Media: Make the Image Editor buttons text visible.

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@46326 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-09-26 17:15:34 +00:00
parent c177399a13
commit d6770e5c61
3 changed files with 41 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/css/media.css
+29 -18
View File
@@ -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;
}
}
/**