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

NumberControl: Make increment and decrement buttons keyboard accessible. #57402

Merged
merged 3 commits into from
Dec 28, 2023

Conversation

afercia
Copy link
Contributor

@afercia afercia commented Dec 27, 2023

Fixes #57401

What?

The NumberControl increment and decrement buttons are not operable with a keyboard. This seems to be intentional.

Why?

All interactive controls presented to users should be keyboard operable.

How?

Make them keyboard accessible.

Testing Instructions

  • Use Twenty Twenty Four as active theme
  • Go to Site Editor > Templates > Blog Home
  • Use the Tab key to move focus to the 'Posts per page' field.
  • Press the Tab key again to move focus to the Increment button.
  • Observe the button receives focus.
  • Observe there is a clear focus style.
  • Observe a tooltip appears to visually expose the button accessible name.
  • Presse the Enter or Spacebar keys and check the button works as expected.
  • Move focus to the Decrement button.
  • Repeat the steps above.

Testing Instructions for Keyboard

Screenshots or screencast

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components labels Dec 27, 2023
@afercia
Copy link
Contributor Author

afercia commented Dec 27, 2023

I'll add a changelog entry after the tests pass.

Copy link

Flaky tests detected in abff455.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7339579313
📝 Reported issues:

Copy link
Contributor

@alexstine alexstine left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code change looks good.

@afercia
Copy link
Contributor Author

afercia commented Dec 28, 2023

Other instances of the custom spin controls are in the Typography settings line height and text columns (for the block that support them) and in the global styles. Screenshots:

Screenshot 2023-12-28 at 09 39 19

Screenshot 2023-12-28 at 09 56 46

@aristath aristath merged commit 970e925 into trunk Dec 28, 2023
56 checks passed
@aristath aristath deleted the fix/number-control-increment-decrement-buttons branch December 28, 2023 10:56
@github-actions github-actions bot added this to the Gutenberg 17.5 milestone Dec 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

NumberControl: Increment and Decrement buttons aren't operable with keyboard
3 participants