From 2ca2175c71aca0c0d7019346a961905345bfc12c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Mon, 2 Mar 2026 22:37:40 +0000 Subject: [PATCH 1/4] fix(web): add missing isExpanded prop in SimpleDropdown Needed to properly set the aria-expanded attribute --- web/src/components/core/SimpleDropdown.test.tsx | 5 ++++- web/src/components/core/SimpleDropdown.tsx | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) 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} > From 72d6e5ee93f16932a2894badd0607c70812ed172 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Mon, 2 Mar 2026 22:41:37 +0000 Subject: [PATCH 2/4] feat(web): add visual feedback on table rows hovering or focus --- web/src/assets/styles/index.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/web/src/assets/styles/index.scss b/web/src/assets/styles/index.scss index 60b0db257b..f43ed0a110 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); +} + // Temporary workaround for a recently introduced issue in PatternFly's // ExpandableSection, where the parent container displays scrollbars when the // section is collapsed. This issue has been fixed in PatternFly core on September From 19084183206bf1d02aa6b64d207071637d23a275 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Mon, 2 Mar 2026 23:07:15 +0000 Subject: [PATCH 3/4] doc(web): add entry in changes file --- web/package/agama-web-ui.changes | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web/package/agama-web-ui.changes b/web/package/agama-web-ui.changes index c6dad3d877..a916d51536 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 focues + (gh#agama-project/agama#3233). + ------------------------------------------------------------------- Fri Feb 27 23:00:35 UTC 2026 - Imobach Gonzalez Sosa From e2c685416b2a6edd2a77a2a47f24ed62146fdcc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz?= <1691872+dgdavid@users.noreply.github.com> Date: Tue, 3 Mar 2026 08:03:01 +0000 Subject: [PATCH 4/4] Update web/package/agama-web-ui.changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: José Iván López --- web/package/agama-web-ui.changes | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/package/agama-web-ui.changes b/web/package/agama-web-ui.changes index a916d51536..ee28c5cc37 100644 --- a/web/package/agama-web-ui.changes +++ b/web/package/agama-web-ui.changes @@ -1,7 +1,7 @@ ------------------------------------------------------------------- Mon Mar 2 23:06:08 UTC 2026 - David Diaz -- Add visual feedback on table row hover and focues +- Add visual feedback on table row hover and focus (gh#agama-project/agama#3233). -------------------------------------------------------------------