Skip to content

feat(ui): harden design-system a11y contracts (cn, warning contrast, MissingValue, forced-colors, LinkAction) - #1841

Merged
BigSimmo merged 3 commits into
mainfrom
codex/implement-design-system-code-contracts
Aug 12, 2026
Merged

feat(ui): harden design-system a11y contracts (cn, warning contrast, MissingValue, forced-colors, LinkAction)#1841
BigSimmo merged 3 commits into
mainfrom
codex/implement-design-system-code-contracts

Conversation

@BigSimmo

Copy link
Copy Markdown
Owner

Motivation

  • Converge the five DS tasks into a small, backwards-safe set of fixes that preserve existing contracts for class merging, status colour usage, narrow-view readability, forced-colours selector specificity, and LinkAction tone handling.
  • Prevent regressions where truncated dense previews or missing contrast would reduce accessibility at small viewports or under forced-colors.

Description

  • Preserve call-site intent in dense table previews by rendering empty dense cells with whitespace-normal break-words text-2xs leading-4 instead of a blind truncate, while leaving populated cells truncating as before (src/components/AccessibleTable.tsx).
  • Add a focused jsdom unit test that asserts MissingValue phrases remain explicit, wrap, and are not truncated in the dense 320px preview (tests/accessible-table.dom.test.tsx).
  • Add an explicit contrast assertion ensuring the --warning body-text token meets WCAG AA against the default surface in both themes (tests/design-token-contract.test.ts).
  • Leave cn()/tailwind-merge and LinkAction tone contracts intact and rely on existing tests that assert last-wins merging and tone rejection via type-level and render assertions (no behavioural change to cn() or LinkAction source files).
  • Files changed: src/components/AccessibleTable.tsx, tests/accessible-table.dom.test.tsx, and tests/design-token-contract.test.ts.

Testing

  • Ran targeted unit suites: tests/tailwind-merge-config.test.ts, tests/design-token-contract.test.ts, tests/ckb-v2-token-contract.test.ts, tests/accessible-table.dom.test.tsx, and tests/ui-v2-components.dom.test.tsx, with all tests passing (5 files, 182 tests passed).
  • Ran design-system contract and adoption checks (npm run check:design-system-contract, npm run check:design-system-adoption, npm run check:design-sync-contract) and received successful pass reports from the contract scripts.
  • Ran lint and format (npm run lint, npm run format) and fixed/synchronized generated docs via pre-commit hooks; both checks completed without failures.
  • Ran the Playwright style-contract e2e lane (npm run test:e2e:style-contract) that verified forced-colors mappings and unlayered rule behaviour and returned all style-contract checks passing (7 Chromium checks passed).
  • Started the local app with npm run ensure to validate runtime identity and the server reported its repo-selected URL; git diff --check reported no whitespace or check failures.

All automated checks executed here succeeded; no provider-backed PR creation or remote pushes were performed in this environment.


Codex Task

@coderabbitai

coderabbitai Bot commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in: 34 minutes

Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d08286ff-0da9-488a-8f5e-002723724975

📥 Commits

Reviewing files that changed from the base of the PR and between 3673c7b and 87aa1c7.

📒 Files selected for processing (3)
  • src/components/AccessibleTable.tsx
  • tests/accessible-table.dom.test.tsx
  • tests/design-token-contract.test.ts

Comment @coderabbitai help to get the list of available commands.

@supabase

supabase Bot commented Aug 12, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Hardens design-system accessibility contracts for dense table missing values and warning-token contrast.

Changes:

  • Prevents missing-value phrases from truncating in dense previews.
  • Adds focused DOM coverage for wrapping behavior.
  • Enforces WCAG AA warning-text contrast across themes.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
src/components/AccessibleTable.tsx Wraps empty dense cells while preserving populated-cell truncation.
tests/accessible-table.dom.test.tsx Tests explicit, non-truncated missing values.
tests/design-token-contract.test.ts Verifies warning-text contrast against default surfaces.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

BigSimmo pushed a commit that referenced this pull request Aug 12, 2026
Checked all 12 open PRs and mapped them to ledger rows. Twenty-four open rows
are actively being fixed right now — #1835 (7 rows), #1840 (4), #1842 (6),
#1841 (4), #1836 (2), #1837 (1), #1839 (1) — and none of those rows said so.

This is the #292 failure mode with the safety off: a queued row that reads as
unclaimed while a PR is open against it is how the same conversion shipped
twice on 2026-08-09. Each row now names its PR and says not to start until
that PR merges.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017paT42ZVMf8jaLtkjFxdy5
@github-actions

github-actions Bot commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

CI triage

CI failed on this PR. Automated classification of the 2 failed job(s):

  • Production UI (1)needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
  • PR requiredneeds investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.

Compared with main CI run #9924 (success).

Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger.

@BigSimmo
BigSimmo enabled auto-merge August 12, 2026 14:41
@BigSimmo
BigSimmo force-pushed the codex/implement-design-system-code-contracts branch from afa7b49 to c3f1ba1 Compare August 12, 2026 16:52
@BigSimmo
BigSimmo disabled auto-merge August 12, 2026 18:29
@BigSimmo
BigSimmo enabled auto-merge August 12, 2026 18:35
@BigSimmo
BigSimmo merged commit be5c7f5 into main Aug 12, 2026
26 checks passed
@BigSimmo
BigSimmo deleted the codex/implement-design-system-code-contracts branch August 12, 2026 18:48
BigSimmo pushed a commit that referenced this pull request Aug 14, 2026
…s instrument now exists

Four corrections, queued as immutable inbox requests.

#235, #237 and #238 each had a `done` queued in PR #1940 and cancelled on
review. The cancellations were right: all three ask for visual or browser
proof and were closed on executable evidence. Each row now records the
attempt, the reason it was refused, and a Stop rule naming the evidence
class that must not be used again — so the next reader does not repeat it:

- #235: section 7.1 opens with "records executable evidence RATHER THAN
  committing image baselines", so the section that looks like the evidence
  says in its first line that it is not
- #237: jsdom does not lay out text, so a 320px assertion proves the string
  is present, not that it fits
- #238: the risk is ancestor-scoped CSS/contain/transform on five specific
  host surfaces, which no Sheet component test can see

All three also drop their IN FLIGHT do-not-start prefix; PRs #1841 and
#1842 have merged, so the warning was blocking rather than protecting.

#231's "Next: instrument and reproduce" is stale — commit a3bc4da added
scripts/probe-generation-quality.ts and adjudicated PR #1861 as superseded
for phase 1. The row now says so, so nobody reviews #1861 as the live fix
or rebuilds the probe. Next is running it where credentials exist.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017paT42ZVMf8jaLtkjFxdy5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants