Accessibility: Improve and modernize user interface controls for better 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

src/wp-admin/css/colors/_admin.scss

@@ -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

@@ -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% ),
+		box-shadow:
-					0 0 2px 1px #33b3db;
+			0 0 0 1px #fff,
+			0 0 0 3px $button-color;
 	}
 
 	&:active,
 	&.active,
 	&.active:focus,
 	&.active:hover {
-		background: darken( $button-color, 10% );
+		background: darken( $button-color, 5% );
-		border-color: darken( $button-color, 15% );
+		border-color: darken( $button-color, 5% );
-	 	box-shadow: inset 0 2px 0 darken( $button-color, 15% );
 	}
 
 	&[disabled],
@@ -39,16 +33,8 @@
 	&.button-primary-disabled,
 	&.disabled {
 		color: hsl( hue( $button-color ), 10%, 80% ) !important;
-		background: darken( $button-color, 8% ) !important;
+		background: lighten( $button-color, 15% ) !important;
-		border-color: darken( $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

@@ -272,11 +272,7 @@ a:focus,
 a:focus .media-icon img,
 .wp-person a:focus .gravatar {
 	color: #124964;
-	box-shadow:
+	outline: 1px dotted #555d66;
-		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;
 }
 
 .ie8 a:focus {
@@ -284,9 +280,7 @@ a:focus .media-icon img,
 }
 
 #adminmenu a:focus {
-	box-shadow: none;
+	outline: 1px dotted #555d66;
-	/* Only visible in Windows High Contrast mode */
-	outline: 1px solid transparent;
 	outline-offset: -1px;
 }
 
@@ -623,15 +617,13 @@ code {
 	position: relative;
 	top: -3px;
 	text-decoration: none;
-	border: none;
+	border: 1px solid #7e8993;
-	border: 1px solid #ccc;
 	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: #f3f5f6;
-	background: #00a0d2;
+	border-color: #7e8993;
-	color: #fff;
+	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;
+	border-color: #007cba;
-	box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
+	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:
+	outline: 1px dotted #555d66;
-		0 0 0 1px #5b9dd9,
-		0 0 2px 1px rgba(30, 140, 190, 0.8);
 }
 
 .key-labels label {
@@ -1441,8 +1431,7 @@ div.error p,
 }
 
 .notice-dismiss:focus {
-	outline: none;
+	outline: 1px dotted #555d66;
-	box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
 }
 
 .ie8 .notice-dismiss:focus {
@@ -3070,9 +3059,7 @@ img {
 }
 
 .js .postbox .handlediv:focus .toggle-indicator:before {
-	box-shadow:
+	outline: 1px dotted #555d66;
-		0 0 0 1px #5b9dd9,
-		0 0 2px 1px rgba(30, 140, 190, 0.8);
 }
 
 /* @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:
+	outline: 1px dotted #555d66;
-		0 0 0 1px #5b9dd9,
-		0 0 2px 1px rgba(30, 140, 190, 0.8);
 }
 
 .control-section .accordion-section-title:after,

src/wp-admin/css/forms.css

@@ -50,8 +50,8 @@ input[type="checkbox"]:focus,
 input[type="radio"]:focus,
 select:focus,
 textarea:focus {
-	border-color: #5b9dd9;
+	border-color: #007cba;
-	box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
+	box-shadow: 0 0 0 1px #007cba;
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
 }

src/wp-admin/css/themes.css

@@ -178,8 +178,7 @@ body.js .theme-browser.search-loading {
 }
 
 .theme-browser .theme:focus {
-	border-color: #5b9dd9;
+	outline: 1px dotted #555d66;
-	box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
 }
 
 .theme-browser .theme:focus .more-details {

src/wp-includes/css/buttons.css

@@ -124,9 +124,8 @@ TABLE OF CONTENTS:
 .wp-core-ui .button,
 .wp-core-ui .button-secondary {
 	color: #555;
-	border-color: #cccccc;
+	border-color: #7e8993;
-	background: #f7f7f7;
+	background: #f1f1f1;
-	box-shadow: 0 1px 0 #cccccc;
 	vertical-align: top;
 }
 
@@ -140,16 +139,18 @@ TABLE OF CONTENTS:
 .wp-core-ui .button.focus,
 .wp-core-ui .button:focus,
 .wp-core-ui .button-secondary:focus {
-	background: #fafafa;
+	background: #f3f5f6;
-	border-color: #999;
+	border-color: #7e8993;
-	color: #23282d;
+	color: #007cba;
 }
 
 .wp-core-ui .button.focus,
 .wp-core-ui .button:focus,
 .wp-core-ui .button-secondary:focus {
-	border-color: #5b9dd9;
+	background: #f3f5f6;
-	box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
+	border-color: #007cba;
+	color: #016087;
+	box-shadow: 0 0 0 1px #007cba;
 }
 
 .wp-core-ui .button.active,
@@ -158,15 +159,13 @@ TABLE OF CONTENTS:
 .wp-core-ui .button-secondary:active {
 	background: #eee;
 	border-color: #999;
-	box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
 	transform: translateY(1px);
+	box-shadow: none;
 }
 
 .wp-core-ui .button.active:focus {
-	border-color: #5b9dd9;
+	border-color: #999;
-	box-shadow:
+	box-shadow: 0 0 0 1px #999;
-		inset 0 2px 5px -3px rgba(0, 0, 0, 0.5),
-		0 0 3px rgba(0, 115, 170, 0.8);
 }
 
 .wp-core-ui .button[disabled],
@@ -210,11 +209,7 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button-link:focus {
 	color: #124964;
-	box-shadow:
+	outline: 1px dotted #555d66;
-		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;
 }
 
 .wp-core-ui .button-link-delete {
@@ -241,39 +236,37 @@ TABLE OF CONTENTS:
 ---------------------------------------------------------------------------- */
 
 .wp-core-ui .button-primary {
-	background: #0085ba;
+	background: #007cba;
-	border-color: #0073aa #006799 #006799;
+	border-color: #007cba;
-	box-shadow: 0 1px 0 #006799;
 	color: #fff;
 	text-decoration: none;
-	text-shadow: 0 -1px 1px #006799,
+	text-shadow: none;
-		1px 0 1px #006799,
-		0 1px 1px #006799,
-		-1px 0 1px #006799;
 }
 
 .wp-core-ui .button-primary.hover,
 .wp-core-ui .button-primary:hover,
 .wp-core-ui .button-primary.focus,
 .wp-core-ui .button-primary:focus {
-	background: #008ec2;
+	background: #0071a1;
-	border-color: #006799;
+	border-color: #0071a1;
 	color: #fff;
 }
 
 .wp-core-ui .button-primary.focus,
 .wp-core-ui .button-primary:focus {
-	box-shadow: 0 1px 0 #0073aa,
+	box-shadow:
-		0 0 2px 1px #33b3db;
+		0 0 0 1px #fff,
+		0 0 0 3px #007cba;
 }
 
 .wp-core-ui .button-primary.active,
 .wp-core-ui .button-primary.active:hover,
 .wp-core-ui .button-primary.active:focus,
 .wp-core-ui .button-primary:active {
-	background: #0073aa;
+	background: #00669b;
-	border-color: #006799;
+	border-color: #00669b;
-	box-shadow: inset 0 2px 0 #006799;
+	transform: translateY(1px);
+	box-shadow: none;
 }
 
 .wp-core-ui .button-primary[disabled],
@@ -282,30 +275,12 @@ TABLE OF CONTENTS:
 .wp-core-ui .button-primary.disabled {
 	color: #66c6e4 !important;
 	background: #008ec2 !important;
-	border-color: #007cb2 !important;
+	border-color: #008ec2 !important;
 	box-shadow: none !important;
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
+	text-shadow: none !important;
 	cursor: default;
 }
 
-.wp-core-ui .button.button-primary.button-hero {
-	box-shadow: 0 2px 0 #006799;
-}
-
-.wp-core-ui .button.button-primary.button-hero:focus {
-	box-shadow:
-		0 2px 0 #006799,
-		0 1px 0 #0073aa,
-		0 0 2px 1px #33b3db;
-}
-
-.wp-core-ui .button.button-primary.button-hero.active,
-.wp-core-ui .button.button-primary.button-hero.active:hover,
-.wp-core-ui .button.button-primary.button-hero.active:focus,
-.wp-core-ui .button.button-primary.button-hero:active {
-	box-shadow: inset 0 3px 0 #006799;
-}
-
 /* ----------------------------------------------------------------------------
   4.0 - Button Groups
 ---------------------------------------------------------------------------- */
@@ -324,14 +299,6 @@ TABLE OF CONTENTS:
 	margin-right: -1px;
 }
 
-.wp-core-ui .button-group > .button-primary {
-	z-index: 100;
-}
-
-.wp-core-ui .button-group > .button:hover {
-	z-index: 20;
-}
-
 .wp-core-ui .button-group > .button:first-child {
 	border-radius: 3px 0 0 3px;
 }
@@ -340,11 +307,25 @@ TABLE OF CONTENTS:
 	border-radius: 0 3px 3px 0;
 }
 
+.wp-core-ui .button-group > .button-primary + .button {
+	border-left: 0;
+}
+
 .wp-core-ui .button-group > .button:focus {
 	position: relative;
 	z-index: 1;
 }
 
+.wp-core-ui .button-group > .button.active {
+	background-color: #e2e4e7;
+	box-shadow: inset 0 1px 0 0 #999;
+}
+
+.wp-core-ui .button-group > .button:active,
+.wp-core-ui .button-group > .button.active {
+	transform: translateY(0);
+}
+
 /* ----------------------------------------------------------------------------
   5.0 - Responsive Button Styles
 ---------------------------------------------------------------------------- */