Try setting preventAnnouncement at the parent list view, and pass dow…

…n to the select button
WordPress · Mar 18, 2022 · 2692f44 · 2692f44
1 parent 058b8a6
commit 2692f44
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
@@ -28,6 +28,7 @@ const ListViewBlockContents = forwardRef(
 			level,
 			isExpanded,
 			selectedClientIds,
+			preventAnnouncement,
 			...props
 		},
 		ref
@@ -80,6 +81,7 @@ const ListViewBlockContents = forwardRef(
 						onDragStart={ onDragStart }
 						onDragEnd={ onDragEnd }
 						isExpanded={ isExpanded }
+						preventAnnouncement={ preventAnnouncement }
 						{ ...props }
 					/>
 				) }

diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -7,8 +7,8 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Button, VisuallyHidden } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
-import { forwardRef } from '@wordpress/element';
+import { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';
+import { forwardRef, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -37,6 +37,7 @@ function ListViewBlockSelectButton(
 		onDragEnd,
 		draggable,
 		isExpanded,
+		preventAnnouncement,
 	},
 	ref
 ) {
@@ -48,6 +49,11 @@ function ListViewBlockSelectButton(
 		siblingBlockCount,
 		level
 	);
+	const [ ariaHidden, setAriaHidden ] = useState( undefined );
+
+	// This debounced version is used so that while moving out of focus,
+	// the block isn't updated and then re-announced.
+	const delaySetAriaHidden = useDebounce( setAriaHidden, 200 );
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
 	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
@@ -64,6 +70,21 @@ function ListViewBlockSelectButton(
 		}
 	}
 
+	const previousPreventAnnouncement = usePrevious( preventAnnouncement );
+
+	useEffect( () => {
+		// If we prevent screen readers from announcing the block,
+		// we should apply this immediately.
+		if ( preventAnnouncement ) {
+			setAriaHidden( true );
+		}
+		// Delay re-enabling so that if focus is being moved between
+		// buttons, we don't accidentally re-announce a focused button.
+		if ( ! preventAnnouncement && previousPreventAnnouncement ) {
+			delaySetAriaHidden( undefined );
+		}
+	}, [ preventAnnouncement ] );
+
 	return (
 		<>
 			<Button
@@ -82,6 +103,7 @@ function ListViewBlockSelectButton(
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
 				aria-expanded={ isExpanded }
+				aria-hidden={ ariaHidden }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />

diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -49,6 +49,7 @@ function ListViewBlock( {
 	path,
 	isExpanded,
 	selectedClientIds,
+	preventAnnouncement,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -207,6 +208,7 @@ function ListViewBlock( {
 							onFocus={ onFocus }
 							isExpanded={ isExpanded }
 							selectedClientIds={ selectedClientIds }
+							preventAnnouncement={ preventAnnouncement }
 						/>
 					</div>
 				) }

diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
@@ -93,6 +93,7 @@ function ListViewBranch( props ) {
 		listPosition = 0,
 		fixedListWindow,
 		expandNested = true,
+		preventAnnouncement,
 	} = props;
 
 	const {
@@ -167,6 +168,7 @@ function ListViewBranch( props ) {
 								isExpanded={ isExpanded }
 								listPosition={ nextPosition }
 								selectedClientIds={ selectedClientIds }
+								preventAnnouncement={ preventAnnouncement }
 							/>
 						) }
 						{ ! showBlock && (

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -13,8 +13,10 @@ import {
 	useMemo,
 	useRef,
 	useReducer,
+	useState,
 	forwardRef,
 } from '@wordpress/element';
+import { HOME, END } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -102,6 +104,7 @@ function ListView(
 	const { updateBlockSelection } = useBlockSelection();
 
 	const [ expandedState, setExpandedState ] = useReducer( expanded, {} );
+	const [ preventAnnouncement, setPreventAnnouncement ] = useState( false );
 
 	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();
 	const elementRef = useRef();
@@ -116,6 +119,7 @@ function ListView(
 		( event, clientId ) => {
 			updateBlockSelection( event, clientId );
 			setSelectedTreeId( clientId );
+			setPreventAnnouncement( false );
 		},
 		[ setSelectedTreeId, updateBlockSelection ]
 	);
@@ -174,6 +178,11 @@ function ListView(
 					startRow?.dataset?.block,
 					endRow?.dataset?.block
 				);
+				if ( event.keyCode === HOME || event.keyCode === END ) {
+					setPreventAnnouncement( true );
+				}
+			} else {
+				setPreventAnnouncement( false );
 			}
 		},
 		[ updateBlockSelection ]
@@ -226,6 +235,7 @@ function ListView(
 						fixedListWindow={ fixedListWindow }
 						selectedClientIds={ selectedClientIds }
 						expandNested={ expandNested }
+						preventAnnouncement={ preventAnnouncement }
 						{ ...props }
 					/>
 				</ListViewContext.Provider>