From 70f1b3c10c966d767e100625e8d697c2aa5a66d1 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Sat, 4 Jul 2020 10:42:41 +0000
Subject: [PATCH] Accessibility: Improve the focus style for Windows High
 Contrast mode in various parts of the admin interface.

Continues the introduction in core of new focus styles dedicated to Windows High Contrast mode. The new styles use a transparent CSS outline.
This change covers some parts of the interface for the meta boxes, Widgets, and the Customizer.

Props joedolson, kjellr, antpb, mikeschroder, Hareesh Pillai.
See #41286, #45910.
Fixes #47117.


git-svn-id: https://develop.svn.wordpress.org/trunk@48293 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css              | 12 ++++++++++--
 src/wp-admin/css/customize-controls.css  | 17 ++++++++++++++---
 src/wp-admin/css/customize-nav-menus.css |  3 ++-
 src/wp-admin/css/widgets.css             |  4 ++--
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index b959b1c40a..022a276bb7 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -3057,13 +3057,16 @@ img {
 
 .js .postbox .handlediv:focus {
 	box-shadow: none;
-	outline: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 .js .postbox .handlediv:focus .toggle-indicator:before {
 	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;
 }
 
 /* @todo: appears to be Press This only and overridden */
@@ -3384,6 +3387,8 @@ img {
 .sidebar-name:hover .toggle-indicator,
 .accordion-section-title:hover:after {
 	color: #23282d;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 .widget-top .widget-action:focus .toggle-indicator:before {
@@ -3466,12 +3471,15 @@ img {
 }
 
 .accordion-section-title:focus {
-	outline: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 .accordion-section-title:hover:after,
 .accordion-section-title:focus:after {
 	border-color: #a0a5aa transparent;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 .cannot-expand .accordion-section-title {
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 99333735c1..215a64361c 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -842,10 +842,16 @@ h3.customize-section-title {
 	background: #fff;
 	color: #0073aa;
 	border-top-color: #0073aa;
-	outline: none;
 	box-shadow: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
+#customize-theme-controls .accordion-section-title:focus .customize-action {
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
+	outline-offset: 1px;
+}
 
 .customize-panel-back:hover,
 .customize-panel-back:focus,
@@ -854,8 +860,10 @@ h3.customize-section-title {
 	color: #0073aa;
 	background: #f3f3f5;
 	border-left-color: #0073aa;
-	outline: none;
 	box-shadow: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -2px;
 }
 
 .customize-controls-close:before {
@@ -1395,6 +1403,7 @@ p.customize-section-description {
 	border-color: #007cba;
 	border-style: solid;
 	box-shadow: 0 0 0 1px #007cba;
+	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
 }
 
@@ -2212,8 +2221,10 @@ p.customize-section-description {
 		color: #0073aa;
 		background: #f3f3f5;
 		border-left-color: #0073aa;
-		outline: none;
 		box-shadow: none;
+		/* Only visible in Windows High Contrast mode */
+		outline: 2px solid transparent;
+		outline-offset: -2px;
 	}
 
 	.showing-themes #customize-header-actions {
diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
index 5ce9eb46bb..dc4e518cad 100644
--- a/src/wp-admin/css/customize-nav-menus.css
+++ b/src/wp-admin/css/customize-nav-menus.css
@@ -269,7 +269,8 @@
 
 .customize-screen-options-toggle:focus,
 #customize-controls .customize-info .customize-help-toggle:focus {
-	outline: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 .customize-screen-options-toggle:before {
diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css
index b6b912a8cc..ac5f183c89 100644
--- a/src/wp-admin/css/widgets.css
+++ b/src/wp-admin/css/widgets.css
@@ -25,7 +25,6 @@
 	padding: 10px;
 	background: none;
 	cursor: pointer;
-	outline: none;
 }
 
 .widget-title h3,
@@ -324,7 +323,8 @@
 
 .sidebar-name .handlediv:focus {
 	box-shadow: none;
-	outline: none;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 #widgets-left .sidebar-name .toggle-indicator {