From 163ac4cb4af4632495522e5a25709d1972e88be8 Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Thu, 16 Dec 2021 20:23:10 +1100
Subject: [PATCH] Only add dialog role to navigation when modal is open.
 (#37434)

---
 .../src/navigation/edit/responsive-wrapper.js | 17 +++++++++-------
 .../block-library/src/navigation/index.php    |  7 ++++---
 packages/block-library/src/navigation/view.js | 20 ++++++++++++-------
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js
index b27d2b5247cc7..6c3df47b5f231 100644
--- a/packages/block-library/src/navigation/edit/responsive-wrapper.js
+++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js
@@ -39,12 +39,20 @@ export default function ResponsiveWrapper( {
 
 	const modalId = `${ id }-modal`;
 
+	const dialogProps = {
+		className: 'wp-block-navigation__responsive-dialog',
+		...( isOpen && {
+			role: 'dialog',
+			'aria-modal': true,
+			'aria-label': __( 'Menu' ),
+		} ),
+	};
+
 	return (
 		<>
 			{ ! isOpen && (
 				<Button
 					aria-haspopup="true"
-					aria-expanded={ isOpen }
 					aria-label={ __( 'Open menu' ) }
 					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
@@ -73,12 +81,7 @@ export default function ResponsiveWrapper( {
 					className="wp-block-navigation__responsive-close"
 					tabIndex="-1"
 				>
-					<div
-						className="wp-block-navigation__responsive-dialog"
-						role="dialog"
-						aria-modal="true"
-						aria-labelledby={ `${ modalId }-title` }
-					>
+					<div { ...dialogProps }>
 						<Button
 							className="wp-block-navigation__responsive-container-close"
 							aria-label={ __( 'Close menu' ) }
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index d9eb7fbb889ae..9db34fa82ad30 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -528,10 +528,10 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	);
 
 	$responsive_container_markup = sprintf(
-		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
+		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
 			<div class="%5$s" style="%7$s" id="modal-%1$s">
 				<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$s-title" >
+					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
 							<button aria-label="%4$s" 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.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
 						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
 							%2$s
@@ -545,7 +545,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		__( 'Close menu' ), // Close button label.
 		implode( ' ', $responsive_container_classes ),
 		implode( ' ', $open_button_classes ),
-		$colors['overlay_inline_styles']
+		$colors['overlay_inline_styles'],
+		__( 'Menu' )
 	);
 
 	return sprintf(
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index e29dee94724e1..35cc50e947270 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -5,16 +5,22 @@ import MicroModal from 'micromodal';
 
 // Responsive navigation toggle.
 function navigationToggleModal( modal ) {
-	const triggerButton = document.querySelector(
-		`button[data-micromodal-trigger="${ modal.id }"]`
+	const dialogContainer = document.querySelector(
+		`.wp-block-navigation__responsive-dialog`
 	);
-	const closeButton = modal.querySelector( 'button[data-micromodal-close]' );
-	// Use aria-hidden to determine the status of the modal, as this attribute is
-	// managed by micromodal.
+
 	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
-	triggerButton.setAttribute( 'aria-expanded', ! isHidden );
-	closeButton.setAttribute( 'aria-expanded', ! isHidden );
+
 	modal.classList.toggle( 'has-modal-open', ! isHidden );
+	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
+
+	if ( isHidden ) {
+		dialogContainer.removeAttribute( 'role' );
+		dialogContainer.removeAttribute( 'aria-modal' );
+	} else {
+		dialogContainer.setAttribute( 'role', 'dialog' );
+		dialogContainer.setAttribute( 'aria-modal', 'true' );
+	}
 
 	// Add a class to indicate the modal is open.
 	const htmlElement = document.documentElement;