Varia: Refactor mini-cart for better a11y in mobile views.

varia/inc/woocommerce.php

@@ -185,15 +185,29 @@ function varia_add_cart_menu( $nav, $args ) {
 	if ( $args->theme_location == 'menu-1' ) {
 		return sprintf(
 			'%1$s
-			<li class="menu-item woocommerce-menu-item %6$s" title="%2$s">
-				%4$s
+			</ul></div>
+			<input type="checkbox" role="button" aria-haspopup="true" id="woocommerce-toggle" class="hide-visually">
+			<label for="woocommerce-toggle" id="toggle-cart" class="button">%2$s %3$s
+				<span class="dropdown-icon open">+</span>
+				<span class="dropdown-icon close">×</span>
+				<span class="hide-visually expanded-text">%4$s</span>
+				<span class="hide-visually collapsed-text">%5$s</span>
+			</label>
+			<div class="woocommerce-menu-container">
+			<ul id="woocommerce-menu" class="main-menu" aria-label="submenu">
+			<li class="menu-item woocommerce-menu-item %10$s" title="%6$s">
+				%8$s
 				<ul class="sub-menu">
-					<li class="woocommerce-cart-widget" title="%3$s">
-						%5$s
+					<li class="woocommerce-cart-widget" title="%7$s">
+						%9$s
 					</li>
 				</ul>
 			</li>',
 			$nav,
+			varia_get_icon_svg( 'shopping_cart', 16 ),
+			esc_html__( 'Cart', 'varia' ),
+			esc_html__( 'expanded', 'varia' ),
+			esc_html__( 'collapsed', 'varia' ),
 			esc_attr__( 'View your shopping cart', 'varia' ),
 			esc_attr__( 'View your shopping list', 'varia' ),
 			varia_cart_link(),

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

@@ -16,7 +16,7 @@
 	}
 
 	// Checkbox hack
-	#toggle:checked ~ div {
+	#toggle:checked ~ div:not(.woocommerce-menu-container) {
 		display: block;
 	}
 
@@ -43,7 +43,7 @@
 	@include media(mobile) {
 
 		& > div {
-			display: block;
+			display: inline-block;
 		}
 
 		#toggle-menu {

varia/sass/vendors/woocommerce/components/_mini-cart.scss

@@ -11,6 +11,44 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 
 	.main-navigation {
 
+		// Mobile menu toggle
+		#toggle-cart {
+			display: inline-block;
+			margin: 0;
+		}
+
+		// Checkbox hack
+		#woocommerce-toggle:checked ~ div {
+			display: block;
+		}
+
+		#woocommerce-toggle:focus + #toggle-cart {
+			background-color: #{map-deep-get($config-header, "main-nav", "color", "link-hover")};
+			outline: inherit;
+			text-decoration: underline;
+		}
+
+		#woocommerce-toggle:checked + #toggle-cart {
+			.open {
+				display: none;
+			}
+
+			.close {
+				display: inline;
+			}
+		}
+
+		@include media(mobile) {
+
+			& > div:not(:last-of-type) {
+				margin-right: #{ 2 * map-deep-get($config-global, "spacing", "horizontal")};
+			}
+
+			#toggle-cart {
+				display: none;
+			}
+		}
+
 		.woocommerce-cart-link {
 
 			text-decoration: none;
@@ -34,16 +72,6 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 				height: #{map-deep-get($config-header, "main-nav", "font", "size")};
 				width: #{map-deep-get($config-header, "main-nav", "font", "size")};
 			}
-
-			& + .sub-menu {
-				padding: 0 #{map-deep-get($config-header, "main-nav", "link-padding")};
-			}
-
-			@include media(mobile) {
-				& + .sub-menu {
-					padding: 0;
-				}
-			}
 		}
 
 		.woocommerce-cart-widget {

varia/style-editor.css

@@ -1085,7 +1085,7 @@ body:not(.fse-enabled) .site-description {
 	margin: 0;
 }
 
-.main-navigation #toggle:checked ~ div {
+.main-navigation #toggle:checked ~ div:not(.woocommerce-menu-container) {
 	display: block;
 }
 
