agama-project / agama / 25731124574

push

github

feat(web): enable arrow-key opening of closed dropdowns (#3468)

## Summary

Implements the [W3C Select-Only
Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/)
keyboard pattern across all PatternFly dropdown components via a new
shared `useComboboxKeyboard` hook. Pressing <kbd>ArrowDown</kbd> /
<kbd>ArrowUp</kbd> on a closed toggle now opens the menu and focuses the
first or last item without immediately committing a value.

## Motivation

Agama makes extensive use of PatternFly’s `Select` component instead of
a native `<select>` to display option descriptions alongside labels,
something native selects do not support (until broader support for
[`appearance:
base-select`](https://developer.chrome.com/blog/a-customizable-select)
becomes available and accessible).

However, PatternFly `Select` components require users to press
<kbd>Enter</kbd> or <kbd>Space</kbd> before arrow-key navigation becomes
available, which differs from native `<select>` behavior. Fully matching
native behavior of arrow keys immediately commiting values would
introduce accessibility and usability issues in the Agama web interface
when selections trigger immediate UI updates.

For example, in the IPv4/IPv6 Settings dropdown within the network
connection form, pressing <kbd>ArrowDown</kbd> to explore options would
instantly trigger visibility changes in related fields. In other
contexts, a selection may immediately apply filtering or refresh visible
content. In both cases, the UI can change on every keypress, making the
experience disorienting for sighted users and even more challenging for
screen reader users, whose announcement of an option may be cut off
mid-speech by the resulting UI change.

The W3C explore-then-commit pattern solves both issues: arrow keys open
the menu and allow free navigation, while the value only changes on
<kbd>Enter</kbd>, <kbd>Space</kbd>, or click. This allows all users to
understand their options before commit... (continued)

4052 of 6197 branches covered (65.39%)

Branch coverage included in aggregate %.

54 of 55 new or added lines in 5 files covered. (98.18%)

22483 of 27326 relevant lines covered (82.28%)

97.87 hits per line