Accessibility: Add focus styles for Windows High Contrast mode.

Introduces in core new focus styles dedicated to Windows High Contrast mode. The 
new styles use a transparent CSS outline as already explored in the Block Editor.
This first part covers some of the main user interface controls like buttons, links,
and media views elements. Other parts will be addressed in the next future.

Fixes #41286.

Built from https://develop.svn.wordpress.org/trunk@44544


git-svn-id: http://core.svn.wordpress.org/trunk@44375 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/admin-menu-rtl.css

@@ -330,7 +330,6 @@
 #adminmenu .wp-submenu li {
 	padding: 0;
 	margin: 0;
-	overflow: hidden;
 }
 
 #adminmenu .wp-menu-image img {
@@ -547,16 +546,20 @@ ul#adminmenu > li.current > a.current:after {
 	padding: 0;
 	position: relative;
 	overflow: visible;
-	line-height: 34px;
 	background: none;
 	color: #aaa;
 	cursor: pointer;
-	outline: 0;
 }
 
-#collapse-button:hover,
+#collapse-button:hover {
+	color: #00b9eb;
+}
+
 #collapse-button:focus {
 	color: #00b9eb;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
+	outline-offset: -1px;
 }
 
 #collapse-button .collapse-button-icon,
@@ -566,7 +569,10 @@ ul#adminmenu > li.current > a.current:after {
 	position: absolute;
 	top: 0;
 	right: 0;
-	line-height: 34px;
+}
+
+#collapse-button .collapse-button-label {
+	top: 8px;
 }
 
 #collapse-button .collapse-button-icon {

wp-admin/css/admin-menu.css

@@ -330,7 +330,6 @@
 #adminmenu .wp-submenu li {
 	padding: 0;
 	margin: 0;
-	overflow: hidden;
 }
 
 #adminmenu .wp-menu-image img {
@@ -547,16 +546,20 @@ ul#adminmenu > li.current > a.current:after {
 	padding: 0;
 	position: relative;
 	overflow: visible;
-	line-height: 34px;
 	background: none;
 	color: #aaa;
 	cursor: pointer;
-	outline: 0;
 }
 
-#collapse-button:hover,
+#collapse-button:hover {
+	color: #00b9eb;
+}
+
 #collapse-button:focus {
 	color: #00b9eb;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
+	outline-offset: -1px;
 }
 
 #collapse-button .collapse-button-icon,
@@ -566,7 +569,10 @@ ul#adminmenu > li.current > a.current:after {
 	position: absolute;
 	top: 0;
 	left: 0;
-	line-height: 34px;
+}
+
+#collapse-button .collapse-button-label {
+	top: 8px;
 }
 
 #collapse-button .collapse-button-icon {

wp-admin/css/common-rtl.css

@@ -158,7 +158,9 @@
 	line-height: normal;
 	box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
 	text-decoration: none;
-	outline: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -2px;
 }
 
 .hidden,
@@ -273,13 +275,21 @@ a:focus .media-icon img,
 	box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 1px rgba(30, 140, 190, .8);
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 .ie8 a:focus {
 	outline: #5b9dd9 solid 1px;
 }
 
