Re: [w3ctag/design-reviews] Early design review: Focusgroup (Issue #732)

For https://www.w3.org/WAI/APA/track/actions/2326:

My initial review is very positive. However, the explainer and demo (via [polyfill](https://github.com/MicrosoftEdge/MSEdgeExplainers/tree/main/Focusgroup)) fail [WCAG success criteria](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) when it comes to "nested" focusgroups (via extend). [Example 11](https://github.com/openui/open-ui/blob/main/research/src/pages/focusgroup/focusgroup.explainer.mdx#662-orthogonal-axis-extending-linear-focusgroups) demonstrates this in the docs and is very similar to the "vertical menu (with horizontal submenus)" [example](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/focusgroup_polyfill_test_harness.html#L32).

In Example 11, the `container-element` has `tabindex=-1` with no role. In WAI Authoring Practices [menu](https://www.w3.org/WAI/ARIA/apg/example-index/menubar/menubar-navigation.html) and [tree](https://www.w3.org/WAI/ARIA/apg/example-index/treeview/treeview-navigation.html) examples, the element owning a subgroup is an item, not a separate container with no role.

The problem is evident in the demo when using keyboard navigation. Users must use <kbd>ArrowDown</kbd> until reaching a generic element with no accessible name then somehow intuiting that the <kbd>ArrowRight</kbd> key to reach the first sub-menu item. In the WAI examples, the direction change begins on a `menuitem` or `treeitem` with `aria-expanded`. Removing the `tabindex` from the `container-element` makes the "sub-menu" items unreachable by keyboard. Alternatively, adding `role=menuitem` to the container and an accessible name (via `aria-label` or `aria-labelledby`) seems to fix the issue.

While the use of `focusgroup` works well in flat structures, its use in nested structures will need better examples that don't lead to focusable elements with no name or role.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/732#issuecomment-1159814503
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/732/1159814503@github.com>