Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility improvements for List View Part 2 #38358

Merged
merged 17 commits into from
Feb 8, 2022
Merged

Accessibility improvements for List View Part 2 #38358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9075227
Add aria-expanded to block selection button to force the announcement.
alexstine Jan 30, 2022
b762d39
Allow expand on column in index 0. Prevent focus from moving to next …
alexstine Jan 30, 2022
393c273
Merge branch 'trunk' of github.com:wordpress/gutenberg into update/li…
alexstine Jan 31, 2022
79bd435
Shorten var.
alexstine Jan 31, 2022
1baf983
Update code comment.
alexstine Jan 31, 2022
8854492
Make sure focus can go back to row index 0 if coming from above Optio…
alexstine Jan 31, 2022
529db24
Fix lint error.
alexstine Jan 31, 2022
110910e
Try to fix bugs.
alexstine Jan 31, 2022
c358749
Merge branch 'trunk' of github.com:wordpress/gutenberg into update/li…
alexstine Feb 3, 2022
af4438f
Merge branch 'trunk' of github.com:wordpress/gutenberg into update/li…
alexstine Feb 4, 2022
2f57420
Check that activeRow contains aria-expanded vs. checking the column i…
alexstine Feb 4, 2022
da17b51
Try to make code cleaner. Update the Changelog.
alexstine Feb 8, 2022
5cb7f6b
Revert some files.
alexstine Feb 8, 2022
7ed247a
Fix Changelog.
alexstine Feb 8, 2022
95ad4f2
Merge branch 'trunk' of github.com:wordpress/gutenberg into update/li…
alexstine Feb 8, 2022
b09484f
Update packages/components/src/tree-grid/index.js
alexstine Feb 8, 2022
ec71533
Fix formatting error.
alexstine Feb 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/list-view/block-contents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const ListViewBlockContents = forwardRef(
position,
siblingBlockCount,
level,
isExpanded,
...props
},
ref
Expand Down Expand Up @@ -71,6 +72,7 @@ const ListViewBlockContents = forwardRef(
draggable={ draggable }
onDragStart={ onDragStart }
onDragEnd={ onDragEnd }
isExpanded={ isExpanded }
{ ...props }
/>
) }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/list-view/block-select-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ function ListViewBlockSelectButton(
onDragStart,
onDragEnd,
draggable,
isExpanded,
},
ref
) {
Expand Down Expand Up @@ -81,6 +82,7 @@ function ListViewBlockSelectButton(
onDragEnd={ onDragEnd }
draggable={ draggable }
href={ `#block-${ clientId }` }
aria-expanded={ isExpanded }
>
<ListViewExpander onClick={ onToggleExpanded } />
<BlockIcon icon={ blockInformation?.icon } showColors />
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/list-view/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@ function ListViewBlock( {
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
isExpanded={ isExpanded }
/>
</div>
) }
Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
14 changes: 11 additions & 3 deletions packages/components/src/tree-grid/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand Down Expand Up @@ -149,7 +154,10 @@ function TreeGrid(
return;
talldan marked this conversation as resolved.
Show resolved Hide resolved
}

// 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
Expand Down