From 524f512d233e1359b4b676cc36ea5ea5906c6f1d Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 22 Mar 2021 12:33:37 +0100
Subject: [PATCH] Add menu icon.

---
 packages/block-library/src/navigation/edit.js    | 9 +++++----
 packages/block-library/src/navigation/index.php  | 4 ++--
 packages/block-library/src/navigation/style.scss | 3 ++-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index 872199706733c..b440649e4d4ae 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -25,7 +25,7 @@ import {
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { closeSmall, Icon } from '@wordpress/icons';
+import { closeSmall, menu, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -160,13 +160,14 @@ function Navigation( {
 			</InspectorControls>
 			<nav { ...blockProps }>
 				<Button
-					data-micromodal-trigger="modal-1"
 					className="wp-block-navigation__responsive-container-open "
+					aria-label="Close menu"
+					data-micromodal-trigger="modal-1"
 					onClick={ () =>
 						setResponsiveMenuOpen( ! isResponsiveMenuOpen )
 					}
 				>
-					Open Menu
+					<Icon icon={ menu } />
 				</Button>
 
 				<div
@@ -187,7 +188,7 @@ function Navigation( {
 						>
 							<Button
 								className="wp-block-navigation__responsive-container-close"
-								aria-label="Close modal"
+								aria-label="Close menu"
 								data-micromodal-close
 								onClick={ () => {
 									setResponsiveMenuOpen( false );
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 30ae550a37d4b..22fbee6e08a51 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -162,11 +162,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$responsive_container_markup = sprintf(
 		'
-		<div class="wp-block-navigation__responsive-container-open" data-micromodal-trigger="modal-1">Open Menu</div>
+		<div class="wp-block-navigation__responsive-container-open" data-micromodal-trigger="modal-1" aria-label="Open menu"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M5 5.5V7h14V5.5H5zM5 13h14v-1.5H5V13zm0 6h14v-1.5H5V19z"></path></svg></div>
 	<div class="wp-block-navigation__responsive-container" id="modal-1" aria-hidden="true">
 		<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 			<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >
-					<button aria-label="Close modal" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z"></path></svg></button>
+					<button aria-label="Close menu" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z"></path></svg></button>
 				<div class="wp-block-navigation__responsive-content" id="modal-1-content">
 					<ul class="wp-block-navigation__container">%1$s</ul>
 				</div>
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 672615b4d234d..5069208470032 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -92,10 +92,11 @@
 	position: absolute;
 	top: 60px;
 	right: 16px;
-	color: #fff;
+	color: currentColor;
 
 	svg {
 		fill: currentColor;
+		pointer-events: none;
 	}
 
 	@include break-mobile() {