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.
Built from https://develop.svn.wordpress.org/trunk@59041


git-svn-id: http://core.svn.wordpress.org/trunk@58437 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/admin-menu-rtl.css

@@ -12,6 +12,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 {
@@ -206,7 +209,8 @@
 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
 	min-width: 160px;
 	width: auto;
-	border-right: 5px solid transparent;
+	border: 1px solid transparent;
+	border-right-width: 5px;
 }
 
 #adminmenu .wp-submenu li.current,
@@ -416,8 +420,8 @@ ul#adminmenu > li.current > a.current:after {
 	font-weight: 400;
 	font-size: 14px;
 	padding: 5px 11px 5px 4px;
-	margin: -7px -5px 4px 0;
-	border-width: 3px 5px 3px 0;
+	margin: -8px -5px 4px -1px;
+	border-width: 3px 5px 3px 1px;
 	border-style: solid;
 	border-color: transparent;
 }
@@ -582,8 +586,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-right-width: 5px;
 	}
 
 	.auto-fold #adminmenu .wp-has-current-submenu li > a {
@@ -772,8 +778,9 @@ li#wp-admin-bar-menu-toggle {
 	}
 
 	#adminmenu .wp-not-current-submenu .wp-submenu,
-	.folded #adminmenu .wp-has-current-submenu .wp-submenu {
-		border-right: 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*/

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*/

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

@@ -98,6 +98,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,
@@ -196,6 +198,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,
@@ -907,7 +911,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;

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;

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.7-alpha-59040';
+$wp_version = '6.7-alpha-59041';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.