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: Increment and Decrement buttons aren't operable with keyboard #57401

Closed
afercia opened this issue Dec 27, 2023 · 1 comment · Fixed by #57402
Closed

NumberControl: Increment and Decrement buttons aren't operable with keyboard #57401

afercia opened this issue Dec 27, 2023 · 1 comment · Fixed by #57402
Assignees
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Dec 27, 2023

Description

I'm not sure what is the reasoning behind making the NumberControl Increment and Decrement buttons not operable with a keyboard. That seems intentional as:

  • These buttons have a tabIndex="-1" attribute so they're not focusable.
  • They are hidden from assistive technology by the means of aria-hidden="true".
  • However, they do have an aria-label attribute.

Regardless of the inconsistent implementation, there is no apparent reason why these buttons should not be usable with a keyboard.

Screenshot of an instance of NumberControl Increment and Decrement buttons:

Screenshot 2023-12-27 at 10 32 41

Step-by-step reproduction 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.
  • Observe the Increment and Decrement buttons get skipped bevause they're made not focusable.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@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 afercia self-assigned this Dec 27, 2023
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Dec 27, 2023
@afercia
Copy link
Contributor Author

afercia commented Dec 28, 2023

For reference: the custom spin controls were adder here, with a comment mentioning them as progressive enhancement and hidden from screen readers.

#45333

The buttons are a progressive enhancement hidden from screen readers.

The progressive enhancement concept is totally fine but there's no reason to make them not operable with a keyboard.

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 [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant