Restore use of button for menu-toggle in AMP

Author: westonruter

functions.php

@@ -126,13 +126,14 @@ function _s_widgets_init() {
  * Note that this must only be called after the parse_query action.
  *
  * @link https://github.com/Automattic/amp-wp
+ * @return bool Is AMP endpoint (and AMP plugin is active).
  */
 function _s_is_amp() {
 	return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
 }
 
 /**
- * Detemrine whether amp-live-list should be used for the comment list.
+ * Determine whether amp-live-list should be used for the comment list.
  *
  * @return bool Whether to use amp-live-list.
  */
@@ -155,7 +156,7 @@ function _s_styles() {
 /**
  * Enqueue scripts.
  *
- * This short-circuits in AMP because custom scripts are not allowed. There is are AMP equivalents provided elsewhere.
+ * This short-circuits in AMP because custom scripts are not allowed. There are AMP equivalents provided elsewhere.
  *
  * navigation:
  *     In AMP the :focus-within selector is used to keep submenus displayed while tabbing,

header.php

@@ -44,7 +44,9 @@
 			<?php endif; ?>
 		</div><!-- .site-branding -->
 
-		<nav id="site-navigation" class="main-navigation"
+		<nav
+			id="site-navigation"
+			class="main-navigation"
 			<?php if ( _s_is_amp() ) : ?>
 				[class]=" siteNavigationMenu.expanded ? 'main-navigation toggled' : 'main-navigation' "
 			<?php endif; ?>
@@ -57,26 +59,19 @@
 						}
 					</script>
 				</amp-state>
-				<input
-					id="site-navigation-expanded"
-					type="checkbox"
-					hidden
-					on="change:AMP.setState( { siteNavigationMenu: { expanded: event.checked } } )"
-				>
-				<label
-					class="menu-toggle"
-					for="site-navigation-expanded"
-					tabindex="0"
-					role="button"
-					aria-controls="primary-menu"
-					aria-expanded="false"
+			<?php endif; ?>
+
+			<button
+				class="menu-toggle"
+				aria-controls="primary-menu"
+				aria-expanded="false"
+				<?php if ( _s_is_amp() ) : ?>
+					on="tap:AMP.setState( { siteNavigationMenu: { expanded: ! siteNavigationMenu.expanded } } )"
 					[aria-expanded]="siteNavigationMenu.expanded ? 'true' : 'false'"
-				>
+				<?php endif; ?>
+			>
 				<?php esc_html_e( 'Primary Menu', '_s' ); ?>
-			</label>
-			<?php else : ?>
-				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '_s' ); ?></button>
-			<?php endif; ?>
+			</button>
 			<?php
 			wp_nav_menu( array(
 				'theme_location' => 'menu-1',

sass/_normalize.scss

@@ -150,7 +150,6 @@ img {
  */
 
 button,
-[role=button],
 input,
 optgroup,
 select,
@@ -167,7 +166,6 @@ textarea {
  */
 
 button,
-[role=button],
 input { /* 1 */
 	overflow: visible;
 }
@@ -178,7 +176,6 @@ input { /* 1 */
  */
 
 button,
-[role=button],
 select { /* 1 */
 	text-transform: none;
 }
@@ -188,7 +185,6 @@ select { /* 1 */
  */
 
 button,
-[role=button],
 [type="button"],
 [type="reset"],
 [type="submit"] {
@@ -200,7 +196,6 @@ button,
  */
 
 button::-moz-focus-inner,
-[role=button]::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
@@ -213,7 +208,6 @@ button::-moz-focus-inner,
  */
 
 button:-moz-focusring,
-[role=button]:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {

sass/forms/_buttons.scss

@@ -1,5 +1,4 @@
 button,
-[role=button],
 input[type="button"],
 input[type="reset"],
 input[type="submit"] {

sass/navigation/_menus.scss

@@ -84,10 +84,7 @@
 }
 
 /* Small menu. */
-.menu-toggle {
-	display: inline-block;
-	user-select: none; /* when label[role=button] in AMP */
-}
+.menu-toggle,
 .main-navigation.toggled ul {
 	display: block;
 }

sass/typography/_typography.scss

@@ -1,6 +1,5 @@
 body,
 button,
-[role=button],
 input,
 select,
 optgroup,

style.css

@@ -196,7 +196,6 @@ img {
  */
 
 button,
-[role=button],
 input,
 optgroup,
 select,
@@ -213,7 +212,6 @@ textarea {
  */
 
 button,
-[role=button],
 input { /* 1 */
 	overflow: visible;
 }
@@ -224,7 +222,6 @@ input { /* 1 */
  */
 
 button,
-[role=button],
 select { /* 1 */
 	text-transform: none;
 }
@@ -234,7 +231,6 @@ select { /* 1 */
  */
 
 button,
-[role=button],
 [type="button"],
 [type="reset"],
 [type="submit"] {
@@ -246,7 +242,6 @@ button,
  */
 
 button::-moz-focus-inner,
-[role=button]::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
@@ -259,7 +254,6 @@ button::-moz-focus-inner,
  */
 
 button:-moz-focusring,
-[role=button]:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
@@ -397,7 +391,6 @@ template {
 --------------------------------------------------------------*/
 body,
 button,
-[role=button],
 input,
 select,
 optgroup,
@@ -534,7 +527,6 @@ table {
 # Forms
 --------------------------------------------------------------*/
 button,
-[role=button],
 input[type="button"],
 input[type="reset"],
 input[type="submit"] {
@@ -550,15 +542,13 @@ input[type="submit"] {
 }
 
 button:hover,
-[role=button]:hover,
 input[type="button"]:hover,
 input[type="reset"]:hover,
 input[type="submit"]:hover {
 	border-color: #ccc #bbb #aaa;
 }
 
 button:active, button:focus,
-[role=button]:active, [role=button]:focus,
 input[type="button"]:active,
 input[type="button"]:focus,
 input[type="reset"]:active,
@@ -712,10 +702,7 @@ a:hover, a:active {
 }
 
 /* Small menu. */
-.menu-toggle {
-	display: inline-block;
-	user-select: none; /* when label[role=button] in AMP */
-}
+.menu-toggle,
 .main-navigation.toggled ul {
 	display: block;
 }