From aed8c497cb29ea878bc2843f928ad54237b311aa Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Mon, 2 Sep 2019 21:48:29 +0000
Subject: [PATCH] Accessibility: Improve focus styles for legacy modal dialogs
 powered by jQuery UI.

Fixes #47944.


git-svn-id: https://develop.svn.wordpress.org/trunk@45931 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/css/editor.css           |  3 +++
 src/wp-includes/css/jquery-ui-dialog.css | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css
index 98e599bc4a..f3e410449f 100644
--- a/src/wp-includes/css/editor.css
+++ b/src/wp-includes/css/editor.css
@@ -1453,6 +1453,9 @@ i.mce-i-wp_code: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: 2px solid transparent;
+	outline-offset: -2px;
 }
 
 #wp-link-wrap #link-selector {
diff --git a/src/wp-includes/css/jquery-ui-dialog.css b/src/wp-includes/css/jquery-ui-dialog.css
index 831de2c8b9..6908a8bdcc 100644
--- a/src/wp-includes/css/jquery-ui-dialog.css
+++ b/src/wp-includes/css/jquery-ui-dialog.css
@@ -264,6 +264,7 @@
 	z-index: 100102;
 	background-color: #fff;
 	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+	overflow: hidden;
 }
 
 .ui-dialog-titlebar {
@@ -290,6 +291,7 @@
 	width: 36px;
 	height: 36px;
 	text-align: center;
+	border-radius: 0;
 }
 
 .ui-dialog-titlebar-close:before {
@@ -304,10 +306,20 @@
 	content: "\f158";
 }
 
-.ui-button.ui-dialog-titlebar-close:hover {
+.ui-button.ui-dialog-titlebar-close:hover,
+.ui-button.ui-dialog-titlebar-close:focus {
 	color: #00a0d2;
 }
 
+.ui-button.ui-dialog-titlebar-close:focus {
+	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: 2px solid transparent;
+	outline-offset: -2px;
+}
+
 .ui-dialog-titlebar-close .ui-button-text {
 	display: none;
 }