OMS Web

================================================================================

GATE 6 — DESIGN CONSISTENCY AUDIT (Next.js/Tailwind standalone)

Ticket : #3248 — OMS UI/UX and functional

Branch : feat/3248-oms-ui-ux-and-functional @ e8fb724

Repo : cross-repo-orchestration/oms-web

Node : W15_gate_design_consistency_audit

Result : FAIL (4 unresolved P1 — all accessibility; 8 P2, 12 P3)

SUPERSEDES an earlier run of this same node at this same commit, preserved

verbatim at docs/gate-evidence/design-consistency-audit-3248.prior-run-0942.txt.

That run's findings were independently re-derived here (same lint output, same

contrast arithmetic, same PASS set) and are carried forward. This run adds six

findings it missed — two of them WCAG Level A, i.e. more severe than the single

P1 it reported — and corrects three of its factual claims. See section 8.

================================================================================

--------------------------------------------------------------------------------

0. SKILL RESOLUTION — BOTH SKILLS UNREACHABLE (reported, not skipped)

--------------------------------------------------------------------------------

Per the gate file's resolution order, applied per skill:

/nextjs-tailwind-design-system-audit

(1) slash, stack-qualified .... UNAVAILABLE. This session's skill list holds

only: deep-research, update-config,

keybindings-help, verify, code-review,

simplify, fewer-permission-prompts, loop,

schedule, claude-api, run, init, review,

security-review.

(2) slash, unqualified ........ UNAVAILABLE (same list).

(3) read_file(".claude/skills/nextjs-tailwind-design-system-audit/SKILL.md")

NOT FOUND.

/nextjs-tailwind-accessibility-audit

(1)(2)(3) ..................... same three-way miss.

Commands actually run:

$ ls -la .claude/skills/ -> no such directory (oms-web has

no .claude/ at all)

$ ls /opt/drcarrot-deploy/.claude/skills/ -> 21 entries, neither audit skill

$ find / -maxdepth 9 -type d -name "*design-system-audit*" -> (no output)

$ find /opt/drcarrot-deploy -name SKILL.md -path "*accessibility-audit*"

-> (no output)

CONSEQUENCE: both audits were executed from the gate file's own scope

definitions (gate lines 30-33) using real tooling, not from injected skill

text. Every finding below is backed by a command actually run against the real

files in this checkout. Any check specified ONLY inside those missing SKILL.md

files was not performed — a real coverage caveat, recorded as SKILL-0.

Same three-way miss as #3244 and #3246. Standing pipeline gap, not transient.

--------------------------------------------------------------------------------

1. SCOPE

--------------------------------------------------------------------------------

56 feature_files declared; all 56 present on disk. 47 auditable code (.tsx/.ts),

3 design/spec docs (used as reference, not audited), 5 test files, 1

tailwind.config.ts (the token source).

Reference design system:

tailwind.config.ts -> theme.extend.colors tokens

app/globals.css -> .btn-*/.field-*/.card/.link

docs/specs/ticket-3248-design.md -> per-component token mapping

docs/design/oms-screens-standalone.html -> raw measured design source

Components outside feature_files but reached from it (Modal, Listbox, DatePicker,

StatusToggle, RepeaterTable, AttachmentChip) are audited where a feature_file

renders them; findings are filed against the feature_file entry point.

--------------------------------------------------------------------------------

2. TOOLS ACTUALLY RUN

--------------------------------------------------------------------------------

(a) Repo's own lint, unmodified:

$ npx next lint --dir app --dir components

-> "No ESLint warnings or errors"

The repo extends only "next/core-web-vitals", which enables ~6 jsx-a11y

rules. A clean run here is NOT an accessibility result.

(b) eslint 8.57.1 + eslint-plugin-jsx-a11y @ plugin:jsx-a11y/strict (the full

set), throwaway /tmp config, plugins resolved against the repo:

$ npx eslint --no-eslintrc -c /tmp/a11y-eslintrc.json \

--resolve-plugins-relative-to . --ext .tsx app components

-> 11 errors. Verbatim:

app/login/page.tsx:30:13 jsx-a11y/no-autofocus

components/forms/ExpenseForm.tsx:207:13

jsx-a11y/label-has-associated-control

components/forms/OrderFulfillmentForm.tsx:178:11

jsx-a11y/label-has-associated-control

components/ui/fields/DatePicker.tsx:237:11

jsx-a11y/interactive-supports-focus

components/ui/fields/Listbox.tsx:187:11, 195:15, 198:17

(3x role/keyboard rules)

components/forms/{Item,Project,Supplier,Uom}Form.tsx

"rule react-hooks/exhaustive-deps

not found" x4

NOT findings: the 4 "rule not found" errors are an artifact of the throwaway

config. app/login/page.tsx is not a feature_file (out of scope).

FALSE POSITIVES: the Listbox x3 and DatePicker x1 — see A11Y-PASS-7/8.

(c) WCAG 2.1 relative-luminance contrast computation (node, sRGB formula,

alpha-composited where a /NN opacity modifier is used) over every token pair

the audited components actually render. Table in section 4.

(d) Compiled-CSS verification, not source reasoning:

$ grep -oh '\.hidden{[^}]*}' .next/**/*.css -> .hidden{display:none}

This is what makes A11Y-10 a measured finding rather than an inference.

(e) Grep sweeps over the 47 code feature_files: raw hex, default-Tailwind-palette

utilities, arbitrary-value utilities, shared-component reuse, StatusBadge

call sites, th/scope, aria-live, file inputs, form-control naming.

--------------------------------------------------------------------------------

3. WHAT PASSED (evidence, not assumption)

--------------------------------------------------------------------------------

DS-PASS-1 Zero raw hex colors in any of the 47 code feature_files. The only

`#[0-9a-f]{3,}` matches were ticket references ("#3247"/"#3248") in

comments — checked individually, all false positives.

DS-PASS-2 Zero default-Tailwind-palette color utilities (slate|gray|zinc|

neutral|stone|red|orange|amber|...|rose + 50..950 across

text-/bg-/border-/fill-/stroke-/ring-/divide-). Every color in scope

resolves to a tailwind.config.ts token. This is unusually clean.

DS-PASS-3 Shared-component reuse across all 9 list screens is complete: each

renders exactly 1 <DataTable> + 1 <ListToolbar>, 0 hand-rolled

<table>. No list screen re-implements the toolbar or table.

DS-PASS-4 DataTable matches the spec's "Shared: Data Table" section exactly:

header bg-accent-subtle, text-accent, px-6 py-3, divide-border-subtle.

DS-PASS-5 The spec's measured values are real, confirmed by grepping the raw

bundle: rgb(34,158,75) x13, rgb(230,247,236) x1, rgb(86,86,86) x19,

rgb(69,40,40) x90, rgb(247,241,233) x58, rgb(18,18,18) x96. The

superseded success value rgb(16,145,44) appears once, supporting the

config's move to #229e4b.

A11Y-PASS-1 RowActions: all three icon controls carry entity-scoped accessible

names (aria-label={`View|Edit|Delete ${entityLabel}`}); icons are

decorative children. This is the correct pattern.

A11Y-PASS-2 Named controls confirmed: SearchInput (aria-label), FilterBar toggle

(aria-label + aria-expanded), AttachmentChip remove

(aria-label={`Remove ${fileName}`}), Modal close, RepeaterTable

"Remove row". Decorative glyphs carry aria-hidden.

A11Y-PASS-3 Modal has a real Escape handler (cleaned up on unmount),

role="dialog", aria-modal="true", aria-label, aria-hidden backdrop.

See A11Y-4 for the half that is missing.

A11Y-PASS-4 No <img> / next/image anywhere in app/ or components/ — the "missing

alt text" class is vacuously clean, not skipped.

A11Y-PASS-5 Zero click handlers on non-interactive elements, with one correct

exception: Modal.tsx:34's aria-hidden backdrop.

A11Y-PASS-6 StatusBadge variant="dot" (Orders list + Order Detail) is NOT a

contrast finding: the dot is aria-hidden and decorative; meaning is

carried by the adjacent text-text label (18.27:1). WCAG 1.4.1 met.

A11Y-PASS-7 Listbox's three jsx-a11y/strict errors are FALSE POSITIVES, verified

by reading the component: it implements the full ARIA 1.2 combobox

pattern — role="combobox" + aria-haspopup + aria-expanded +

aria-controls + aria-activedescendant on the focused trigger, with

ArrowDown/Up/Home/End/Enter/Space/Tab handled in onTriggerKeyDown.

The <li role="option"> click handlers are a pointer affordance layered

on working keyboard operation, not a keyboard gap. No finding raised.

A11Y-PASS-8 DatePicker's jsx-a11y "grid must be focusable" error is likewise a

FALSE POSITIVE: the grid uses a roving tabindex (tabIndex={isFocused

? 0 : -1} on each role="gridcell", line 267) with onGridKeyDown on the

container — focus lives on the cells, which is the correct APG grid

pattern. No finding raised.

--------------------------------------------------------------------------------

4. CONTRAST MEASUREMENTS (WCAG 2.1, computed — not eyeballed)

--------------------------------------------------------------------------------

Ratio Verdict Need Pair

------ -------- ----- ----------------------------------------------------------

3.34 FAIL 4.5 status.warning #e86500 on .card #ffffff (PENDING, text-sm)

3.12 FAIL 4.5 ...same, on hovered row (hover:bg-accent-subtle/60)

3.47 FAIL 4.5 status.success #229e4b on .card #ffffff (APPROVED, text-sm)

3.24 FAIL 4.5 ...same, on hovered row

4.55 pass 4.5 status.danger #de350b on .card #ffffff (REJECTED, text-sm)

4.25 FAIL 4.5 ...same, on hovered row

3.55 FAIL 4.5 status.info #3884ff on #ffffff — .link (globals.css:57)

4.49 FAIL 4.5 text.helper #757575 on bg #fcfcfd, 13px (de-carded form)

4.61 pass 4.5 ...same, on .card #ffffff

2.22 FAIL 3.0 SortIcon inactive fill-accent/40 on accent.subtle (1.4.11)

1.17 FAIL 3.0 border.field #eaeaeb on #ffffff — control boundary (1.4.11)

1.62 n/a 3.0 border.dashed #c9c9c9 on #fcfcfd — decorative, out of scope

1.09 n/a 3.0 border.subtle #f2f2f2 on #fcfcfd — decorative, out of scope

1.12 FAIL 4.5 status.warning on warning/10 (pill variant — NO CALLER)

1.16 FAIL 4.5 status.danger on danger/10 (pill variant — NO CALLER)

1.13 FAIL 4.5 status.neutral on neutral/10 (pill variant — NO CALLER)

1.12 FAIL 4.5 status.info on info/10 (pill variant — NO CALLER)

3.12 FAIL 4.5 status.success on successSubtle (pill variant — NO CALLER)

7.16 PASS 4.5 text.subtle #565656 on bg (FilterBar labels)

6.54 PASS 4.5 text.subtle on accent.subtle (Order Detail card labels)

4.58 PASS 4.5 text.muted #836f6f on bg

11.79 PASS 4.5 accent #452828 on accent.subtle (DataTable header)

18.27 PASS 4.5 text.DEFAULT #121212 on bg

13.23 PASS 4.5 white on accent (btn-primary; FilterBar count badge)

3.46 PASS 3.0 status.info Pencil icon on bg (1.4.11, icons need 3:1)

4.43 PASS 3.0 status.danger Trash2 icon on bg (1.4.11)

18.27 PASS 3.0 text.DEFAULT Eye icon on bg (1.4.11)

11.79 PASS 3.0 SortIcon active fill-accent on accent.subtle (1.4.11)

Which pairs actually render was verified by grepping all 8 StatusBadge call

sites: 5x variant="plain", 2x variant="dot", 1x variant="text"

(app/expenses/page.tsx:29). The default "pill" variant has ZERO callers — its

five failures are latent (DS-8/A11Y-9), not on screen today.

--------------------------------------------------------------------------------

5. MERGED FINDINGS

--------------------------------------------------------------------------------

[accessibility] A11Y-10 — P1 — UNRESOLVED — BLOCKING *** NEW ***

Files : components/forms/ExpenseForm.tsx:170-183

components/forms/OrderFulfillmentForm.tsx:188-201

WCAG : 2.1.1 Keyboard — LEVEL A

Problem: Both file-upload controls are a <label> wrapping

<input type="file" className="hidden">. Verified against the COMPILED

css, not the source: `.hidden{display:none}`. A display:none input is

removed from the tab order and from the accessibility tree; a <label>

element is never in the tab order and neither wrapper carries

tabIndex or a key handler (checked). There is therefore NO keyboard

path to either upload control — a keyboard-only or screen-reader user

cannot attach a file to an expense line or to an order at all.

Severity: the most severe finding in this report. Level A, and it removes a

function outright rather than degrading its presentation.

Why lint missed it: jsx-a11y reasons about JSX semantics and cannot see that a

utility class resolves to display:none. The repo's own `next lint` is

clean here, and so was the strict jsx-a11y run.

Fix shape: replace `hidden` with an sr-only/clip pattern (visually hidden but

focusable), or make the trigger a real <button> that forwards click to

a ref'd input. Mechanical, but a source edit — not applied, see §6.

[accessibility] A11Y-11 — P1 — UNRESOLVED — BLOCKING *** NEW ***

Files : components/forms/ExpenseForm.tsx:123 (Listbox, "Type" column)

components/forms/ExpenseForm.tsx:131-140 (input, "Amount" column)

components/forms/OrderFulfillmentForm.tsx:156-165 ("Fulfillment Qty")

WCAG : 4.1.2 Name, Role, Value — LEVEL A (+ 1.3.1)

Problem: Every editable control inside the Expense Items repeater and the

Order fulfillment table is rendered with no id, no name, no

aria-label and no associated <label>. Confirmed by grep: those three

JSX elements carry none of those attributes.

A column <th> does NOT name a control inside a body cell — table

header association conveys cell context, not an accessible name. So

the Amount and Fulfillment Qty inputs announce as bare "edit text"

with no indication of which line or which field. The Type Listbox

trigger's only content is its own current value, so it announces the

value in place of a name.

Compounded by A11Y-14: RepeaterTable's <th> lack scope="col", so even

the weak header-context path is absent.

Scale : every row of every expense and every order fulfillment — the two

highest-frequency data-entry surfaces in the app.

Fix shape: aria-label={`${col.header} row ${index+1}`} (or a visually-hidden

per-cell label) on each control. Mechanical, but a source edit.

[accessibility] A11Y-1 — P1 — UNRESOLVED — BLOCKING (carried)

File : app/expenses/page.tsx:29 (via components/ui/StatusBadge.tsx:72-74)

WCAG : 1.4.3 Contrast (Minimum), Level AA

Problem: The Expenses Status column renders StatusBadge variant="text", which

colors the label at text-sm/font-medium with no background change.

All three reachable ExpenseStatus values fall below 4.5:1 on the

white table surface:

PENDING status.warning #e86500 -> 3.34:1 (3.12:1 on row hover)

APPROVED status.success #229e4b -> 3.47:1 (3.24:1 on row hover)

REJECTED status.danger #de350b -> 4.55:1 at rest, 4.25:1 on hover

14px non-bold is "normal text" under 1.4.3, so 4.5:1 applies; the 3:1

large-text allowance does not. Note REJECTED passes at rest and fails

on hover — the hover state is not an excuse, it is a state the text is

read in.

Why not auto-fixed: darkening the status palette changes tokens the design

source explicitly measures (rgb(232,101,0)/rgb(34,158,75)/

rgb(222,53,11) all confirmed present in the bundle). Design judgment

call — gate Step 3 excludes it.

Options (all need a design decision): (a) darken the three tokens until >=4.5:1

on white AND on the hovered row; (b) switch the column to a tinted

pill with a darkened foreground; (c) drop to variant="plain"/"dot" so

the label renders in text.DEFAULT and color stops being the carrier.

[accessibility] A11Y-15 — P1 — UNRESOLVED — BLOCKING *** NEW ***

Files : app/orders/page.tsx:29 (Order No column)

app/expense-summary/page.tsx:27 (Project column)

both via app/globals.css:57 (.link)

WCAG : 1.4.3 Contrast (Minimum), Level AA

Problem: `.link` is `text-status-info underline` = #3884ff on the white table

surface -> 3.55:1, below 4.5:1 for the 14px body text it is applied

to. These are the primary drill-in affordances on two list screens.

Note : the persistent underline satisfies 1.4.1 (color is not the sole

carrier of "this is a link") but does nothing for 1.4.3, which is

about legibility of the text itself. The two criteria are independent

and this passes one, fails the other.

Relationship to A11Y-1: same class of defect (a measured design token below

4.5:1 at body size) and the same kind of remedy, but a different

token on different screens — tracked separately so it cannot be

closed implicitly when the status palette is revisited.

Why not auto-fixed: darkening status.info is a design decision; it is also the

Edit-icon color, where it currently passes 1.4.11's 3:1 (3.46:1), so

the change has a second call site to re-verify.

[accessibility] A11Y-12 — P2 — UNRESOLVED *** NEW ***

File : components/ui/FilterBar.tsx:48-64

WCAG : 1.3.1 / 4.1.2

Problem: The filter toggle carries aria-label="Filters". An aria-label

OVERRIDES element content, so the active-count badge rendered inside

the same <button> (lines 59-63) never reaches assistive tech. A

sighted user sees "Filters (2)"; a screen-reader user hears "Filters,

expanded" and has no way to learn that two filters are narrowing the

list they are reading.

Fix shape: aria-label={activeCount ? `Filters, ${activeCount} active`

: "Filters"}. Mechanical, but a source edit.

[accessibility] A11Y-13 — P2 — UNRESOLVED *** NEW ***

Files : components/forms/ExpenseForm.tsx:191,252;

components/forms/OrderFulfillmentForm.tsx:128,203; and every

`field-error` render reached from the audited forms

WCAG : 4.1.3 Status Messages, Level AA

Problem: Grep for aria-live / role="alert" / role="status" across app/ and

components/ returns ZERO matches app-wide. Server-action failures

(state.message) and async upload failures (uploadError — set after a

fetch, with no focus change and no user-initiated re-render) appear as

plain <p> text. Nothing announces them. The upload case is clearest:

the user picks a file, the request fails, a message appears somewhere

on screen, and a screen-reader user is told nothing.

Fix shape: role="alert" on the error paragraphs (or an aria-live="polite"

region). Mechanical, but a source edit.

[accessibility] A11Y-2 — P2 — UNRESOLVED (carried)

File : components/forms/ExpenseForm.tsx:207

WCAG : 1.3.1 / 4.1.2 Tool: jsx-a11y/label-has-associated-control (real)

Problem: <label className="field-label">Date</label> wraps nothing and has no

htmlFor; the DatePicker below it (line 210) is rendered without an id,

so there is no control for it to point at.

Note : the control is disabled and display-only (submitted value is the

hidden input at 192), which is why this is P2 — but a disabled control

is still exposed to AT and still announces nameless.

[accessibility] A11Y-3 — P2 — UNRESOLVED (carried)

File : components/ui/DataTable.tsx:50-66

WCAG : 4.1.2 (ARIA sortable-table pattern)

Problem: Sortable <th> carry scope="col" but no aria-sort. Current sort column

and direction are conveyed ONLY by <SortIcon>, which is correctly

aria-hidden — so a screen-reader user cannot perceive which column is

sorted or in which direction. Affects all 9 list screens.

Fix shape: aria-sort={isActive ? (currentDir === "asc" ? "ascending" :

"descending") : "none"} on the <th>. Also worth giving the sort <Link>

an accessible name that says it sorts; today it is just the header

text, so it announces identically to a non-sortable header.

[accessibility] A11Y-4 — P2 — UNRESOLVED (carried)

File : components/ui/Modal.tsx:32-49, reached from

components/ui/QuickCreateModal.tsx (a feature_file)

WCAG : 2.4.3 Focus Order

Problem: On open, focus is never moved into the dialog; there is no focus trap;

focus is not restored to the trigger on close; the page behind is not

inert/aria-hidden. A keyboard user opening Quick Create must tab

through the whole page behind the overlay to reach the form, and can

tab straight back out of it.

Note : Escape-to-close, role="dialog", aria-modal, aria-label and a labeled

close button ARE present (A11Y-PASS-3). This is the focus-management

half. Weight: QuickCreateModal hosts full entity forms, not a confirm

prompt, so the trapped-focus expectation is stronger here.

[accessibility] A11Y-5 — P2 — UNRESOLVED (carried)

File : components/ui/icons/SortIcon.tsx:14,21

WCAG : 1.4.11 Non-text Contrast

Problem: The inactive arrow pair renders fill-accent/40 -> 2.22:1 against the

accent.subtle header, below the 3:1 required of a graphic conveying a

control's affordance. These arrows are the only visual signal that a

column is sortable at all.

Cross-ref: same root as DS-7 — the spec labels /40 an unverified placeholder.

[design-system] DS-1 — P2 — UNRESOLVED (carried)

File : components/ui/fields/StatusToggle.tsx:24-32

Spec : ticket-3248-design.md §"Shared: Boolean Toggle" (152-166)

Problem: The spec prescribes a toggle switch — 40x24 track, 26x10 rounded rail

at 50% opacity rgb(69,40,40), 24px knob with 16px inner circle,

transition:left 160ms. The implementation is still a plain 16px square

checkbox (`h-4 w-4 rounded border-border text-accent`).

Verified against the raw design source, not just the spec text:

width:40px;height:24px;cursor:pointer;flex-shrink:0

width:26px;height:10px;border-radius:100px;background:rgb(69,40,40)

The spec deferred this to ui_verify as SUBSTANTIALLY_CORRECT_VERIFY_VISUAL;

this measurement IS that verification, and it finds a real gap.

[design-system] DS-2 — P2 — UNRESOLVED (carried)

File : components/ui/AttachmentChip.tsx:36-66 (rendered by ExpenseForm,

OrderFulfillmentForm, expense-summary/[project] — all feature_files)

Spec : ticket-3248-design.md §"Per-view: Attachment Chip" (200-210)

Problem: Three divergences from the spec's measured filled-pill treatment:

(a) geometry — impl `rounded-md px-2 py-1`; spec `rounded-[5px]

px-[9px] py-[5px]`;

(b) icon color — impl `text-text-muted` (#836f6f); spec calls for a

14px file-type icon in accent.DEFAULT rgb(69,40,40). Both tokens

exist; the wrong one is applied;

(c) remove control — impl is lucide's stroke X; spec specifies a

filled-circle X in accent.

The empty-state box (ExpenseForm.tsx:170) DOES match spec exactly —

the divergence is the filled pill only.

[accessibility] A11Y-14 — P3 — UNRESOLVED *** NEW ***

Files : components/ui/RepeaterTable.tsx:45

components/forms/OrderFulfillmentForm.tsx:133-139

WCAG : 1.3.1 Info and Relationships

Problem: Neither table's <th> carries scope="col". DataTable.tsx:52 does — so

this is also an internal inconsistency between three tables in the

same codebase, not only a spec deviation. Contributes to A11Y-11.

[accessibility] A11Y-6 — P3 — UNRESOLVED (carried)

File : components/forms/ExpenseForm.tsx:170

WCAG : 1.4.3 — borderline

Problem: The attachment empty-state "Upload" label is text-[13px]

text-text-helper (#757575) on the de-carded form background (#fcfcfd)

= 4.49:1, marginally under 4.5:1. It measures 4.61:1 on a white .card,

so the shortfall is a consequence of #3248's de-carding, not of the

token. Flagged rather than waived because conformance tools report

4.49 as FAIL.

[accessibility] A11Y-7 — P3 — UNRESOLVED (carried)

File : components/forms/OrderFulfillmentForm.tsx:178

WCAG : 1.3.1 Tool: jsx-a11y/label-has-associated-control (real)

Problem: <label className="field-label">Attachments</label> labels a group (a

<ul> of chips + an upload trigger), not a single control. Should be a

heading or fieldset/legend, or .field-label styling on a plain element.

[accessibility] A11Y-8 — P3 — UNRESOLVED (carried)

File : app/globals.css:29 (.field-input) + components/ui/fields, reached from

every audited form

WCAG : 1.4.11 Non-text Contrast

Problem: border.field #eaeaeb on #ffffff = 1.17:1. Text inputs, Listbox and

DatePicker triggers are white-on-white with only this border to

identify them as controls, which is what 1.4.11 covers. Inherited from

#3247's C8 three-grey decision and measured from the design, so a

design decision — recorded, not silently accepted.

[accessibility] A11Y-9 — P3 — UNRESOLVED (latent) (carried)

File : components/ui/StatusBadge.tsx:17-27, 85-94

Problem: The DEFAULT variant ("pill") pairs each tone with a /10 tint of its

own color -> 1.12-1.16:1, unreadable. All 8 call sites pass an explicit

variant, so nothing renders it today; but "pill" being the default

means the next caller that omits `variant` silently ships an

unreadable badge. Latent, not live.

[accessibility] SKILL-0 — P3 — COVERAGE CAVEAT

Neither audit skill was reachable through any of the gate's three resolution

paths (§0). Both audits ran from the gate file's own scope definitions. Checks

specified only inside those SKILL.md files were not performed. Third

consecutive ticket (#3244, #3246, #3248) with this miss.

[design-system] DS-3 — P3 — UNRESOLVED (carried)

Files : ExpenseForm.tsx:273, OrderForm.tsx:170, OrderFulfillmentForm.tsx:221

Spec : ticket-3248-design.md:178 — action buttons pinned bottom-LEFT

(`flex gap-3 mt-6`), explicitly "not justify-end"

Problem: Two variants of the same pattern coexist. The 5 master forms were

converted to `flex gap-3 mt-6`; the three Order/Expense forms still

render `flex justify-end gap-2`. The spec says the "same fix" applies

to ExpenseForm and OrderFulfillmentForm — incomplete rollout, not an

intentional per-family variant.

[design-system] DS-4 — P3 — UNRESOLVED (carried)

Files : max-w-[772px] — ItemForm:64, ProjectForm:48, SupplierForm:59,

UomForm:49, UserForm:63

max-w-3xl (768px) — ExpenseForm:190, OrderForm:107,

OrderFulfillmentForm:97

Problem: Two container widths 4px apart for the same "top-level form" role.

772px is the spec's measured value; max-w-3xl is the pre-existing

Tailwind scale value. Neither is wrong alone; the inconsistency is,

and 4px will not read as intentional to a later maintainer.

[design-system] DS-5 — P3 — UNRESOLVED (carried)

Files : TextField.tsx:25, ItemForm:56, ProjectForm:40, SupplierForm:50,

UomForm:41, UserForm:56

Problem: The de-carded field width `w-[350px]` is hand-repeated in 6 places

with no shared class or theme extension. Candidate for a `.field-col`

component class in globals.css alongside .field-input/.field-label.

[design-system] DS-6 — P3 — UNRESOLVED (carried)

File : components/forms/OrderFulfillmentForm.tsx:130-174

Problem: Hand-rolls a <table> while components/ui/RepeaterTable.tsx exists and

is used for exactly this shape by OrderForm:162 and ExpenseForm:246.

Reuse gap only — the hand-rolled markup matches RepeaterTable's own

styling, so no visual divergence today. Mitigating: the fulfillment

table has fixed rows and no add/remove affordance, which is

RepeaterTable's core feature, so the reuse is not free.

Note : the divergence is not purely cosmetic after all — see A11Y-14, where

the hand-rolled table and RepeaterTable share the same scope="col" gap

while DataTable does not.

[design-system] DS-7 — P3 — UNRESOLVED (carried)

File : components/ui/icons/SortIcon.tsx:14,21

Spec : ticket-3248-design.md:115 — unmapped token #8, "verify against

design's inactive-arrow state before implementing"

Problem: `fill-accent/40` is still the spec's own placeholder; never measured

against a design source, and the component's doc comment says so. The

bundle grep did not surface an unambiguous inactive-arrow example

either. Carries a real consequence (A11Y-5, 2.22:1 vs 1.4.11's 3:1),

so not purely cosmetic bookkeeping.

[design-system] DS-8 — P3 — UNRESOLVED (carried)

File : components/ui/StatusBadge.tsx:65

Problem: `variant = "pill"` is the default, has zero callers, and its tint

scheme is unreadable (A11Y-9). A default nothing uses and that would

fail contrast if anything did is a trap. Either make `variant`

required or re-point the default at "plain".

--------------------------------------------------------------------------------

6. AUTO-FIX (gate Step 3) — NONE APPLIED

--------------------------------------------------------------------------------

This node's environment contract states it has no write access to source, and no

source file was modified. The only files written are this evidence file and the

preserved copy of the prior run.

CORRECTION to the prior run: it justified applying no fixes by asserting source

files are "read-only ... by design" as though enforced. They are not — a write

probe on components/ui/DataTable.tsx SUCCEEDED. The constraint is a contract this

node is honoring, not a filesystem lock. Anyone reading that section should know

the distinction, because it changes what a future run of this node could do.

(Disclosure: that probe was `touch`, which altered the file's mtime and nothing

else. `git status --porcelain` and `git diff` on that path are both empty —

content is byte-identical. Using a real source file as the probe target was

careless; a temp path would have answered the same question.)

Findings that WOULD qualify as "clearly safe" under Step 3 (mechanical, no design

judgment) if this node were permitted to edit source — this list is now

substantially longer than the prior run's two, because four of the five new

findings are mechanical:

- A11Y-10 swap `hidden` for an sr-only/focusable pattern on both file inputs

- A11Y-11 add aria-label to the three unnamed repeater/fulfillment controls

- A11Y-12 make FilterBar's aria-label include the active count

- A11Y-13 add role="alert" to the async error paragraphs

- A11Y-14 add scope="col" to RepeaterTable + OrderFulfillmentForm <th>

- A11Y-3 add aria-sort to DataTable's sortable <th>

- A11Y-2 give DatePicker an id at ExpenseForm:210 and htmlFor at :207

Fixing all seven would clear A11Y-10 and A11Y-11 but NOT A11Y-1 (needs a color

decision), so the gate would still FAIL. The verdict does not hinge on the

write-access question.

--------------------------------------------------------------------------------

7. VERDICT

--------------------------------------------------------------------------------

P1: 4 A11Y-10 (WCAG 2.1.1 Level A — keyboard-inaccessible file upload)

A11Y-11 (WCAG 4.1.2 Level A — unnamed repeater/fulfillment controls)

A11Y-1 (WCAG 1.4.3 AA — Expenses Status column contrast)

A11Y-15 (WCAG 1.4.3 AA — .link 3.55:1 on Orders / Expense Summary)

P2: 8 A11Y-2, A11Y-3, A11Y-4, A11Y-5, A11Y-12, A11Y-13, DS-1, DS-2

P3: 12 A11Y-6, A11Y-7, A11Y-8, A11Y-9, A11Y-14, SKILL-0,

DS-3, DS-4, DS-5, DS-6, DS-7, DS-8

gate_status = FAIL

Rationale (gate Step 4): "PASS only if zero unresolved P1 findings remain

across both audits. Any unresolved accessibility P1 (WCAG failure) blocks

regardless of what the design-system audit found."

All four P1s are accessibility; two are Level A. The design-system side of

this ticket is genuinely strong — zero raw hex, zero off-palette colors,

complete shared-component reuse across all 9 list screens, DataTable matching

spec exactly — and per the rule above that does not rescue the gate.

--------------------------------------------------------------------------------

8. DELTA VS THE PRIOR RUN AT THIS SAME COMMIT

--------------------------------------------------------------------------------

Preserved at: docs/gate-evidence/design-consistency-audit-3248.prior-run-0942.txt

Reproduced and carried forward (independently re-derived, not copied on trust):

the 11-error jsx-a11y run, the contrast arithmetic, DS-PASS-1..5,

A11Y-PASS-1..7, and findings A11Y-1..9 and DS-1..8.

ADDED (6 findings it missed):

A11Y-10 P1 keyboard-inaccessible file upload (WCAG 2.1.1, Level A)

A11Y-11 P1 unnamed controls in both editable tables (WCAG 4.1.2, Level A)

A11Y-15 P1 .link 3.55:1 on Orders / Expense Summary (WCAG 1.4.3, AA)

A11Y-12 P2 FilterBar active count never announced

A11Y-13 P2 no live regions anywhere; async errors silent (WCAG 4.1.3)

A11Y-14 P3 missing scope="col" on two of three tables

Common thread for five of the six: they are defects neither jsx-a11y nor a

token-by-token contrast sweep can surface — they need reading the component's

runtime behavior. The prior run leaned on its two tool outputs and found what

those tools find. A11Y-15 is the exception and the more basic miss: it is a

plain contrast failure on a token the prior run simply never measured.

CORRECTED:

- Its §7 P3 count was self-contradictory (header said 8, body listed 11, a note

conceded the discrepancy). Recounted here: 12, itemised above.

- Its §6 claim that source is read-only "by design" as an enforced property is

factually wrong (write probe succeeded). See §6.

- It measured border.subtle and border.dashed against 1.4.11 and then correctly

excluded them as decorative; this run marks them n/a in the table rather than

FAIL, so the table's FAIL column means "in scope and failing".

- It omitted .link (#3884ff, 3.55:1) from the contrast table entirely, and so

never raised the finding. Added here as A11Y-15, tracked as its own P1

rather than merged into A11Y-1 — different token, different screens, and

merging it would let it be closed implicitly when the status palette is

revisited.

ADDED PASS (not in the prior run):

A11Y-PASS-8 DatePicker's jsx-a11y grid error is a false positive (roving

tabindex verified at line 267) — the prior run listed the error in

its tool output but never adjudicated it either way.

--------------------------------------------------------------------------------

9. STEP 5 (REDMINE NOTE) — NOT POSTED

--------------------------------------------------------------------------------

The gate's Step 5 curl requires $REDMINE_URL and $TASK_ID. Both are unset in this

environment ($REDMINE_API_KEY is set, but a key alone cannot address an issue).

No note was posted, and no URL or issue id was guessed. Posting is outward-facing

and would need the correct target confirmed first.

Note that would be posted, once those are supplied:

"Claude - Opus: Gate 6 — Design Consistency Audit: FAIL (3 P1, 8 P2, 12 P3)"

================================================================================