Remove preventAnnouncement and move block description up to the grid …

…cell level
WordPress · Mar 21, 2022 · 159b2a2 · 159b2a2
1 parent 2692f44
commit 159b2a2
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 76 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,7 +28,6 @@ const ListViewBlockContents = forwardRef(
 			level,
 			isExpanded,
 			selectedClientIds,
-			preventAnnouncement,
 			...props
 		},
 		ref
@@ -81,7 +80,6 @@ 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
@@ -6,17 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';
-import { forwardRef, useEffect, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
-import { getBlockPositionDescription } from './utils';
 import BlockTitle from '../block-title';
 import ListViewExpander from './expander';
 import { SPACE, ENTER } from '@wordpress/keycodes';
@@ -25,35 +22,17 @@ function ListViewBlockSelectButton(
 	{
 		className,
 		block: { clientId },
-		isSelected,
 		onClick,
 		onToggleExpanded,
-		position,
-		siblingBlockCount,
-		level,
 		tabIndex,
 		onFocus,
 		onDragStart,
 		onDragEnd,
 		draggable,
-		isExpanded,
-		preventAnnouncement,
 	},
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const instanceId = useInstanceId( ListViewBlockSelectButton );
-	const descriptionId = `list-view-block-select-button__${ instanceId }`;
-	const blockPositionDescription = getBlockPositionDescription(
-		position,
-		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.
@@ -70,21 +49,6 @@ 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
@@ -94,16 +58,14 @@ function ListViewBlockSelectButton(
 				) }
 				onClick={ onClick }
 				onKeyDown={ onKeyDownHandler }
-				aria-describedby={ descriptionId }
 				ref={ ref }
 				tabIndex={ tabIndex }
 				onFocus={ onFocus }
 				onDragStart={ onDragStartHandler }
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
-				aria-expanded={ isExpanded }
-				aria-hidden={ ariaHidden }
+				aria-hidden={ true }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
@@ -113,18 +75,7 @@ function ListViewBlockSelectButton(
 						{ blockInformation.anchor }
 					</span>
 				) }
-				{ isSelected && (
-					<VisuallyHidden>
-						{ __( '(selected block)' ) }
-					</VisuallyHidden>
-				) }
 			</Button>
-			<div
-				className="block-editor-list-view-block-select-button__description"
-				id={ descriptionId }
-			>
-				{ blockPositionDescription }
-			</div>
 		</>
 	);
 }

diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -10,6 +10,7 @@ import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
 } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
 import {
 	useState,
@@ -32,6 +33,7 @@ import {
 import ListViewBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
 import { useListViewContext } from './context';
+import { getBlockPositionDescription } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 
@@ -57,6 +59,23 @@ function ListViewBlock( {
 
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const instanceId = useInstanceId( ListViewBlock );
+	const descriptionId = `list-view-block-select-button__${ instanceId }`;
+	const blockPositionDescription = getBlockPositionDescription(
+		position,
+		siblingBlockCount,
+		level
+	);
+
+	const settingsAriaLabel = blockInformation
+		? sprintf(
+				// translators: %s: The title of the block.
+				__( 'Options for %s block' ),
+				blockInformation.title
+		  )
+		: __( 'Options' );
+
 	const {
 		__experimentalFeatures: withExperimentalFeatures,
 		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
@@ -156,15 +175,6 @@ function ListViewBlock( {
 		'has-single-cell': hideBlockActions,
 	} );
 
-	const blockInformation = useBlockDisplayInformation( clientId );
-	const settingsAriaLabel = blockInformation
-		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Options for %s block' ),
-				blockInformation.title
-		  )
-		: __( 'Options' );
-
 	// Only include all selected blocks if the currently clicked on block
 	// is one of the selected blocks. This ensures that if a user attempts
 	// to alter a block that isn't part of the selection, they're still able
@@ -187,11 +197,16 @@ function ListViewBlock( {
 			id={ `list-view-block-${ clientId }` }
 			data-block={ clientId }
 			isExpanded={ isExpanded }
+			aria-selected={ !! isSelected }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
 				colSpan={ colSpan }
 				ref={ cellRef }
+				aria-label={ blockInformation.title }
+				aria-selected={ !! isSelected }
+				aria-expanded={ isExpanded }
+				aria-describedby={ descriptionId }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
@@ -210,6 +225,12 @@ function ListViewBlock( {
 							selectedClientIds={ selectedClientIds }
 							preventAnnouncement={ preventAnnouncement }
 						/>
+						<div
+							className="block-editor-list-view-block-select-button__description"
+							id={ descriptionId }
+						>
+							{ blockPositionDescription }
+						</div>
 					</div>
 				) }
 			</TreeGridCell>
@@ -246,7 +267,10 @@ function ListViewBlock( {
 			) }
 
 			{ showBlockActions && (
-				<TreeGridCell className={ listViewBlockSettingsClassName }>
+				<TreeGridCell
+					className={ listViewBlockSettingsClassName }
+					aria-selected={ !! isSelected }
+				>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsDropdown
 							clientIds={ dropdownClientIds }

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