Adding the label to the interactive element

WordPress · Apr 21, 2023 · 53903e4 · 53903e4
1 parent 91622db
commit 53903e4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -1,11 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Children, cloneElement, useState } from '@wordpress/element';
+import { Children, cloneElement, useState, useMemo } from '@wordpress/element';
 import { createSlotFill, Button } from '@wordpress/components';
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
 import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
 
@@ -25,7 +25,7 @@ import { store as editSiteStore } from '../../store';
 export function getEditorCanvasContainerTitle( view ) {
 	switch ( view ) {
 		case 'style-book':
-			return __( 'Style book' );
+			return __( 'Style Book' );
 		default:
 			return '';
 	}
@@ -40,13 +40,21 @@ function EditorCanvasContainer( {
 	closeButtonLabel,
 	onClose = () => {},
 } ) {
+	const editorCanvasContainerView = useSelect(
+		( select ) =>
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
 	const [ isClosed, setIsClosed ] = useState( false );
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const sectionFocusReturnRef = useFocusReturn();
-
+	const title = useMemo(
+		() => getEditorCanvasContainerTitle( editorCanvasContainerView ),
+		[ editorCanvasContainerView ]
+	);
 	function onCloseContainer() {
 		onClose();
 		setEditorCanvasContainerView( 'init' );
@@ -78,11 +86,12 @@ function EditorCanvasContainer( {
 
 	return (
 		<EditorCanvasContainerFill>
-			{ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */ }
+			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<section
 				className="edit-site-editor-canvas-container"
 				ref={ focusOnMountRef }
 				onKeyDown={ closeOnEscape }
+				aria-label={ title }
 			>
 				<Button
 					className="edit-site-editor-canvas-container__close-button"

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
@@ -201,7 +201,6 @@ function StyleBook( { isSelected, onSelect } ) {
 					color: textColor,
 					background: backgroundColor,
 				} }
-				aria-label={ __( 'Style Book' ) }
 			>
 				{ resizeObserver }
 				<TabPanel