@@ -1109,7 +1109,7 @@ body:not(.fse-enabled) .site-description {
 
 @media only screen and (min-width: 560px) {
 	.main-navigation > div {
-		display: block;
+		display: inline-block;
 	}
 	.main-navigation #toggle-menu {
 		display: none;

varia/style-rtl.css

@@ -2457,7 +2457,7 @@ body:not(.fse-enabled) .site-description {
 	margin: 0;
 }
 
-.main-navigation #toggle:checked ~ div {
+.main-navigation #toggle:checked ~ div:not(.woocommerce-menu-container) {
 	display: block;
 }
 
@@ -2481,7 +2481,7 @@ body:not(.fse-enabled) .site-description {
 
 @media only screen and (min-width: 560px) {
 	.main-navigation > div {
-		display: block;
+		display: inline-block;
 	}
 	.main-navigation #toggle-menu {
 		display: none;

varia/style-woocommerce-rtl.css

@@ -732,6 +732,38 @@ body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_c
 	text-decoration: none;
 }
 
+body[class*="woocommerce"] #page .main-navigation #toggle-cart {
+	display: inline-block;
+	margin: 0;
+}
+
+body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~ div {
+	display: block;
+}
+
+body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #toggle-cart {
+	background-color: indigo;
+	outline: inherit;
+	text-decoration: underline;
+}
+
+body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked + #toggle-cart .open {
+	display: none;
+}
+
+body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked + #toggle-cart .close {
+	display: inline;
+}
+
+@media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page .main-navigation > div:not(:last-of-type) {
+		margin-left: 32px;
+	}
+	body[class*="woocommerce"] #page .main-navigation #toggle-cart {
+		display: none;
+	}
+}
+
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
 	text-decoration: none;
 	line-height: 1;
@@ -756,16 +788,6 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .svg-ic
 	width: 1.2rem;
 }
 
-body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
-	padding: 0 16px;
-}
-
-@media only screen and (min-width: 560px) {
-	body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
-		padding: 0;
-	}
-}
-
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
 	background-color: white;
 	color: #444444;
@@ -781,11 +803,11 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list {
-	border-bottom: 1px solid #FAFAFA;
+	border-bottom: 1px solid #DDDDDD;
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list li {
-	border-top: 1px solid #FAFAFA;
+	border-top: 1px solid #DDDDDD;
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a.remove:hover,

varia/style-woocommerce.css

@@ -732,6 +732,38 @@ body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_c
 	text-decoration: none;
 }
 
+body[class*="woocommerce"] #page .main-navigation #toggle-cart {
+	display: inline-block;
+	margin: 0;
+}
+
+body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~ div {
+	display: block;
+}
+
+body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #toggle-cart {
+	background-color: indigo;
+	outline: inherit;
+	text-decoration: underline;
+}
+
+body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked + #toggle-cart .open {
+	display: none;
+}
+
+body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked + #toggle-cart .close {
+	display: inline;
+}
+
+@media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page .main-navigation > div:not(:last-of-type) {
+		margin-right: 32px;
+	}
+	body[class*="woocommerce"] #page .main-navigation #toggle-cart {
+		display: none;
+	}
+}
+
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
 	text-decoration: none;
 	line-height: 1;
@@ -756,16 +788,6 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .svg-ic
 	width: 1.2rem;
 }
 
-body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
-	padding: 0 16px;
-}
-
-@media only screen and (min-width: 560px) {
-	body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
-		padding: 0;
-	}
-}
-
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
 	background-color: white;
 	color: #444444;

varia/style.css

@@ -2474,7 +2474,7 @@ body:not(.fse-enabled) .site-description {
 	margin: 0;
 }
 
-.main-navigation #toggle:checked ~ div {
+.main-navigation #toggle:checked ~ div:not(.woocommerce-menu-container) {
 	display: block;
 }
 
@@ -2498,7 +2498,7 @@ body:not(.fse-enabled) .site-description {
 
 @media only screen and (min-width: 560px) {
 	.main-navigation > div {
-		display: block;
+		display: inline-block;
 	}
 	.main-navigation #toggle-menu {
 		display: none;