admin/0pt
5
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): ta bort alfa-tonad textfärg — 82 kontrastöverträdelser (UI-09) #121

Merged
admin merged 1 commits from fix/0pt-contrast-a11y-20260927 into main 2026-09-27 00:48:46 +00:00
Conversation 1 Commits 1 Files Changed 15
+97 -15
admin commented 2026-09-26 23:28:23 +00:00
Owner
Copy Link
Copy Source

Vad

Tar bort alfa-tonad textfärg i 0pt och lägger en blockerande grind så att formen inte kan komma tillbaka.

Varför

axe-core 4.10.2 mot 0pt.app 2026-09-26 (fynd UI-09): en enda regel — color-contrast, impact=serious, 82 noder. Estatets största enskilda a11y-defekt. Alla 82 har samma form: en Tailwind-alfamodifierare på en textfärg.

Uppmätt WCAG 2.2-kontrast mot bägge temabakgrunderna i styles/globals.css (--background oklch(1 0 0) / oklch(0.145 0 0)):

Klass Ljust Mörkt AA (4.5:1)
text-muted-foreground 4.73:1 7.63:1 ✅
text-muted-foreground/70 2.71:1 4.20:1 ❌
text-muted-foreground/60 2.29:1 3.37:1 ❌
text-muted-foreground/50 1.96:1 2.67:1 ❌
text-muted-foreground/40 1.69:1 2.11:1 ❌
text-foreground/20 1.57:1 1.74:1 ❌

Den omodifierade token klarar AA i bägge teman. Åtgärden är därför helt enkelt att aldrig tona den.

Hur

Elva textställen bytte till text-muted-foreground. Dessutom:

  • app/portal/page.tsx — kopieringsknappen gick från 1.57:1 i viloläge till 4.73:1, och hover till 19.79:1. Den föll även 1.4.11 för icke-textkomponenter (3:1), inte bara 1.4.3.
  • components/ui/toast.tsx — stängknappens ikon klarade redan 1.4.11 (3.71:1 ljust) men blir 4.73:1.
  • app/bestall/page.tsx — den dekorativa masthead-siffran behåller sin /10 och rörs inte. Den bär redan aria-hidden + select-none + pointer-events-none, är undantagen av både WCAG och axe, och grinden nedan tillåter den på exakt den grunden.

Grinden

scripts/ci/check-text-contrast.mjs, blockerande i quality-jobbet (pnpm run check:contrast). Den flaggar varje text-<token>/<alfa> i .tsx/.ts/.css utom där elementet deklarerar aria-hidden.

Grinden hittade fyra ställen till som axe aldrig nådde (/portal ingick inte i sondningen). Alla fyra är åtgärdade i denna PR.

Detta är avsiktligt inte en axe-körning. Den fullständiga axe-jobb som UI-09 också begär kräver build + serve i CI och spåras separat. Tills det finns stoppar källkodsgrinden regressionen vid den form som orsakade defekten.

Verifiering

  • ✅ node scripts/ci/check-text-contrast.mjs → no alpha-faded text colours
  • ✅ ci.yml parsar som YAML
  • Kontrastvärdena ovan är räknade ur repots egna oklch-token, inte uppskattade.

🤖 Generated with Claude Code

