diff --git a/web/package/agama-web-ui.changes b/web/package/agama-web-ui.changes index a9c3836adc..6e918c1d45 100644 --- a/web/package/agama-web-ui.changes +++ b/web/package/agama-web-ui.changes @@ -1,3 +1,9 @@ +------------------------------------------------------------------- +Mon Mar 2 23:06:08 UTC 2026 - David Diaz + +- Add visual feedback on table row hover and focus + (gh#agama-project/agama#3233). + ------------------------------------------------------------------- Mon Mar 2 18:01:05 UTC 2026 - David Diaz diff --git a/web/src/assets/styles/index.scss b/web/src/assets/styles/index.scss index 0a5754f48b..9847f66651 100644 --- a/web/src/assets/styles/index.scss +++ b/web/src/assets/styles/index.scss @@ -487,6 +487,27 @@ label.pf-m-disabled + .pf-v6-c-check__description { --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--pf-t--global--spacer--xs); } +// Highlight table rows on interaction, covering three cases: +// 1. Mouse hover. +// 2. Keyboard navigation via :focus-within, which is intentionally broad and +// covers all focusable elements including checkboxes. This way, keyboard +// users always know which row they are on. The downside: if a mouse user +// clicks a checkbox and moves away, the row stays highlighted until focus +// moves elsewhere. This is an acceptable edge case since most users will +// naturally move on after checking a box and in any case the benefit for +// keyboard users outweighs the minor annoyance for mouse users. +// 3. Action menu open via aria-expanded attribute. +// +// Note: PF's isClickable prop on Tr would provide the hover highlight out of +// the box, but it also adds a pointer cursor and implies the row is clickable, +// which is not the case for Agama tables. Hence this custom CSS to get the +// visual feedback without the misleading affordance. +.pf-v6-c-table tbody tr:hover, +.pf-v6-c-table tbody tr:focus-within, +.pf-v6-c-table tbody tr:has(.pf-v6-c-menu-toggle[aria-expanded="true"]) { + background-color: var(--agm-t--action--background--color--hover); +} + // Some utilities not found at PF .w-14ch { inline-size: 14ch; diff --git a/web/src/components/core/SimpleDropdown.test.tsx b/web/src/components/core/SimpleDropdown.test.tsx index dfba53e419..9b009d5016 100644 --- a/web/src/components/core/SimpleDropdown.test.tsx +++ b/web/src/components/core/SimpleDropdown.test.tsx @@ -50,7 +50,10 @@ describe("SimpleDropdown", () => { const { user } = installerRender( , ); - await user.click(screen.getByRole("button", { name: "Actions for 0.0.0160" })); + + const toggle = screen.getByRole("button", { name: "Actions for 0.0.0160" }); + await user.click(toggle); + expect(toggle).toHaveAttribute("aria-expanded", "true"); screen.getByRole("menuitem", { name: "Activate" }); screen.getByRole("menuitem", { name: "Deactivate" }); screen.getByRole("menuitem", { name: "Format" }); diff --git a/web/src/components/core/SimpleDropdown.tsx b/web/src/components/core/SimpleDropdown.tsx index bd248338db..9c46865a9d 100644 --- a/web/src/components/core/SimpleDropdown.tsx +++ b/web/src/components/core/SimpleDropdown.tsx @@ -113,6 +113,7 @@ export default function SimpleDropdown({ onClick={() => setIsOpen(!isOpen)} variant="plain" aria-label={label} + isExpanded={isOpen} >