================================================================================ 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 + 1 , 0 hand-rolled . 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 / 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
  • 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
    • 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 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 carry scope="col" but no aria-sort. Current sort column and direction are conveyed ONLY by , 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 . Also worth giving the sort 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 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: labels a group (a
      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 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
      - A11Y-3 add aria-sort to DataTable's sortable - 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)" ================================================================================