FlatTable: support row hover state without requiring row onClick or container focus

[cgc-sage]

Description

FlatTable does not provide a built-in way to get row hover styling that works without either:

1. Adding onClick on every FlatTableRow, or
2. Focusing the scroll container first (e.g. by clicking inside the table).

We need a hover-only option: rows should show a hover state when the pointer is over them, without requiring row click handlers or the table/scroll container to have focus.

Current behaviour

• Row hover (e.g. background change) only appears after the user has focused the table area (e.g. clicked inside it or tabbed to it), or when rows have onClick and the row is interactive.
• Hovering over rows before any focus/click does not show hover styling.

Expected behaviour

• Rows show a clear hover state (e.g. background change) on mouseover, without requiring:
• an onClick on FlatTableRow, or
• the scroll container (or table) to have focus.

Why this matters (accessibility): With the current behaviour, keyboard focus applies to the whole row, so the row appears selected when tabbing. We want focus to go only to interactive elements (e.g. checkboxes, links), not the row. Supporting hover without onClick would allow hover feedback for mouse users while we keep keyboard focus on those elements.

Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-qvtsn3ym?file=src%2FApp.tsx

Steps to reproduce

1. Render a FlatTable with overflowX="auto" inside a constrained-width container (so the scroll container is focusable).
2. Add a few FlatTableRow / FlatTableCell rows without onClick on the rows.
3. Load the page and do not click inside the table or focus it.
4. Move the mouse over the rows.

JIRA ticket numbers (Sage only)

SBS-162248

Suggested solution

• Provide a prop on FlatTable or FlatTableRow to enable “hover-only” row highlighting (e.g. hasRowHover or highlightOnHover) that:
• Uses CSS :hover (or equivalent) so it works without focus and without onClick, and
• Does not require consumers to add onClick to rows.

Carbon version

158.14.2

React version

v17

Design tokens version

No response

Relevant browsers

Chrome

Relevant OSs

Windows

Assistive technologies

No response

Additional context

Accessibility: We need this mainly for keyboard users. With the current behaviour, the entire row becomes selected/focused when navigating with the keyboard. We want only interactive elements (e.g. checkboxes, buttons) to receive focus, not the whole row. Enabling row hover without requiring onClick would let us give visual hover feedback for mouse users while keeping keyboard focus on interactive elements only, which fits our accessibility goals.
We use FlatTable in a scrollable layout (overflowX="auto"). The scroll container is focusable for keyboard scroll, which may be why hover only works after focus. A solution that works with this pattern would be enough. We only need visual hover feedback; we do not want to force row onClick for non-interactive tables.

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[tomdavies73]

FE-7604