fix(web): accessibility pass to WCAG 2.1 AA (M7)
An axe-core audit of every screen in both themes found low contrast on white text over the accent and on caption text, track rows using row roles without cells, and unlabelled progress bars. Accent fills now use a darker token, caption text meets 4.5:1, track lists are lists and progress bars are labelled. The queue drawer slides in from the right as designed, takes focus, closes on Escape and notes that the wave never ends. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
mrleo1nidandClaude Opus 5.5 committed
1 parent
c0e50bf88e
commit
de4e59d9f8
19 files changed
+106
-35
No files matched your search
@@ -22,9 +22,11 @@
|
||||
--line2: rgba(130,160,255,.18);
|
||||
--text: #EDF1FF;
|
||||
--text2: #A0ABC6;
|
||||
--text3: #737F9C;
|
||||
--text3: #7F8BA8;
|
||||
--accent: #2F80FF;
|
||||
--accent2: #5E9BFF;
|
||||
--accent-fill: #1A66E6;
|
||||
--accent-fill2: #1F6FF2;
|
||||
--accent-soft: rgba(47,128,255,.15);
|
||||
--violet: #9B7CFF;
|
||||
--violet-soft: rgba(124,92,255,.16);
|
||||
@@ -56,9 +58,11 @@
|
||||
--line2: rgba(20,35,80,.17);
|
||||
--text: #0A0F1E;
|
||||
--text2: #4B5675;
|
||||
--text3: #677290;
|
||||
--text3: #5C6785;
|
||||
--accent: #1F6FF2;
|
||||
--accent2: #1F6FF2;
|
||||
--accent-fill: #1A63DB;
|
||||
--accent-fill2: #165ED6;
|
||||
--accent-soft: rgba(31,111,242,.10);
|
||||
--violet: #6A47F0;
|
||||
--violet-soft: rgba(106,71,240,.10);
|
||||
@@ -90,9 +94,11 @@
|
||||
--line2: rgba(20,35,80,.17);
|
||||
--text: #0A0F1E;
|
||||
--text2: #4B5675;
|
||||
--text3: #677290;
|
||||
--text3: #5C6785;
|
||||
--accent: #1F6FF2;
|
||||
--accent2: #1F6FF2;
|
||||
--accent-fill: #1A63DB;
|
||||
--accent-fill2: #165ED6;
|
||||
--accent-soft: rgba(31,111,242,.10);
|
||||
--violet: #6A47F0;
|
||||
--violet-soft: rgba(106,71,240,.10);
|
||||
@@ -123,9 +129,11 @@
|
||||
--line2: rgba(130,160,255,.18);
|
||||
--text: #EDF1FF;
|
||||
--text2: #A0ABC6;
|
||||
--text3: #737F9C;
|
||||
--text3: #7F8BA8;
|
||||
--accent: #2F80FF;
|
||||
--accent2: #5E9BFF;
|
||||
--accent-fill: #1A66E6;
|
||||
--accent-fill2: #1F6FF2;
|
||||
--accent-soft: rgba(47,128,255,.15);
|
||||
--violet: #9B7CFF;
|
||||
--violet-soft: rgba(124,92,255,.16);
|
||||
|
||||
@@ -13,9 +13,11 @@ export const tokens = {
|
||||
"line2": "rgba(130,160,255,.18)",
|
||||
"text": "#EDF1FF",
|
||||
"text2": "#A0ABC6",
|
||||
"text3": "#737F9C",
|
||||
"text3": "#7F8BA8",
|
||||
"accent": "#2F80FF",
|
||||
"accent2": "#5E9BFF",
|
||||
"accent-fill": "#1A66E6",
|
||||
"accent-fill2": "#1F6FF2",
|
||||
"accent-soft": "rgba(47,128,255,.15)",
|
||||
"violet": "#9B7CFF",
|
||||
"violet-soft": "rgba(124,92,255,.16)",
|
||||
@@ -42,9 +44,11 @@ export const tokens = {
|
||||
"line2": "rgba(20,35,80,.17)",
|
||||
"text": "#0A0F1E",
|
||||
"text2": "#4B5675",
|
||||
"text3": "#677290",
|
||||
"text3": "#5C6785",
|
||||
"accent": "#1F6FF2",
|
||||
"accent2": "#1F6FF2",
|
||||
"accent-fill": "#1A63DB",
|
||||
"accent-fill2": "#165ED6",
|
||||
"accent-soft": "rgba(31,111,242,.10)",
|
||||
"violet": "#6A47F0",
|
||||
"violet-soft": "rgba(106,71,240,.10)",
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"$comment": "Источник истины дизайн-токенов (docs/design.md). После правки: pnpm --filter @pipu/design-tokens generate",
|
||||
"$comment": "Источник истины дизайн-токенов (docs/design.md). После правки: pnpm --filter @pipu/design-tokens generate. accent-fill — заливка под белым текстом (контраст ≥ 4.5:1, WCAG AA)",
|
||||
"color": {
|
||||
"dark": {
|
||||
"bg": "#05070D", "bg2": "#080B14", "surface": "#0B0F1A", "surface2": "#121827", "surface3": "#1A2236",
|
||||
"elev": "#111726", "hover": "rgba(120,150,255,.07)", "line": "rgba(130,160,255,.10)", "line2": "rgba(130,160,255,.18)",
|
||||
"text": "#EDF1FF", "text2": "#A0ABC6", "text3": "#737F9C",
|
||||
"accent": "#2F80FF", "accent2": "#5E9BFF", "accent-soft": "rgba(47,128,255,.15)",
|
||||
"text": "#EDF1FF", "text2": "#A0ABC6", "text3": "#7F8BA8",
|
||||
"accent": "#2F80FF", "accent2": "#5E9BFF", "accent-fill": "#1A66E6", "accent-fill2": "#1F6FF2", "accent-soft": "rgba(47,128,255,.15)",
|
||||
"violet": "#9B7CFF", "violet-soft": "rgba(124,92,255,.16)",
|
||||
"ok": "#2FD39A", "ok-soft": "rgba(47,211,154,.14)", "warn": "#FFB547", "warn-soft": "rgba(255,181,71,.14)",
|
||||
"danger": "#FF5C70", "danger-soft": "rgba(255,92,112,.14)",
|
||||
@@ -14,8 +14,8 @@
|
||||
"light": {
|
||||
"bg": "#F3F5FA", "bg2": "#EBEEF5", "surface": "#FFFFFF", "surface2": "#F0F3F9", "surface3": "#E4E9F3",
|
||||
"elev": "#FFFFFF", "hover": "rgba(30,60,140,.06)", "line": "rgba(20,35,80,.10)", "line2": "rgba(20,35,80,.17)",
|
||||
"text": "#0A0F1E", "text2": "#4B5675", "text3": "#677290",
|
||||
"accent": "#1F6FF2", "accent2": "#1F6FF2", "accent-soft": "rgba(31,111,242,.10)",
|
||||
"text": "#0A0F1E", "text2": "#4B5675", "text3": "#5C6785",
|
||||
"accent": "#1F6FF2", "accent2": "#1F6FF2", "accent-fill": "#1A63DB", "accent-fill2": "#165ED6", "accent-soft": "rgba(31,111,242,.10)",
|
||||
"violet": "#6A47F0", "violet-soft": "rgba(106,71,240,.10)",
|
||||
"ok": "#0E9465", "ok-soft": "rgba(14,148,101,.10)", "warn": "#A86200", "warn-soft": "rgba(168,98,0,.10)",
|
||||
"danger": "#D32F47", "danger-soft": "rgba(211,47,71,.09)",
|
||||
|
||||
@@ -81,7 +81,8 @@
|
||||
"source_wave": "My Wave",
|
||||
"source_queue": "Queue",
|
||||
"queue": "Queue",
|
||||
"source_wave_seed": "Artist wave · {{label}}"
|
||||
"source_wave_seed": "Artist wave · {{label}}",
|
||||
"queue_wave": "The wave never ends: next tracks are picked as you listen"
|
||||
},
|
||||
"settings": {
|
||||
"title": "Settings",
|
||||
|
||||
@@ -81,7 +81,8 @@
|
||||
"source_wave": "Моя волна",
|
||||
"source_queue": "Очередь",
|
||||
"queue": "Очередь",
|
||||
"source_wave_seed": "Волна по исполнителю · {{label}}"
|
||||
"source_wave_seed": "Волна по исполнителю · {{label}}",
|
||||
"queue_wave": "Волна бесконечна: следующие треки подбираются по ходу прослушивания"
|
||||
},
|
||||
"settings": {
|
||||
"title": "Настройки",
|
||||
|
||||
Reference in new issue
Block a user