Changeset 45931

Timestamp:

09/02/2019 09:48:29 PM (5 years ago)

Author:

afercia

Message:

Accessibility: Improve focus styles for legacy modal dialogs powered by jQuery UI.

Fixes #47944.

Location:

trunk/src/wp-includes/css

Files:

• editor.css (modified) (1 diff)
• jquery-ui-dialog.css (modified) (3 diffs)

trunk/src/wp-includes/css/editor.css

@@ -1454 +1454 @@
         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;
 }
 

trunk/src/wp-includes/css/jquery-ui-dialog.css

@@ -265 +265 @@
     background-color: #fff;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
 }
 
@@ -291 +292 @@
     height: 36px;
     text-align: center;
+    border-radius: 0;
 }
 
@@ -305 +307 @@
 }
 
-.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;
 }