HierarchicalTermSelector: Unnecessary tab focus

[t-hamano]

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 the tabIndex=0 attribute, unnecessary tab focus occurs:

gutenberg/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js

Lines 418 to 423 in 90d7c3b

	<div
	className="editor-post-taxonomies__hierarchical-terms-list"
	tabIndex="0"
	role="group"
	aria-label={ groupLabel }
	>

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 the role="group" attribute is read out, so the tabindex attribute should not be necessary.

Step-by-step reproduction instructions

• Open the post editor.
• Open the post sidebar.
• Use the tab key to focus the Categories panel.
• Press enter to open the Categories panel.
• Press the tab key to focus the search field, if present.
• Press tab. The screen reader should announce "Categories grouping" but there should be no visually focused element on the screen.

Screenshots, screen recording, code snippet

3aaafd960487853a303704679a622965.mp4

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]

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 #45809 and other ongoing discussions for example for the proposed scrollability of horizontal tabs in #64093.

When there are many categories, the group element becomes scrollable.

As reported in other issues, browsers treat scrollable elements in a different way.

• Firefox makes scrollable elements (e.g. div elements) focusable. That's to allow keyboard users to scroll the content.
• Chrome and other webkit based browsers don't.

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 #65895
Rather, the element should show a focus style when it's focused.

[t-hamano]

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?

[afercia]

do you know if a similar implementation exists in core/Gutenberg?

The modal dialog content: when the content is long and makes the container scrollable, it becomes focusable and it does have a focus style. That was implemented in #47426 to solve #41500

Later on, I created #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.

[t-hamano]

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.