vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 20:30:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.

Browse Source 
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).

Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.


git-svn-id: https://develop.svn.wordpress.org/trunk@46241 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-09-23 14:42:36 +00:00
parent 42b5133a25
commit 94211aeb05
6 changed files with 100 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/css/colors/_admin.scss
+31
View File
@@ -43,10 +43,41 @@ input[type=radio]:checked:before {
color: $link-focus;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus,
textarea:focus {
border-color: $highlight-color;
box-shadow: 0 0 0 1px $highlight-color;
}
/* Core UI */
.wp-core-ui {
.button.focus,
.button:focus,
.button-secondary:focus {
border-color: $button-color;
color: darken( $button-color, 5% );
box-shadow: 0 0 0 1px $button-color;
}
.button-primary {
@include button( $button-color );
}
src/wp-admin/css/colors/_mixins.scss
+10 -24
View File
@@ -1,37 +1,31 @@
/*
* Button mixin- creates 3d-ish button effect with correct
* Button mixin- creates a button effect with correct
* highlights/shadows, based on a base color.
*/
@mixin button( $button-color, $text-color: #fff ) {
background: $button-color;
border-color: darken( $button-color, 10% ) darken( $button-color, 15% ) darken( $button-color, 15% );
border-color: $button-color;
color: $text-color;
box-shadow: 0 1px 0 darken( $button-color, 15% );
text-shadow: 0 -1px 1px darken( $button-color, 15% ),
1px 0 1px darken( $button-color, 15% ),
0 1px 1px darken( $button-color, 15% ),
-1px 0 1px darken( $button-color, 15% );
&:hover,
&:focus {
background: lighten( $button-color, 3% );
border-color: darken( $button-color, 15% );
border-color: darken( $button-color, 3% );
color: $text-color;
box-shadow: 0 1px 0 darken( $button-color, 15% );
}
&:focus {
box-shadow: inset 0 1px 0 darken( $button-color, 10% ),
0 0 2px 1px #33b3db;
box-shadow:
0 0 0 1px #fff,
0 0 0 3px $button-color;
}
&:active,
&.active,
&.active:focus,
&.active:hover {
background: darken( $button-color, 10% );
border-color: darken( $button-color, 15% );
box-shadow: inset 0 2px 0 darken( $button-color, 15% );
background: darken( $button-color, 5% );
border-color: darken( $button-color, 5% );
}
&[disabled],
@@ -39,16 +33,8 @@
&.button-primary-disabled,
&.disabled {
color: hsl( hue( $button-color ), 10%, 80% ) !important;
background: darken( $button-color, 8% ) !important;
border-color: darken( $button-color, 15% ) !important;
background: lighten( $button-color, 15% ) !important;
border-color: lighten( $button-color, 15% ) !important;
text-shadow: none !important;
}
&.button-hero {
box-shadow: 0 2px 0 darken( $button-color, 15% ) !important;
&:active {
box-shadow: inset 0 3px 0 darken( $button-color, 15% ) !important;
}
}
}
src/wp-admin/css/common.css
+15 -30
View File
@@ -272,11 +272,7 @@ a:focus,
a:focus .media-icon img,
.wp-person a:focus .gravatar {
color: #124964;
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
outline: 1px dotted #555d66;
}
.ie8 a:focus {
@@ -284,9 +280,7 @@ a:focus .media-icon img,
}
#adminmenu a:focus {
box-shadow: none;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
outline: 1px dotted #555d66;
outline-offset: -1px;
}
@@ -623,15 +617,13 @@ code {
position: relative;
top: -3px;
text-decoration: none;
border: none;
border: 1px solid #ccc;
border: 1px solid #7e8993;
border-radius: 2px;
background: #f7f7f7;
text-shadow: none;
font-weight: 600;
font-size: 13px;
line-height: normal; /* IE8-IE11 need this for buttons */
color: #0073aa; /* some of these controls are button elements and don't inherit from links */
color: #555; /* use the standard color used for buttons */
cursor: pointer;
}
@@ -641,14 +633,14 @@ code {
.wrap .add-new-h2:hover, /* deprecated */
.wrap .page-title-action:hover {
border-color: #008EC2;
background: #00a0d2;
color: #fff;
background: #f3f5f6;
border-color: #7e8993;
color: #007cba;
}
/* lower specificity: color needs to be overridden by :hover and :active */
.page-title-action:focus {
color: #124964;
color: #016087;
}
/* Dashicon for language options on General Settings and Profile screens */
@@ -658,8 +650,8 @@ code {
}
.wrap .page-title-action:focus {
border-color: #5b9dd9;
box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
border-color: #007cba;
box-shadow: 0 0 0 1px #007cba;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
@@ -841,9 +833,7 @@ img.emoji {
}
.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
outline: 1px dotted #555d66;
}
.key-labels label {
@@ -1441,8 +1431,7 @@ div.error p,
}
.notice-dismiss:focus {
outline: none;
box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
outline: 1px dotted #555d66;
}
.ie8 .notice-dismiss:focus {
@@ -3070,9 +3059,7 @@ img {
}
.js .postbox .handlediv:focus .toggle-indicator:before {
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
outline: 1px dotted #555d66;
}
/* @todo: appears to be Press This only and overridden */
@@ -3166,7 +3153,7 @@ img {
}
[role="treeitem"] .folder-label.focus {
color: #124964;
box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
outline: 1px dotted #555d66;
}
[role="treeitem"].hover,
[role="treeitem"] .folder-label.hover {
@@ -3393,9 +3380,7 @@ img {
}
.widget-top .widget-action:focus .toggle-indicator:before {
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
outline: 1px dotted #555d66;
}
.control-section .accordion-section-title:after,
src/wp-admin/css/forms.css
+2 -2
View File
@@ -50,8 +50,8 @@ input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus,
textarea:focus {
border-color: #5b9dd9;
box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
border-color: #007cba;
box-shadow: 0 0 0 1px #007cba;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
src/wp-admin/css/themes.css
+1 -2
View File
@@ -178,8 +178,7 @@ body.js .theme-browser.search-loading {
}
.theme-browser .theme:focus {
border-color: #5b9dd9;
box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
outline: 1px dotted #555d66;
}
.theme-browser .theme:focus .more-details {