List view: Refactor ARIA attributes (#48461)

* Fix ARIA attributes. * Add assertive for selection read. * Remove useless useEffect. Refactor expanded to use isExpanded attribute. * Add prop to disable aria-expanded on tree grid tr so I can override on the link. * Try to fix failing e2e test * Update list view tests * Restore removed useEffect. * Revert TreeGrid changes. * Finish revert. * Eliminate aria-expanded on main tr. * Add data-expanded back to TreeGrid. Need to detect when to expand via keyboard. * Fix expander. * Move isExpanded undefined to tr directly. * Fix E2E. * Retain dark color for button when expanded * Add title fallback. * Save some verbosity on block options button. * Fix E2E. * Add components changelog entry. --------- Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
WordPress · Apr 14, 2023 · 6f96394 · 6f96394
1 parent 1069f48
commit 6f96394
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 105 deletions.
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
@@ -35,6 +35,9 @@ function ListViewBlockSelectButton(
 		onDragStart,
 		onDragEnd,
 		draggable,
+		isExpanded,
+		ariaLabel,
+		ariaDescribedBy,
 	},
 	ref
 ) {
@@ -76,7 +79,9 @@ function ListViewBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
-				aria-hidden={ true }
+				aria-label={ ariaLabel }
+				aria-describedby={ ariaDescribedBy }
+				aria-expanded={ isExpanded }
 			>
 				<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
@@ -53,7 +53,6 @@ function ListViewBlock( {
 	path,
 	isExpanded,
 	selectedClientIds,
-	preventAnnouncement,
 	isSyncedBranch,
 } ) {
 	const cellRef = useRef( null );
@@ -90,6 +89,7 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = blockInformation?.title || __( 'Untitled' );
 	const blockName = useSelect(
 		( select ) => select( blockEditorStore ).getBlockName( clientId ),
 		[ clientId ]
@@ -111,28 +111,19 @@ function ListViewBlock( {
 		level
 	);
 
-	let blockAriaLabel = __( 'Link' );
-	if ( blockInformation ) {
-		blockAriaLabel = isLocked
-			? sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the locked block.
-					__( '%s link (locked)' ),
-					blockInformation.title
-			  )
-			: sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the block.
-					__( '%s link' ),
-					blockInformation.title
-			  );
-	}
-
-	const settingsAriaLabel = blockInformation
+	const blockAriaLabel = isLocked
 		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Options for %s block' ),
-				blockInformation.title
+				// translators: %s: The title of the block. This string indicates a link to select the locked block.
+				__( '%s (locked)' ),
+				blockTitle
 		  )
-		: __( 'Options' );
+		: blockTitle;
+
+	const settingsAriaLabel = sprintf(
+		// translators: %s: The title of the block.
+		__( 'Options for %s' ),
+		blockTitle
+	);
 
 	const { isTreeGridMounted, expand, collapse, BlockSettingsMenu } =
 		useListViewContext();
@@ -249,18 +240,13 @@ function ListViewBlock( {
 			id={ `list-view-block-${ clientId }` }
 			data-block={ clientId }
 			data-expanded={ canExpand ? isExpanded : undefined }
-			isExpanded={ canExpand ? isExpanded : undefined }
-			aria-selected={ !! isSelected || forceSelectionContentLock }
 			ref={ rowRef }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
 				colSpan={ colSpan }
 				ref={ cellRef }
-				aria-label={ blockAriaLabel }
 				aria-selected={ !! isSelected || forceSelectionContentLock }
-				aria-expanded={ canExpand ? isExpanded : undefined }
-				aria-describedby={ descriptionId }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
@@ -277,9 +263,10 @@ function ListViewBlock( {
 								currentlyEditingBlockInCanvas ? 0 : tabIndex
 							}
 							onFocus={ onFocus }
-							isExpanded={ isExpanded }
+							isExpanded={ canExpand ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
-							preventAnnouncement={ preventAnnouncement }
+							ariaLabel={ blockAriaLabel }
+							ariaDescribedBy={ descriptionId }
 						/>
 						<div
 							className="block-editor-list-view-block-select-button__description"

diff --git a/packages/block-editor/src/components/list-view/leaf.js b/packages/block-editor/src/components/list-view/leaf.js
@@ -51,6 +51,7 @@ const ListViewLeaf = forwardRef(
 				level={ level }
 				positionInSet={ position }
 				setSize={ rowCount }
+				isExpanded={ undefined }
 				{ ...props }
 			>
 				{ children }

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
@@ -15,6 +15,18 @@
 	// Use position relative for row animation.
 	position: relative;
 
+	.components-button {
+		// When a row is expanded, retain the dark color.
+		&[aria-expanded="true"] {
+			color: $gray-900;
+		}
+
+		// Ensure that on hover, the admin color is still used.
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+
 	// The background has to be applied to the td, not tr, or border-radius won't work.
 	&.is-selected td {
 		background: var(--wp-admin-theme-color);
@@ -93,7 +105,7 @@
 	&.is-branch-selected.is-first-selected td:last-child {
 		border-top-right-radius: $radius-block-ui;
 	}
-	&[aria-expanded="false"] {
+	&[data-expanded="false"] {
 		&.is-branch-selected.is-first-selected td:first-child {
 			border-top-left-radius: $radius-block-ui;
 		}
@@ -380,15 +392,15 @@ $block-navigation-max-indent: 8;
 }
 
 // Point downwards when open.
-.block-editor-list-view-leaf[aria-expanded="true"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="true"] .block-editor-list-view__expander svg {
 	visibility: visible;
 	transition: transform 0.2s ease;
 	transform: rotate(90deg);
 	@include reduce-motion("transition");
 }
 
 // Point rightwards when closed
-.block-editor-list-view-leaf[aria-expanded="false"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="false"] .block-editor-list-view__expander svg {
 	visibility: visible;
 	transform: rotate(0deg);
 	transition: transform 0.2s ease;

diff --git a/packages/block-editor/src/components/list-view/use-block-selection.js b/packages/block-editor/src/components/list-view/use-block-selection.js
@@ -144,7 +144,7 @@ export default function useBlockSelection() {
 			}
 
 			if ( label ) {
-				speak( label );
+				speak( label, 'assertive' );
 			}
 		},
 		[

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `TreeGrid`: Modify keyboard navigation code to use a data-expanded attribute if aria-expanded is to be controlled outside of the TreeGrid component ([#48461](https://github.com/WordPress/gutenberg/pull/48461)).
+
 ### Documentation
 
 -   `Autocomplete`: Add heading and fix type for `onReplace` in README. ([#49798](https://github.com/WordPress/gutenberg/pull/49798)).

diff --git a/packages/components/src/tree-grid/index.tsx b/packages/components/src/tree-grid/index.tsx
@@ -91,7 +91,8 @@ function UnforwardedTreeGrid(
 			const canExpandCollapse = 0 === currentColumnIndex;
 			const cannotFocusNextColumn =
 				canExpandCollapse &&
-				activeRow.getAttribute( 'aria-expanded' ) === 'false' &&
+				( activeRow.getAttribute( 'data-expanded' ) === 'false' ||
+					activeRow.getAttribute( 'aria-expanded' ) === 'false' ) &&
 				keyCode === RIGHT;
 
 			if ( ( [ LEFT, RIGHT ] as number[] ).includes( keyCode ) ) {
@@ -112,6 +113,8 @@ function UnforwardedTreeGrid(
 						// Left:
 						// If a row is focused, and it is expanded, collapses the current row.
 						if (
+							activeRow.getAttribute( 'data-expanded' ) ===
+								'true' ||
 							activeRow.getAttribute( 'aria-expanded' ) === 'true'
 						) {
 							onCollapseRow( activeRow );
@@ -151,8 +154,10 @@ function UnforwardedTreeGrid(
 						// Right:
 						// If a row is focused, and it is collapsed, expands the current row.
 						if (
+							activeRow.getAttribute( 'data-expanded' ) ===
+								'false' ||
 							activeRow.getAttribute( 'aria-expanded' ) ===
-							'false'
+								'false'
 						) {
 							onExpandRow( activeRow );
 							event.preventDefault();

diff --git a/test/e2e/specs/editor/blocks/columns.spec.js b/test/e2e/specs/editor/blocks/columns.spec.js
@@ -26,7 +26,7 @@ test.describe( 'Columns', () => {
 		// block column add
 		await page
 			.locator(
-				'role=treegrid[name="Block navigation structure"i] >> role=gridcell[name="Column link"i]'
+				'role=treegrid[name="Block navigation structure"i] >> role=gridcell[name="Column"i]'
 			)
 			.first()
 			.click();