Open t-hamano opened 1 week ago
Even if we focus on this element, we cannot perform any operations with the keyboard.
@t-hamano thanks for looking into this. That's not entirely correct. See https://github.com/WordPress/gutenberg/issues/45809 and other ongoing discussions for example for the proposed scrollability
of horizontal tabs in https://github.com/WordPress/gutenberg/issues/64093.
When there are many categories, the group element becomes scrollable.
As reported in other issues, browsers treat scrollable elements in a different way.
The tabindex=0 and the aria-lable are intentional to make all browsers behave the same. When focused, you can use arrow keys to scroll the content of the element. That's an accessibility feature that Firefox implements by default and other browsers don't.
The tabiindex should not be removed in https://github.com/WordPress/gutenberg/pull/65895 Rather, the element should show a focus style when it's focused.
Thanks for the feedback. I didn't know such an intention existed.
I'd like to try out focus styles, do you know if a similar implementation exists in core/Gutenberg?
do you know if a similar implementation exists in core/Gutenberg?
The modal dialog content: when the content is long an makes the container scrollable, it becomes focusable and it does have a focus style. That was implemented in https://github.com/WordPress/gutenberg/pull/47426 to solve https://github.com/WordPress/gutenberg/issues/41500
Later on, I created https://github.com/WordPress/gutenberg/issues/45809 as I think all that logic and interaction model should be abstracted in a Scrollable
component to make browsers behave the same for scrollable elements and provide the same level of accessibility and usability.
Thanks for bringing that to my attention. A dedicated component seems like a better option in the long run than applying ad-hoc focus styles to the Category panel.
Description
For example, this component is used in the Categories panel to render a list of categories with checkboxes.
These checkboxes are wrapped by an element with the
role="group"
attribute, but because this element itself has thetabIndex=0
attribute, unnecessary tab focus occurs:https://github.com/WordPress/gutenberg/blob/90d7c3b1f56ca64d14f2168e30cba257c0e76827/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js#L418-L423
Even if we focus on this element, we cannot perform any operations with the keyboard. Also, even without this tabindex, when the first checkbox in the group is focused, the
aria-label
of the element with therole="group"
attribute is read out, so thetabindex
attribute should not be necessary.Step-by-step reproduction instructions
Screenshots, screen recording, code snippet
https://github.com/user-attachments/assets/574f7c5d-1758-43c3-8008-ec2cc17ea852
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.