agama-project / agama / 22616528244

77%

push

github

feat(web):  add visual feedback on table row hover and focus (#3233)

Agama tables lacked any visual feedback when users hovered with mouse or
navigated rows with the keyboard, making it hard to track which row user
is on. PF's built-in solution (isClickable on Tr) was intentionally
avoided since it provides the hover highlight out of the box but also
adds a pointer cursor and implies the row is clickable, which is not the
common use case for Agama tables at this moment (check slightly related
commit ae2d3a270 in which the usage of
isClickable was discarded).

Thus, a custom CSS rule has been added for covering three interaction
cases:

* Mouse hover, standard `:hover`
* Keyboard navigation, `:focus-within`, intentionally broad to cover all
focusable elements including checkboxes. This ensures keyboard users
always know which row they are on. The (small) tradeoff is a residual
highlight after checkbox selection that persists until focus moves
elsewhere. Since it's not expected mouse users stop suddenly
interacting, this is an acceptable edge case where the benefit for
keyboard users outweighs the minor annoyance (for a brief amount of
time) for mouse users.
* Action menu open, `:has(.pf-v6-c-menu-toggle[aria-expanded="true"])`,
which required fixing a missing `isExpanded` prop on `SimpleDropdown` as
part of this PR.

The highlight color reuses the same value used for button and menu
option hover states for consistency across interactive elements.
Defining another color for these elements or a dedicated token for row
highlighting is left as a future improvement, though it is not a
priority for the team in the mid-term given the amount of other ongoing
work.


<img width="2048" height="1536" alt="localhost_8080_ (10)"
src="https://github.com/user-attachments/assets/3752b712-3a0e-4398-8afa-2a3fc45c73a4"
/>
<img width="2048" height="1536" alt="localhost_8080_ (9)"
src="https://github.com/user-attachments/assets/9696544e-0d93... (continued)

3155 of 5212 branches covered (60.53%)

Branch coverage included in aggregate %.

20573 of 26214 relevant lines covered (78.48%)

75.53 hits per line