Skip to content
Permalink
Browse files

Accessibility: Improve and modernize user interface controls for bett…

…er contrast. First part: buttons and links.

- 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
  • Loading branch information...
afercia committed Sep 23, 2019
1 parent 42b5133 commit 94211aeb0537b7f83999e2f790cb68859279d321
@@ -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 );
}
@@ -1,54 +1,40 @@
/*
* 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],
&:disabled,
&.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;
}
}

}
@@ -272,21 +272,15 @@ 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 {
outline: #5b9dd9 solid 1px;
}

#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,
@@ -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;
}
@@ -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 {

0 comments on commit 94211ae

Please sign in to comment.
You can’t perform that action at this time.