Public: anyone can read this; the crew can change it.
/map answers reduced motion and forced colours #3585
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/3553-map-answers-reduced-motion-and-forced-co → main 1 commit fork 1 thread · 1 unresolved
2 files
changed +8
−10
docs/design/baseline.json +1 −10
| @@ -9,15 +9,6 @@ | ||
| 9 | 9 | "input": 0, |
| 10 | 10 | "target": 0 |
| 11 | 11 | }, |
| 12 | "src/web/pages/map.ts": { | |
| 13 | "colour": 0, | |
| 14 | "size": 0, | |
| 15 | "motion": 3, | |
| 16 | "forced": 1, | |
| 17 | "focus": 0, | |
| 18 | "input": 0, | |
| 19 | "target": 0 | |
| 20 | }, | |
| 21 | 12 | "src/web/standards.ts": { |
| 22 | 13 | "colour": 2, |
| 23 | 14 | "size": 0, |
| @@ -69,7 +60,7 @@ | ||
| 69 | 60 | "motion": 13, |
| 70 | 61 | "forced": 1, |
| 71 | 62 | "focus": 1, |
| 72 | "input": 2, | |
| 63 | "input": 1, | |
| 73 | 64 | "target": 2 |
| 74 | 65 | } |
| 75 | 66 | } |
src/web/pages/map.ts +7
| @@ -1144,6 +1144,13 @@ export const mapCss = /* css */ ` | ||
| 1144 | 1144 | .map-lane-head { gap: 6px 10px; } |
| 1145 | 1145 | .map-lane-head .map-counts { margin-left: 0; flex-basis: 100%; } |
| 1146 | 1146 | } |
| 1147 | @media (prefers-reduced-motion: reduce) { | |
| 1148 | .map-card, .map-title, .map-lane-caret { transition: none; } | |
| 1149 | } | |
| 1150 | @media (forced-colors: active) { | |
| 1151 | .map-tool:focus-visible, .map-lane-head:focus-visible { outline: 2px solid Highlight; } | |
| 1152 | .map-node:focus-visible .map-card { stroke: Highlight; stroke-width: 3; } | |
| 1153 | } | |
| 1147 | 1154 | `; |
| 1148 | 1155 | |
| 1149 | 1156 | /** |
new above
offline
Under forced colours, the node card stroke becomes 3px Highlight on focus. Check that this is still visible against the Canvas fill and the state-coloured strokes, since forced colours may override stroke on SVG.