From 422d12ad49fe28b91d22994c82a5c5dd96f8474f Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 11 Aug 2023 09:23:31 +0100
Subject: [PATCH] Implement accessible version of Navigation overlay preview
 toggle control (#53462)

* Implement accessible version of overlay preview

* Remove unused id attribute

* Use better wording

Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com>

* Fix linting

---------

Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com>
---
 .../src/navigation/edit/index.js              | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 90b83915a7035..7276f2c3bc680 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -43,6 +43,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { close, Icon } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -500,6 +501,11 @@ function Navigation( {
 		isFirstRender.current = false;
 	}, [ submenuAccessibilityNotice ] );
 
+	const overlayMenuPreviewId = useInstanceId(
+		OverlayMenuPreview,
+		`overlay-menu-preview`
+	);
+
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 	const stylingInspectorControls = (
 		<>
@@ -515,6 +521,9 @@ function Navigation( {
 											! overlayMenuPreview
 										);
 									} }
+									aria-label={ __( 'Overlay menu controls' ) }
+									aria-controls={ overlayMenuPreviewId }
+									aria-expanded={ overlayMenuPreview }
 								>
 									{ hasIcon && (
 										<>
@@ -529,13 +538,16 @@ function Navigation( {
 										</>
 									) }
 								</Button>
-								{ overlayMenuPreview && (
-									<OverlayMenuPreview
-										setAttributes={ setAttributes }
-										hasIcon={ hasIcon }
-										icon={ icon }
-									/>
-								) }
+								<div id={ overlayMenuPreviewId }>
+									{ overlayMenuPreview && (
+										<OverlayMenuPreview
+											setAttributes={ setAttributes }
+											hasIcon={ hasIcon }
+											icon={ icon }
+											hidden={ ! overlayMenuPreview }
+										/>
+									) }
+								</div>
 							</>
 						) }
 						<h3>{ __( 'Overlay Menu' ) }</h3>