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.

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

feat!: Improve accessibility of the grid field. #2488

Merged
merged 7 commits into from
Feb 13, 2025

Conversation

gonfunko
Copy link
Contributor

@gonfunko gonfunko commented Feb 10, 2025

The basics

The details

Resolves

Fixes #2481

Proposed Changes

This PR updates the grid field to improve its accessibility. Specifically:

  • The focused item in the grid can now be navigated using the left and right arrow keys, in addition to up and down.
  • The grid is no longer a menu, but instead is an element with aria-role grid, made up of rows and cells with the appropriate roles.
  • Items are scrolled into view when navigation exceeds the bounds of the dropdown div

Breaking Changes

Since this field no longer uses menus as its backing representation, the CSS class structure has changed dramatically. Broadly speaking, .blocklyFieldGrid targets the grid itself, and .blocklyFieldGridItem targets each individual item. For details, refer to the CSS registered at the end of index.ts.

@gonfunko gonfunko changed the title feat: Improve accessibility of the grid field. feat!: Improve accessibility of the grid field. Feb 13, 2025
@gonfunko gonfunko merged commit e35406b into google:rc/v12.0.0 Feb 13, 2025
8 checks passed
@gonfunko gonfunko deleted the grid-nav branch February 13, 2025 19:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants