adam/shoc-frontend-new
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/shoc-frontend-new.git synced 2026-10-03 17:53:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(work-orders): make date help controls accessible

Browse source
This commit is contained in:
Codex Review Integration 2026-09-16 16:56:26 -03:00
parent e13dede629
commit 196ec8a836
3 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/app/(protected)/workorders/_components/list/table/wo-table-header-label.tsx
View file

@ -19,14 +19,20 @@ export function WoTableHeaderLabel({ colKey, label }: WoTableHeaderLabelProps) {
<span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
{label}
<Tooltip title={tooltip} arrow placement="top">
<span
role="img"
<button
type="button"
aria-label={`${label} column help`}
tabIndex={0}
style={{ display: "inline-flex", cursor: "help", color: "var(--color-text-muted)" }}
style={{
display: "inline-flex",
cursor: "help",
color: "var(--color-text-muted)",
padding: 0,
border: 0,
background: "transparent",
}}
>
<CircleQuestionMark size={13} aria-hidden="true" />
</span>
</button>
</Tooltip>
</span>
);

2
src/domain/work-orders/constants/wo-table-header-tooltips.ts
View file

@ -1,5 +1,5 @@
/**
* Help copy for date-column headers on the work orders board table (SH-195).
* Help copy for date-column headers on the work orders board table.
* Keyed by the `WO_TABLE_COLS` column key; only columns with copy here show a
* header help icon. `appt` (Appt Time) is an intentional open point — do not
* add it without a business-rule decision.

4
src/test/app/(protected)/workorders/wo-table-head-date-tooltips.test.tsx
View file

@ -39,7 +39,7 @@ describe("WoTableHead date column header tooltips (SH-195)", () => {
renderHead();
const header = screen.getByRole("columnheader", { name: new RegExp(`^${columnName}`) });
const icon = within(header).getByRole("img", { name: `${columnName} column help` });
const icon = within(header).getByRole("button", { name: `${columnName} column help` });
await user.hover(icon);
@ -54,7 +54,7 @@ describe("WoTableHead date column header tooltips (SH-195)", () => {
renderHead();
const header = screen.getByRole("columnheader", { name: /^SCHEDULE ON/ });
const icon = within(header).getByRole("img", { name: "SCHEDULE ON column help" });
const icon = within(header).getByRole("button", { name: "SCHEDULE ON column help" });
await user.tab();