Skip to content

Commit 9d8e38b

Browse files
altaywtfaltaywtf
committed
test(a11y): enforce contrast checks
1 parent 7349789 commit 9d8e38b

6 files changed

Lines changed: 28 additions & 12 deletions

File tree

‎system/design-system.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -547,6 +547,10 @@
547547
.contract .consume pre .c { color: var(--ink-meta); }
548548
.contract .consume pre .k { color: var(--accent); }
549549
.contract .consume pre .s { color: var(--green-solid); }
550+
pre[tabindex="0"]:focus-visible {
551+
outline: none;
552+
box-shadow: var(--shadow-focus);
553+
}
550554

551555
/* ===================================================================
552556
PART / SECTION / SUB-HD — section header hierarchy
@@ -2168,6 +2172,14 @@ <h3>Specimen file map</h3>
21682172
}));
21692173
})();
21702174

2175+
/* Keyboard access for horizontally scrollable code snippets. */
2176+
(function () {
2177+
document.querySelectorAll('pre').forEach((pre) => {
2178+
pre.setAttribute('tabindex', '0');
2179+
if (!pre.hasAttribute('aria-label')) pre.setAttribute('aria-label', 'Scrollable code example');
2180+
});
2181+
})();
2182+
21712183
/* ---- Theme toggle ----
21722184
One token-driven design system. .dark on <html> = dark mode, no class = light.
21732185
Same markup, same components, same preview layout — only token values change.

‎system/preview/_components.css‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,16 +62,20 @@ button i { font-size: 14px; line-height: 1; display: inline-flex; }
6262
--*-foreground tokens in tokens.css; kept inline for performance. */
6363
.btn-primary { background: var(--yellow-solid); border-color: var(--yellow-solid); color: #000; }
6464
.btn-primary:hover { background: var(--yellow-solid-hover); border-color: var(--yellow-solid-hover); }
65-
.btn-success { background: var(--green-solid); border-color: var(--green-solid); color: #fff; }
66-
.btn-success:hover { background: var(--green-solid-hover); border-color: var(--green-solid-hover); }
67-
.btn-danger { background: var(--red-solid); border-color: var(--red-solid); color: #fff; }
68-
.btn-danger:hover { background: var(--red-solid-hover); border-color: var(--red-solid-hover); }
65+
.btn-success { background: var(--green-text-secondary); border-color: var(--green-text-secondary); color: #fff; }
66+
.btn-success:hover { background: var(--green-text-secondary); border-color: var(--green-text-secondary); }
67+
.btn-danger { background: var(--red-text-secondary); border-color: var(--red-text-secondary); color: #fff; }
68+
.btn-danger:hover { background: var(--red-text-secondary); border-color: var(--red-text-secondary); }
6969
.btn-info { background: var(--solid); border-color: var(--solid); color: #fff; }
7070
.btn-info:hover { background: var(--solid-hover); border-color: var(--solid-hover); }
7171
.btn-invert { background: var(--text); border-color: var(--border); color: var(--app-bg); }
7272
.btn-invert:hover { border-color: var(--border-hover); }
7373
.btn-default { background: var(--component-bg); border-color: var(--border); color: var(--text); }
7474
.btn-default:hover { background: var(--component-bg-hover); border-color: var(--border-hover); }
75+
html.dark .btn-success { background: var(--green-border-hover); border-color: var(--green-border-hover); }
76+
html.dark .btn-success:hover { background: var(--green-border-hover); border-color: var(--green-border-hover); }
77+
html.dark .btn-danger { background: var(--red-border-hover); border-color: var(--red-border-hover); }
78+
html.dark .btn-danger:hover { background: var(--red-border-hover); border-color: var(--red-border-hover); }
7579

7680
/* States */
7781
button:disabled { opacity: 0.3; cursor: not-allowed; }

‎system/preview/components-buttons.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
.preview-shell { padding: 24px; display:flex; flex-direction:column; gap: 18px; }
4141
.btn-row { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
4242
.label { font-size: 12.5px; font-weight: 500; color: var(--text); }
43-
.label small { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--text-secondary); opacity: 0.7; }
43+
.label small { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
4444
.note { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; max-width: 760px; }
4545
.note code { font-family: var(--font-mono); color: var(--yellow-solid); font-size: 11.5px; }
4646
.note b { color: var(--text); font-weight: 500; }
@@ -164,12 +164,12 @@
164164
<button class="btn-primary" disabled>Disabled</button>
165165
<button class="btn-primary is-loading">Saving…</button>
166166
<button class="btn-danger" disabled>Delete forever</button>
167-
<button class="btn-danger is-loading">Deleting…</button>
167+
<button class="btn-danger is-loading" aria-label="Deleting"></button>
168168
<button class="btn-default">Tab to focus me</button>
169169
</div>
170170

171171
<div class="tip">
172-
<b>Accessibility floor.</b> White-on-green and white-on-red sit at 3.2–3.9 contrast — they only pass WCAG as <em>large text</em> (≥14px medium uppercase). <b>Never use <code>btn-sm</code> or <code>btn-xs</code> for <code>btn-success</code>, <code>btn-danger</code>, or <code>btn-info</code>.</b> For tight rows use <code>btn-primary</code> (yellow on black = 14:1 AAA at any size) or <code>btn-default</code>. See the <em>Accessibility audit</em> preview.
172+
<b>Accessibility floor.</b> Filled status buttons use darker status roles than badges so white text passes WCAG AA at normal button sizes. <b>Never reuse badge fills for button backgrounds.</b> For tight rows use <code>btn-primary</code> (yellow on black = 14:1 AAA at any size) or <code>btn-default</code>. See the <em>Accessibility audit</em> preview.
173173
</div>
174174
</div>
175175

‎system/preview/components-form-fields.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@
198198
cursor: pointer;
199199
}
200200
.date-pop .day:hover { background: var(--component-bg-hover); }
201-
.date-pop .day.muted { color: var(--text-secondary); opacity: 0.4; }
201+
.date-pop .day.muted { color: var(--text-secondary); }
202202
.date-pop .day.in-range { background: var(--yellow-component-bg); border-radius: 0; }
203203
.date-pop .day.start { background: var(--yellow-solid); color: #000; font-weight: 500; border-top-right-radius: 0; border-bottom-right-radius: 0; }
204204
.date-pop .day.end { background: var(--yellow-solid); color: #000; font-weight: 500; border-top-left-radius: 0; border-bottom-left-radius: 0; }

‎system/preview/mobile-shell.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -478,7 +478,7 @@
478478
color: #fff; cursor: pointer;
479479
}
480480
.swipe-row .actions .share { background: var(--solid); }
481-
.swipe-row .actions .del { background: var(--red-solid); }
481+
.swipe-row .actions .del { background: var(--red-border-hover); }
482482

483483
/* Toast */
484484
.m-toast {
@@ -579,7 +579,7 @@ <h1>Films</h1>
579579
<i class="ph ph-magnifying-glass"></i>
580580
<span style="color: var(--text-secondary);">Search in Films</span>
581581
</div>
582-
<div class="ios-list">
582+
<div class="ios-list" tabindex="0" aria-label="iOS file list">
583583
<div class="li">
584584
<i class="ph-fill ph-folder glyph fldr"></i>
585585
<div class="nm">2024<small>12 items</small></div>
@@ -648,7 +648,7 @@ <h4>iOS · SwiftUI</h4>
648648
<i class="ph ph-magnifying-glass"></i>
649649
<span class="pl">Search files and folders</span>
650650
</div>
651-
<div class="a-list">
651+
<div class="a-list" tabindex="0" aria-label="Android file list">
652652
<div class="a-li">
653653
<i class="ph-fill ph-folder glyph fldr"></i>
654654
<div class="nm">Films<small>168 items · 412 GB</small></div>

‎tests/e2e/design-system.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ test.describe("design.put.io static guide", () => {
5050
test(`${pagePath} has no serious automated accessibility violations`, async ({ page }, testInfo) => {
5151
test.skip(testInfo.project.name !== "chromium-desktop", "Axe coverage runs once; render smoke covers TV framing.");
5252
await page.goto(pagePath, { waitUntil: "domcontentloaded" });
53-
const builder = new AxeBuilder({ page }).disableRules(["color-contrast", "scrollable-region-focusable"]);
53+
const builder = new AxeBuilder({ page });
5454
if (pagePath.startsWith("/design-system")) {
5555
builder.exclude("iframe");
5656
}

0 commit comments

Comments
 (0)