Repository navigation
Accessibility: landmarks, contrast, progress, focus and announcements - #14
Merged
Merged
Conversation
From an axe-core audit (WCAG 2.2 AA plus best practices), now run in CI by e2e/a11y.spec.ts in light and dark mode: - Content sits in a <main> landmark; the drag overlay is aria-hidden. - Secondary grey text was 4.17:1 in dark mode (neutral-500 on neutral-950); it's now neutral-400 there. The Output toggle's unselected option was 4.36:1 in light mode; now neutral-600. The row's Remove icon was 2.5:1, under the 3:1 for non-text; now neutral-500. - Progress bars are progressbars, named after their file, with "3 of 6 files" as their value. - Transitions are off under prefers-reduced-motion. - Removing a row moves focus to the Remove button in its place, or to the drop zone once the list is empty; Clear does the same. - "Copied" is announced through a hidden live region. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01STHRjFYWhkJBxSKG3tJdap
ubuntu-latest moved to 26.04, which Playwright 1.58.2 can't install browsers on, so every run failed at the install step. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01STHRjFYWhkJBxSKG3tJdap
Deploying image-optimizer with
|
| Latest commit: |
d00487d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://66502f93.image-optimizer-7ba.pages.dev |
| Branch Preview URL: | https://fix-a11y.image-optimizer-7ba.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The accessibility follow-ups queued behind the last batch of PRs, plus contrast failures the earlier audit missed.
Contrast: a correction
In #12 I said the audit found no colour-contrast failures. That was wrong. The axe version I ran then (4.10) seems not to read Tailwind v4's
oklch()colours, so it skipped them. axe 4.14 reads them and found:neutral-500onneutral-950)neutral-400, about 7:1neutral-500onneutral-100)neutral-600, about 7:1neutral-400on white)neutral-500, 4.7:1AA needs 4.5:1 for text. In dark mode the secondary text is slightly brighter; nothing else looks different.
The rest
<main>. The drag overlay isaria-hidden, since it's only a visual cue.role="progressbar", named "Processing photo.jpg", with "3 of 6 files" as their value.prefers-reduced-motion.Tests
e2e/a11y.spec.tsruns axe (WCAG 2.2 AA plus best practices) in light and dark mode at four stages:@axe-core/playwright4.14.0 (MPL-2.0), pinned.Includes #13
This carries the same one-line CI fix as #13 (pinning Ubuntu 24.04), so its CI can run. The two merge cleanly in either order.
🤖 Generated with Claude Code
https://claude.ai/code/session_01STHRjFYWhkJBxSKG3tJdap