Accessibility improvements for List View Part 2 (#38358)

* Add aria-expanded to block selection button to force the announcement. * Allow expand on column in index 0. Prevent focus from moving to next column if collapsed. * Shorten var. * Update code comment. * Make sure focus can go back to row index 0 if coming from above Options button. * Fix lint error. * Try to fix bugs. * Check that activeRow contains aria-expanded vs. checking the column index. Update comments. * Try to make code cleaner. Update the Changelog. * Revert some files. * Fix Changelog. * Update packages/components/src/tree-grid/index.js Improvement for more than 2 <td> elements. Co-authored-by: Daniel Richards <daniel.richards@automattic.com> * Fix formatting error. Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
WordPress · Feb 8, 2022 · 271703c · 271703c
1 parent 29d123b
commit 271703c
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 3 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
@@ -26,6 +26,7 @@ const ListViewBlockContents = forwardRef(
 			position,
 			siblingBlockCount,
 			level,
+			isExpanded,
 			...props
 		},
 		ref
@@ -71,6 +72,7 @@ const ListViewBlockContents = forwardRef(
 						draggable={ draggable }
 						onDragStart={ onDragStart }
 						onDragEnd={ onDragEnd }
+						isExpanded={ isExpanded }
 						{ ...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
@@ -36,6 +36,7 @@ function ListViewBlockSelectButton(
 		onDragStart,
 		onDragEnd,
 		draggable,
+		isExpanded,
 	},
 	ref
 ) {
@@ -81,6 +82,7 @@ function ListViewBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
+				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
@@ -185,6 +185,7 @@ function ListViewBlock( {
 							ref={ ref }
 							tabIndex={ tabIndex }
 							onFocus={ onFocus }
+							isExpanded={ isExpanded }
 						/>
 					</div>
 				) }

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -16,6 +16,7 @@
 ### Enhancements
 
 -   Update the visual design of the `Spinner` component. ([#37551](https://github.com/WordPress/gutenberg/pull/37551))
+- TreeGrid accessibility enhancements. (#38358)
 
 ## 19.3.0 (2022-01-27)
 

diff --git a/packages/components/src/tree-grid/index.js b/packages/components/src/tree-grid/index.js
@@ -78,6 +78,11 @@ function TreeGrid(
 			const activeRow = activeElement.closest( '[role="row"]' );
 			const focusablesInRow = getRowFocusables( activeRow );
 			const currentColumnIndex = focusablesInRow.indexOf( activeElement );
+			const canExpandCollapse = 0 === currentColumnIndex;
+			const cannotFocusNextColumn =
+				canExpandCollapse &&
+				activeRow.getAttribute( 'aria-expanded' ) === 'false' &&
+				keyCode === RIGHT;
 
 			if ( includes( [ LEFT, RIGHT ], keyCode ) ) {
 				// Calculate to the next element.
@@ -91,8 +96,8 @@ function TreeGrid(
 					);
 				}
 
-				// Focus is either at the left or right edge of the grid.
-				if ( nextIndex === currentColumnIndex ) {
+				// Focus is at the left most column.
+				if ( canExpandCollapse ) {
 					if ( keyCode === LEFT ) {
 						// Left:
 						// If a row is focused, and it is expanded, collapses the current row.
@@ -149,7 +154,10 @@ function TreeGrid(
 					return;
 				}
 
-				// Focus the next element.
+				// Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed.
+				if ( cannotFocusNextColumn ) {
+					return;
+				}
 				focusablesInRow[ nextIndex ].focus();
 
 				// Prevent key use for anything else. This ensures Voiceover