## Vad Tar bort alfa-tonad textfärg i 0pt och lägger en blockerande grind så att formen inte kan komma tillbaka. ## Varför axe-core 4.10.2 mot `0pt.app` 2026-09-26 (fynd **UI-09**): **en enda regel — `color-contrast`, impact=serious, 82 noder.** Estatets största enskilda a11y-defekt. Alla 82 har samma form: en Tailwind-alfamodifierare på en textfärg. Uppmätt WCAG 2.2-kontrast mot bägge temabakgrunderna i `styles/globals.css` (`--background` `oklch(1 0 0)` / `oklch(0.145 0 0)`): | Klass | Ljust | Mörkt | AA (4.5:1) | |---|---|---|---| | `text-muted-foreground` | **4.73:1** | **7.63:1** | ✅ | | `text-muted-foreground/70` | 2.71:1 | 4.20:1 | ❌ | | `text-muted-foreground/60` | 2.29:1 | 3.37:1 | ❌ | | `text-muted-foreground/50` | 1.96:1 | 2.67:1 | ❌ | | `text-muted-foreground/40` | 1.69:1 | 2.11:1 | ❌ | | `text-foreground/20` | 1.57:1 | 1.74:1 | ❌ | Den omodifierade token klarar AA i bägge teman. Åtgärden är därför helt enkelt att aldrig tona den. ## Hur Elva textställen bytte till `text-muted-foreground`. Dessutom: - **`app/portal/page.tsx`** — kopieringsknappen gick från **1.57:1** i viloläge till **4.73:1**, och hover till 19.79:1. Den föll även 1.4.11 för icke-textkomponenter (3:1), inte bara 1.4.3. - **`components/ui/toast.tsx`** — stängknappens ikon klarade redan 1.4.11 (3.71:1 ljust) men blir 4.73:1. - **`app/bestall/page.tsx`** — den dekorativa masthead-siffran behåller sin `/10` och rörs inte. Den bär redan `aria-hidden` + `select-none` + `pointer-events-none`, är undantagen av både WCAG och axe, och grinden nedan tillåter den på exakt den grunden. ## Grinden `scripts/ci/check-text-contrast.mjs`, blockerande i `quality`-jobbet (`pnpm run check:contrast`). Den flaggar varje `text-<token>/<alfa>` i `.tsx/.ts/.css` utom där elementet deklarerar `aria-hidden`. Grinden hittade **fyra ställen till** som axe aldrig nådde (`/portal` ingick inte i sondningen). Alla fyra är åtgärdade i denna PR. Detta är avsiktligt **inte** en axe-körning. Den fullständiga axe-jobb som UI-09 också begär kräver build + serve i CI och spåras separat. Tills det finns stoppar källkodsgrinden regressionen vid den form som orsakade defekten. ## Verifiering - ✅ `node scripts/ci/check-text-contrast.mjs` → `no alpha-faded text colours` - ✅ `ci.yml` parsar som YAML - Kontrastvärdena ovan är räknade ur repots egna oklch-token, inte uppskattade. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
admin added 1 commit 2026-09-26 23:28:23 +00:00
fix(a11y): ta bort alfa-tonad textfärg — 82 kontrastöverträdelser (UI-09)
CI (SIAX Cloud) / integration (push) Skipped
Details
masterplan-lock / check (push) Successful in 7s
Details
Security Scan (SIAX Cloud) / security (push) Successful in 20s
Details
CI (SIAX Cloud) / security (push) Successful in 47s
Details
masterplan-lock / check (pull_request) Successful in 10s
Details
CI (SIAX Cloud) / quality (push) Successful in 1m11s
Details
Security Scan (SIAX Cloud) / security (pull_request) Successful in 32s
Details
CI (SIAX Cloud) / security (pull_request) Successful in 42s
Details
CI (SIAX Cloud) / integration (pull_request) Successful in 56s
Details
CI (SIAX Cloud) / quality (pull_request) Successful in 59s
Details
e3930aa633 
axe-core 4.10.2 mot 0pt.app 2026-09-26: en enda regel, color-contrast,
impact=serious, 82 noder. Estatets största enskilda a11y-defekt. Alla 82
har samma form: en Tailwind-alfamodifierare på en textfärg.

Uppmätt WCAG 2.2-kontrast mot bägge temabakgrunderna i styles/globals.css:

  text-muted-foreground        4.73:1 ljust   7.63:1 mörkt   GODKÄNT
  text-muted-foreground/70     2.71:1         4.20:1         faller
  text-muted-foreground/60     2.29:1         3.37:1         faller
  text-muted-foreground/50     1.96:1         2.67:1         faller
  text-muted-foreground/40     1.69:1         2.11:1         faller
  text-foreground/20           1.57:1         1.74:1         faller

Den omodifierade token klarar AA i bägge teman, så åtgärden är helt enkelt
att aldrig tona den. Elva textställen bytte till text-muted-foreground.
Kopieringsknappen i app/portal går från 1.57:1 till 4.73:1 i viloläge och
19.79:1 vid hover — den föll även 1.4.11 för icke-textkomponenter.
Toastens stängknapp klarade redan 1.4.11 (3.71:1) men blir 4.73:1.

Kvar med alfa är endast den dekorativa masthead-siffran i app/bestall, som
redan bär aria-hidden + select-none + pointer-events-none. Den är undantagen
både av WCAG och av axe, och guarden nedan tillåter den på just den grunden.

scripts/ci/check-text-contrast.mjs är en blockerande källkodsgrind i
quality-jobbet. Den är avsiktligt inte en axe-körning: den fullständiga
axe-jobb som UI-09 också begär kräver build + serve i CI och spåras separat.
Tills det finns stoppar den här grinden regressionen vid den form som
orsakade defekten.

Refs: UI-09
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
CODEOWNERS rules requested review from sax3l 2026-09-26 23:28:23 +00:00
admin merged commit 2d757435e4 into main 2026-09-27 00:48:46 +00:00
admin deleted branch fix/0pt-contrast-a11y-20260927 2026-09-27 00:48:46 +00:00
admin commented 2026-09-27 00:48:59 +00:00
Author
Owner
Copy Link
Copy Source

Godkänd av Simon (approve-your-own-pull blockeras av Gitea, så godkännandet noteras här i stället för som en formell review) och mergad.

Godkänd av Simon (approve-your-own-pull blockeras av Gitea, så godkännandet noteras här i stället för som en formell review) och mergad.
Sign in to join this conversation.
Reviewers
No Reviewers
sax3l
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
siax-bot siax-ci siax-healer (siax-healer (CI self-healing agent)) admin (Simon Axelsson)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: admin/0pt#121