-#adminmenu a:focus,
+#adminmenu a:focus {
+	box-shadow: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
+	outline-offset: -1px;
+}
+
 .screen-reader-text:focus {
 	box-shadow: none;
 	outline: none;
@@ -617,7 +627,6 @@ code {
 	line-height: normal; /* IE8-IE11 need this for buttons */
 	color: #0073aa; /* some of these controls are button elements and don't inherit from links */
 	cursor: pointer;
-	outline: 0;
 }
 
 .wrap .wp-heading-inline + .page-title-action {
@@ -639,6 +648,8 @@ code {
 .wrap .page-title-action:focus {
 	border-color: #5b9dd9;
 	box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
 }
 
 .wrap h1.long-header {

wp-admin/css/common.css

@@ -158,7 +158,9 @@
 	line-height: normal;
 	box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
 	text-decoration: none;
-	outline: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -2px;
 }
 
 .hidden,
@@ -273,13 +275,21 @@ a:focus .media-icon img,
 	box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 1px rgba(30, 140, 190, .8);
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 .ie8 a:focus {
 	outline: #5b9dd9 solid 1px;
 }
 
-#adminmenu a:focus,
+#adminmenu a:focus {
+	box-shadow: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
+	outline-offset: -1px;
+}
+
 .screen-reader-text:focus {
 	box-shadow: none;
 	outline: none;
@@ -617,7 +627,6 @@ code {
 	line-height: normal; /* IE8-IE11 need this for buttons */
 	color: #0073aa; /* some of these controls are button elements and don't inherit from links */
 	cursor: pointer;
-	outline: 0;
 }
 
 .wrap .wp-heading-inline + .page-title-action {
@@ -639,6 +648,8 @@ code {
 .wrap .page-title-action:focus {
 	border-color: #5b9dd9;
 	box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
 }
 
 .wrap h1.long-header {

wp-admin/css/forms-rtl.css

@@ -52,6 +52,8 @@ select:focus,
 textarea:focus {
 	border-color: #5b9dd9;
 	box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
 }
 
 /* rtl:ignore */
@@ -236,8 +238,10 @@ textarea[readonly] {
 	color: #72777c;
 }
 
-.form-invalid input, .form-invalid input:focus,
-.form-invalid select, .form-invalid select:focus {
+.form-invalid input,
+.form-invalid input:focus,
+.form-invalid select,
+.form-invalid select:focus {
 	border-color: #dc3232 !important;
 	box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
 }

wp-admin/css/forms.css

@@ -52,6 +52,8 @@ select:focus,
 textarea:focus {
 	border-color: #5b9dd9;
 	box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
 }
 
 /* rtl:ignore */
@@ -236,8 +238,10 @@ textarea[readonly] {
 	color: #72777c;
 }
 
-.form-invalid input, .form-invalid input:focus,
-.form-invalid select, .form-invalid select:focus {
+.form-invalid input,
+.form-invalid input:focus,
+.form-invalid select,
+.form-invalid select:focus {
 	border-color: #dc3232 !important;
 	box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
 }

wp-admin/css/media-rtl.css

@@ -310,10 +310,12 @@
 }
 
 #find-posts-close:focus {
-	outline: none;
 	box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 1px rgba(30, 140, 190, .8);
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -2px;
 }
 
 #find-posts-close:before {
@@ -528,7 +530,9 @@ border color while dragging a file over the uploader drop area */
 	box-shadow:
 		inset 0 0 2px 3px #f1f1f1,
 		inset 0 0 0 7px #5b9dd9;
-	outline: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -6px;
 }
 
 .media-frame.mode-grid .selected.attachment {
@@ -681,6 +685,14 @@ border color while dragging a file over the uploader drop area */
 	box-shadow: none;
 }
 
+.upload-php .media-modal-close:focus,
+.edit-attachment-frame .edit-media-header .left:focus,
+.edit-attachment-frame .edit-media-header .right:focus {
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -2px;
+}
+
 .upload-php .media-modal-close:focus .media-modal-icon:before,
 .upload-php .media-modal-close:hover .media-modal-icon:before {
 	color: #000;
@@ -1079,8 +1091,9 @@ border color while dragging a file over the uploader drop area */
 .image-editor .imgedit-settings .imgedit-help-toggle:focus {
 	color: #0074a2;
 	border-color: #5b9dd9;
-	outline: none;
 	box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
 }
 
 .form-table td.imgedit-response {

wp-admin/css/media.css

@@ -310,10 +310,12 @@
 }
 
 #find-posts-close:focus {
-	outline: none;
 	box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 1px rgba(30, 140, 190, .8);
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -2px;
 }
 
 #find-posts-close:before {
@@ -528,7 +530,9 @@ border color while dragging a file over the uploader drop area */
 	box-shadow:
 		inset 0 0 2px 3px #f1f1f1,
 		inset 0 0 0 7px #5b9dd9;
-	outline: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -6px;
 }
 
 .media-frame.mode-grid .selected.attachment {
@@ -681,6 +685,14 @@ border color while dragging a file over the uploader drop area */
 	box-shadow: none;
 }
 
+.upload-php .media-modal-close:focus,
+.edit-attachment-frame .edit-media-header .left:focus,
+.edit-attachment-frame .edit-media-header .right:focus {
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -2px;
+}
+
 .upload-php .media-modal-close:focus .media-modal-icon:before,
 .upload-php .media-modal-close:hover .media-modal-icon:before {
 	color: #000;
@@ -1079,8 +1091,9 @@ border color while dragging a file over the uploader drop area */
 .image-editor .imgedit-settings .imgedit-help-toggle:focus {
 	color: #0074a2;
 	border-color: #5b9dd9;
-	outline: none;
 	box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
 }
 
 .form-table td.imgedit-response {

wp-includes/css/admin-bar-rtl.css

@@ -53,7 +53,6 @@ html:lang(he-il) .rtl #wpadminbar *  {
 #wpadminbar a:hover,
 #wpadminbar a img,
 #wpadminbar a img:hover {
-	outline: none;
 	border: none;
 	text-decoration: none;
 	background: none;
@@ -71,7 +70,11 @@ html:lang(he-il) .rtl #wpadminbar *  {
 #wpadminbar textarea,
 #wpadminbar div {
 	box-shadow: none;
-	outline: none;
+}
+
+#wpadminbar a:focus {
+	/* Inherits transparent outline only visible in Windows High Contrast mode */
+	outline-offset: -1px;
 }
 
 #wpadminbar {

wp-includes/css/admin-bar.css

@@ -53,7 +53,6 @@ html:lang(he-il) .rtl #wpadminbar *  {
 #wpadminbar a:hover,
 #wpadminbar a img,
 #wpadminbar a img:hover {
-	outline: none;
 	border: none;
 	text-decoration: none;
 	background: none;
@@ -71,7 +70,11 @@ html:lang(he-il) .rtl #wpadminbar *  {
 #wpadminbar textarea,
 #wpadminbar div {
 	box-shadow: none;
-	outline: none;
+}
+
+#wpadminbar a:focus {
+	/* Inherits transparent outline only visible in Windows High Contrast mode */
+	outline-offset: -1px;
 }
 
 #wpadminbar {

wp-includes/css/buttons-rtl.css

@@ -92,9 +92,12 @@ TABLE OF CONTENTS:
 	padding: 0 36px;
 }
 
+/* Only visible in Windows High Contrast mode */
 .wp-core-ui .button:active,
 .wp-core-ui .button:focus {
-	outline: none;
+	outline: 2px solid transparent;
+	/* Reset inherited offset from Gutenberg */
+	outline-offset: 0;
 }
 
 .wp-core-ui .button.hidden {
@@ -190,7 +193,6 @@ TABLE OF CONTENTS:
 	border: 0;
 	border-radius: 0;
 	background: none;
-	outline: none;
 	cursor: pointer;
 	text-align: right;
 	/* Mimics the default link style in common.css */
@@ -211,6 +213,8 @@ TABLE OF CONTENTS:
 	box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 1px rgba(30, 140, 190, .8);
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 .wp-core-ui .button-link-delete {

wp-includes/css/buttons.css

@@ -92,9 +92,12 @@ TABLE OF CONTENTS:
 	padding: 0 36px;
 }
 
+/* Only visible in Windows High Contrast mode */
 .wp-core-ui .button:active,
 .wp-core-ui .button:focus {
-	outline: none;
+	outline: 2px solid transparent;
+	/* Reset inherited offset from Gutenberg */
+	outline-offset: 0;
 }
 
 .wp-core-ui .button.hidden {
@@ -190,7 +193,6 @@ TABLE OF CONTENTS:
 	border: 0;
 	border-radius: 0;
 	background: none;
-	outline: none;
 	cursor: pointer;
 	text-align: left;
 	/* Mimics the default link style in common.css */
@@ -211,6 +213,8 @@ TABLE OF CONTENTS:
 	box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 1px rgba(30, 140, 190, .8);
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 .wp-core-ui .button-link-delete {

wp-includes/css/media-views-rtl.css

@@ -48,8 +48,9 @@
 	box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 1px rgba(30, 140, 190, .8);
-	outline: none;
 	color: #124964;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 .media-frame a.button {
@@ -195,6 +196,9 @@
 	color: #00a0d2;
 	border-color: #5b9dd9;
 	box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -2px;
 }
 
 .media-modal-close span.media-modal-icon {
@@ -835,7 +839,9 @@
 	box-shadow:
 		inset 0 0 2px 3px #fff,
 		inset 0 0 0 7px #5b9dd9;
-	outline: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -6px;
 }
 
 .wp-core-ui .selected.attachment {
@@ -1011,6 +1017,11 @@
 		0 0 0 2px #0073aa;
 }
 
+.wp-core-ui .attachment.selected .check:focus {
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+}
+
 .wp-core-ui .attachment.details .check .media-modal-icon,
 .wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
 	background-position: -21px 0;
@@ -1485,6 +1496,8 @@
 	box-shadow:
 		0 0 0 1px #fff,
 		0 0 2px 3px #5b9dd9;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
 }
 
 .wp-core-ui .media-selection .selected.attachment {
@@ -1777,8 +1790,9 @@
 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
 	color: #0074a2;
 	border-color: #5b9dd9;
-	outline: none;
 	box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
 }
 
 .wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {

wp-includes/css/media-views.css

@@ -48,8 +48,9 @@
 	box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 1px rgba(30, 140, 190, .8);
-	outline: none;
 	color: #124964;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 .media-frame a.button {
@@ -195,6 +196,9 @@
 	color: #00a0d2;
 	border-color: #5b9dd9;
 	box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -2px;
 }
 
 .media-modal-close span.media-modal-icon {
@@ -835,7 +839,9 @@
 	box-shadow:
 		inset 0 0 2px 3px #fff,
 		inset 0 0 0 7px #5b9dd9;
-	outline: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -6px;
 }
 
 .wp-core-ui .selected.attachment {
@@ -1011,6 +1017,11 @@
 		0 0 0 2px #0073aa;
 }
 
+.wp-core-ui .attachment.selected .check:focus {
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+}
+
 .wp-core-ui .attachment.details .check .media-modal-icon,
 .wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
 	background-position: -21px 0;
@@ -1485,6 +1496,8 @@
 	box-shadow:
 		0 0 0 1px #fff,
 		0 0 2px 3px #5b9dd9;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
 }
 
 .wp-core-ui .media-selection .selected.attachment {
@@ -1777,8 +1790,9 @@
 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
 	color: #0074a2;
 	border-color: #5b9dd9;
-	outline: none;
 	box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
 }
 
 .wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.1-alpha-44543';
+$wp_version = '5.1-alpha-44544';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.