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

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Mon Mar  2 23:06:08 UTC 2026 - David Diaz <dgonzalez@suse.com>
+
+- Add visual feedback on table row hover and focus
+  (gh#agama-project/agama#3233).
+
 -------------------------------------------------------------------
 Mon Mar  2 18:01:05 UTC 2026 - David Diaz <dgonzalez@suse.com>
 

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;

web/src/components/core/SimpleDropdown.test.tsx

@@ -50,7 +50,10 @@ describe("SimpleDropdown", () => {
     const { user } = installerRender(
       <SimpleDropdown items={mockItems} label="Actions for 0.0.0160" />,
     );
-    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" });

web/src/components/core/SimpleDropdown.tsx

@@ -113,6 +113,7 @@ export default function SimpleDropdown({
           onClick={() => setIsOpen(!isOpen)}
           variant="plain"
           aria-label={label}
+          isExpanded={isOpen}
         >
           <Icon name="more_horiz" />
         </MenuToggle>