Changeset 59041

Timestamp:

09/17/2024 11:26:03 PM (4 weeks ago)

Author:

joedolson

Message:

Accessibility: Add border around menus and submenus in high contrast mode.

Add outlines and borders to mark the boundaries between the admin navigation menu and content and around adminbar submenus that are visible when Windows High Contrast Mode is enabled. This clarifies the page structure and makes high contrast mode easier to use.

Props wildworks, hbhalodia, sabernhardt, joedolson, rcreators.
Fixes #61616.

Location:

trunk/src

Files:

• wp-admin/css/admin-menu.css (modified) (5 diffs)
• wp-includes/css/admin-bar.css (modified) (3 diffs)

trunk/src/wp-admin/css/admin-menu.css

@@ -12 +12 @@
     bottom: -120px;
     z-index: 1; /* positive z-index to avoid elastic scrolling woes in Safari */
+
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
 }
 
@@ -206 +209 @@
     min-width: 160px;
     width: auto;
-    border-left: 5px solid transparent;
+    border: 1px solid transparent;
+    border-left-width: 5px;
 }
 
@@ -416 +420 @@
     font-size: 14px;
     padding: 5px 4px 5px 11px;
-    margin: -7px 0 4px -5px;
-    border-width: 3px 0 3px 5px;
+    margin: -8px -1px 4px -5px;
+    border-width: 3px 1px 3px 5px;
     border-style: solid;
     border-color: transparent;
@@ -582 +586 @@
 
     .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
-        min-width: 150px;
+        min-width: 160px;
         width: auto;
+        border: 1px solid transparent;
+        border-left-width: 5px;
     }
 
@@ -772 +778 @@
 
     #adminmenu .wp-not-current-submenu .wp-submenu,
-    .folded #adminmenu .wp-has-current-submenu .wp-submenu {
-        border-left: none;
+    .folded #adminmenu .wp-has-current-submenu .wp-submenu,
+    .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
+        border: none;
     }
 

trunk/src/wp-includes/css/admin-bar.css

@@ -98 +98 @@
     z-index: 99999;
     background: #1d2327;
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
 }
 
@@ -196 +198 @@
 #wpadminbar li.hover > .ab-sub-wrapper {
     display: block;
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
 }
 
@@ -907 +911 @@
     #wpadminbar #wp-admin-bar-new-content .ab-icon:before {
         top: 0;
-        line-height: 1.33333333;
+        line-height: 1.26;
         height: 46px !important;
         text-align: center;