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.

git-svn-id: https://develop.svn.wordpress.org/trunk@59041 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -11,6 +11,9 @@
 	top: 0;
 	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;
 }
 
 .php-error #adminmenuback {
@@ -205,7 +208,8 @@
 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
 	min-width: 160px;
 	width: auto;
-	border-left: 5px solid transparent;
+	border: 1px solid transparent;
+	border-left-width: 5px;
 }
 
 #adminmenu .wp-submenu li.current,
@@ -415,8 +419,8 @@ ul#adminmenu > li.current > a.current:after {
 	font-weight: 400;
 	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;
 }
@@ -581,8 +585,10 @@ li#wp-admin-bar-menu-toggle {
 	}
 
 	.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;
 	}
 
 	.auto-fold #adminmenu .wp-has-current-submenu li > a {
@@ -771,8 +777,9 @@ li#wp-admin-bar-menu-toggle {
 	}
 
 	#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;
 	}
 
 	/* Remove submenu headers and adjust sub meu*/

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

@@ -97,6 +97,8 @@ html:lang(he-il) .rtl #wpadminbar * {
 	min-width: 600px; /* match the min-width of the body in wp-admin/css/common.css */
 	z-index: 99999;
 	background: #1d2327;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 #wpadminbar .ab-sub-wrapper,
@@ -195,6 +197,8 @@ html:lang(he-il) .rtl #wpadminbar * {
 #wpadminbar.nojs li:hover > .ab-sub-wrapper,
 #wpadminbar li.hover > .ab-sub-wrapper {
 	display: block;
+	/* Only visible in Windows High Contrast mode */
+	outline: 1px solid transparent;
 }
 
 #wpadminbar .menupop li:hover > .ab-sub-wrapper,
@@ -906,7 +910,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 	/* New Content */
 	#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;
 		width: 52px;