feat(TableRow): add focus ring and ariaLabel prop for clickable rows

[kyleknighted]

Summary

Surfaces the unmerged work on devin/1777302300-a11y-table-row-button-role (commit ac95878) onto main so it actually ships and web main is no longer pointing at an unreachable deep-ui SHA.

Changes (rebased onto current main):

• TableRow accepts a new optional ariaLabel prop and applies it to the row when the row is clickable (falls back to name / id).
• Clickable rows get a visible keyboard focus ring via :focus-visible.
• Type definition extended with the new prop.

Note on role="button": the original branch also added role="button" to clickable rows. Devin Review correctly flagged that as breaking the table > rowgroup > row > cell accessibility tree (screen readers stop treating the element as a table row, and child <td> cells lose their column-header association). It was removed in c323698. tabIndex={0} + onClick + Enter/Space onKeyDown + aria-label keeps the row keyboard-operable while preserving table semantics. (Copilot suggested re-adding role="button" — see discussion.)

Why this PR exists

web main (commit 1a4cb4b / PR #405) bumped .deep-ui-ref to ac95878, which:

• was never opened as a deep-ui PR / never merged,
• branched from before #101, so it's missing the single-mode DateRangePicker work that other in-flight web PRs (e.g. #383) depend on.

This PR re-applies that work cleanly on top of current main so a single deep-ui SHA contains both. Once merged, web PR #383 will bump .deep-ui-ref + the submodule pointer to this merged commit.

Review & Testing Checklist for Human

• Skim the diff vs main — should be limited to lib/molecule/TableRow/{TableRow.tsx,styles.module.css,types.ts}.
• Confirm the existing TableRow stories still render correctly in Storybook.
• Verify Chromatic UI Tests / UI Review on this PR don't show unintended visual diffs outside TableRow.

Notes

• Original branch (devin/1777302300-a11y-table-row-button-role) is left untouched; can be deleted after this merges.
• No new dependencies, no API breakage — ariaLabel is purely additive.

Link to Devin session: https://app.devin.ai/sessions/926c5fa4fe8a4df6997be146cb57a014
Requested by: @kyleknighted

[devin-ai-integration]

Original prompt from Kyle

In the Issues sidebar we have a date picker, can we use the DateRangePicker as a single date selector or can it updated/duplicated to provide this functionality?

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[Copilot]

Pull request overview

This PR aims to improve TableRow accessibility for clickable table rows by adding an optional accessible label prop and styling for keyboard focus, intended to align clickable rows with button-like interaction.

Changes:

• Extend ITableRowProps with an optional ariaLabel prop.
• Add a :focus-visible outline style for clickable rows.
• Update TableRow to use ariaLabel (with fallback to name/id) when the row is clickable.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
lib/molecule/TableRow/types.ts	Adds the new optional ariaLabel prop to the public ITableRowProps type.
lib/molecule/TableRow/styles.module.css	Adds a visible keyboard focus ring via :focus-visible styling on clickable rows.
lib/molecule/TableRow/TableRow.tsx	Wires ariaLabel into the rendered row for clickable rows (with fallback behavior).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.