Merge pull request #1078 from Automattic/fix/_dsgnsystm-menu-a11y

_dsgnsystm: Fix a11y in mobile menu

_dsgnsystm/header.php

@@ -29,8 +29,14 @@
 
 			<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
 				<nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Main Navigation', '_dsgnsystm' ); ?>">
-					<label for="tm" id="toggle-menu" class="button"><?php _e( 'Menu', '_dsgnsystm' ); ?> <span class="dropdown-icon">▾</span></label>
-					<input type="checkbox" id="tm">
+					<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="hide-visually">
+					<label for="toggle" id="toggle-menu" class="button">
+						<?php _e( 'Menu', '_dsgnsystm' ); ?>
+						<span class="dropdown-icon open">+</span>
+						<span class="dropdown-icon close">&times;</span>
+						<span class="hide-visually expanded-text"><?php _e( 'expanded', '_dsgnsystm' ); ?></span>
+						<span class="hide-visually collapsed-text"><?php _e( 'collapsed', '_dsgnsystm' ); ?></span>
+					</label>
 					<?php
 					wp_nav_menu(
 						array(

_dsgnsystm/package-lock.json

@@ -558,7 +558,7 @@
       "requires": {
         "bluebird": "3.5.3",
         "chokidar": "2.1.1",
-        "lodash": "4.17.13",
+        "lodash": "4.17.11",
         "yargs": "12.0.5"
       },
       "dependencies": {
@@ -662,7 +662,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -683,12 +684,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -703,17 +706,20 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -830,7 +836,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -842,6 +849,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -856,6 +864,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -863,12 +872,14 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -887,6 +898,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -967,7 +979,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -979,6 +992,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -1064,7 +1078,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -1100,6 +1115,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -1119,6 +1135,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -1162,12 +1179,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
@@ -1202,7 +1221,7 @@
           }
         },
         "lodash": {
-          "version": "4.17.13",
+          "version": "4.17.11",
           "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.13.tgz",
           "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
           "dev": true
@@ -1935,7 +1954,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1956,12 +1976,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1976,17 +1998,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -2103,7 +2128,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2115,6 +2141,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -2129,6 +2156,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -2136,12 +2164,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -2160,6 +2190,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -2247,7 +2278,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -2259,6 +2291,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -2344,7 +2377,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -2380,6 +2414,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -2399,6 +2434,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2442,12 +2478,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -2602,7 +2640,7 @@
       "dev": true,
       "requires": {
         "glob": "~7.1.1",
-        "lodash": "~4.17.13",
+        "lodash": "~4.17.10",
         "minimatch": "~3.0.2"
       }
     },
@@ -3423,7 +3461,7 @@
         "get-stdin": "^4.0.1",
         "glob": "^7.0.3",
         "in-publish": "^2.0.0",
-        "lodash": "^4.17.13",
+        "lodash": "^4.17.11",
         "meow": "^3.7.0",
         "mkdirp": "^0.5.1",
         "nan": "^2.13.2",
@@ -4048,7 +4086,7 @@
       "dev": true,
       "requires": {
         "chalk": "^2.4.1",
-        "lodash": "^4.17.13",
+        "lodash": "^4.17.11",
         "log-symbols": "^2.2.0",
         "postcss": "^7.0.7"
       },
@@ -4381,7 +4419,7 @@
       "dev": true,
       "requires": {
         "glob": "^7.0.0",
-        "lodash": "^4.17.13",
+        "lodash": "^4.0.0",
         "scss-tokenizer": "^0.2.3",
         "yargs": "^7.0.0"
       }

_dsgnsystm/sass/components/header/_site-main-navigation.scss

@@ -12,17 +12,34 @@
 	// Mobile menu toggle
 	#toggle-menu {
 		display: inline-block;
+		margin: 0;
 	}
 
 	// Checkbox hack
-	& #tm:checked + div {
+	#toggle:checked ~ div {
 		display: block;
 	}
 
-	input[type="checkbox"] {
+	#toggle:focus + #toggle-menu {
+		background-color: #{map-deep-get($config-header, "main-nav", "color", "link-hover")};
+		outline: inherit;
+		text-decoration: underline;
+	}
+
+	.dropdown-icon.close {
 		display: none;
 	}
 
+	#toggle:checked + #toggle-menu {
+		.open {
+			display: none;
+		}
+
+		.close {
+			display: inline;
+		}
+	}
+
 	@include media(mobile) {
 
 		& > div {
@@ -161,4 +178,14 @@
 			}
 		}
 	}
+
+	.hide-visually {
+		position: absolute !important;
+		clip: rect(1px, 1px, 1px, 1px);
+		padding:0 !important;
+		border:0 !important;
+		height: 1px !important;
+		width: 1px !important;
+		overflow: hidden;
+	}
 }

_dsgnsystm/style-rtl.css

@@ -1981,16 +1981,31 @@ table th,
 
 .main-navigation #toggle-menu {
 	display: inline-block;
+	margin: 0;
 }
 
-.main-navigation #tm:checked + div {
+.main-navigation #toggle:checked ~ div {
 	display: block;
 }
 
-.main-navigation input[type="checkbox"] {
+.main-navigation #toggle:focus + #toggle-menu {
+	background-color: indigo;
+	outline: inherit;
+	text-decoration: underline;
+}
+
+.main-navigation .dropdown-icon.close {
+	display: none;
+}
+
+.main-navigation #toggle:checked + #toggle-menu .open {
 	display: none;
 }
 
+.main-navigation #toggle:checked + #toggle-menu .close {
+	display: inline;
+}
+
 @media only screen and (min-width: 560px) {
 	.main-navigation > div {
 		display: block;
@@ -2142,6 +2157,16 @@ table th,
 	}
 }
 
+.main-navigation .hide-visually {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;

_dsgnsystm/style.css

@@ -1986,16 +1986,31 @@ table th,
 
 .main-navigation #toggle-menu {
 	display: inline-block;
+	margin: 0;
 }
 
-.main-navigation #tm:checked + div {
+.main-navigation #toggle:checked ~ div {
 	display: block;
 }
 
-.main-navigation input[type="checkbox"] {
+.main-navigation #toggle:focus + #toggle-menu {
+	background-color: indigo;
+	outline: inherit;
+	text-decoration: underline;
+}
+
+.main-navigation .dropdown-icon.close {
+	display: none;
+}
+
+.main-navigation #toggle:checked + #toggle-menu .open {
 	display: none;
 }
 
+.main-navigation #toggle:checked + #toggle-menu .close {
+	display: inline;
+}
+
 @media only screen and (min-width: 560px) {
 	.main-navigation > div {
 		display: block;
@@ -2147,6 +2162,16 @@ table th,
 	}
 }
 
+.main-navigation .hide-visually {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;