Skip to content

Commit f048e64

Browse files
LadyBluenotesLadyBluenotes
committed
wip: enhance accessibility styles and add runtime tests for overlay functionality
1 parent 93bb55c commit f048e64

4 files changed

Lines changed: 146 additions & 37 deletions

File tree

‎packages/devtools-a11y/src/runtime.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,10 @@ function createRuntime(initOpts: A11yPluginOptions = {}): A11yRuntime {
105105
ensureOverlayAdapter()
106106
a11yEventClient.emit('scan-start', { context: 'document' })
107107

108+
if (config.showOverlays) {
109+
clearHighlights()
110+
}
111+
108112
try {
109113
const next = await runAudit({
110114
threshold: config.threshold,

‎packages/devtools-a11y/src/ui/A11yDevtoolsPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -388,7 +388,7 @@ export function A11yDevtoolsPanel(props: A11yDevtoolsPanelProps) {
388388
{SEVERITY_LABELS[config().threshold]}+ |{' '}
389389
{RULE_SET_LABELS[config().ruleSet]}
390390
<Show when={config().disabledRules.length > 0}>
391-
` | ${config().disabledRules.length} rule(s) disabled`
391+
{` | ${config().disabledRules.length} rule(s) disabled`}
392392
</Show>
393393
</span>
394394
<div class={styles().statusSpacer} />

‎packages/devtools-a11y/src/ui/styles.ts‎

Lines changed: 60 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@ export const CATEGORIES: Array<RuleCategory> = [
6060
]
6161

6262
const css = goober.css
63+
const FONT_SCALE = 1.1
64+
const fontPx = (size: number) => `calc(${size}px * ${FONT_SCALE})`
6365

6466
export function createA11yPanelStyles(theme: 'light' | 'dark') {
6567
const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
@@ -98,7 +100,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
98100
border: 1px solid ${border};
99101
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
100102
color: ${fg};
101-
font-size: 12px;
103+
font-size: ${fontPx(12)};
102104
display: flex;
103105
align-items: center;
104106
gap: 8px;
@@ -129,11 +131,11 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
129131
`,
130132
headerTitle: css`
131133
margin: 0;
132-
font-size: 16px;
134+
font-size: ${fontPx(16)};
133135
font-weight: 600;
134136
`,
135137
headerSub: css`
136-
font-size: 12px;
138+
font-size: ${fontPx(12)};
137139
color: ${muted};
138140
white-space: nowrap;
139141
`,
@@ -152,7 +154,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
152154
border-radius: 6px;
153155
cursor: pointer;
154156
font-weight: 500;
155-
font-size: 13px;
157+
font-size: ${fontPx(13)};
156158
opacity: 1;
157159
`,
158160
primaryButtonDisabled: css`
@@ -166,7 +168,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
166168
border: 1px solid ${border};
167169
border-radius: 6px;
168170
cursor: pointer;
169-
font-size: 13px;
171+
font-size: ${fontPx(13)};
170172
`,
171173
buttonRow: css`
172174
display: flex;
@@ -180,7 +182,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
180182
border: 1px solid ${border};
181183
border-radius: 6px;
182184
cursor: pointer;
183-
font-size: 13px;
185+
font-size: ${fontPx(13)};
184186
`,
185187
toggleOverlayOn: css`
186188
background: #10b981;
@@ -196,7 +198,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
196198
gap: 12px;
197199
align-items: center;
198200
flex-shrink: 0;
199-
font-size: 11px;
201+
font-size: ${fontPx(11)};
200202
color: ${muted};
201203
`,
202204
statusSpacer: css`
@@ -209,7 +211,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
209211
border: 1px solid ${active ? '#10b981' : border};
210212
border-radius: 999px;
211213
cursor: pointer;
212-
font-size: 11px;
214+
font-size: ${fontPx(11)};
213215
font-weight: 600;
214216
`,
215217
smallLinkButton: css`
@@ -219,7 +221,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
219221
border: 1px solid ${border};
220222
border-radius: 4px;
221223
cursor: pointer;
222-
font-size: 11px;
224+
font-size: ${fontPx(11)};
223225
font-weight: 500;
224226
`,
225227

@@ -238,11 +240,11 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
238240
color: ${muted};
239241
`,
240242
emptyPrimary: css`
241-
font-size: 14px;
243+
font-size: ${fontPx(14)};
242244
margin: 0 0 8px 0;
243245
`,
244246
emptySecondary: css`
245-
font-size: 12px;
247+
font-size: ${fontPx(12)};
246248
margin: 0;
247249
`,
248250
successState: css`
@@ -254,13 +256,13 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
254256
text-align: center;
255257
`,
256258
successTitle: css`
257-
font-size: 16px;
259+
font-size: ${fontPx(16)};
258260
color: #10b981;
259261
font-weight: 600;
260262
margin: 0;
261263
`,
262264
successSub: css`
263-
font-size: 12px;
265+
font-size: ${fontPx(12)};
264266
color: ${muted};
265267
margin-top: 8px;
266268
margin-bottom: 0;
@@ -290,12 +292,12 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
290292
box-shadow: 0 0 0 2px ${SEVERITY_COLORS[impact]};
291293
`,
292294
summaryCount: (impact: SeverityThreshold) => css`
293-
font-size: 24px;
295+
font-size: ${fontPx(24)};
294296
font-weight: 700;
295297
color: ${SEVERITY_COLORS[impact]};
296298
`,
297299
summaryLabel: css`
298-
font-size: 11px;
300+
font-size: ${fontPx(11)};
299301
color: ${muted};
300302
text-transform: uppercase;
301303
`,
@@ -305,7 +307,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
305307
`,
306308
sectionTitle: (impact: SeverityThreshold) => css`
307309
color: ${SEVERITY_COLORS[impact]};
308-
font-size: 13px;
310+
font-size: ${fontPx(13)};
309311
font-weight: 600;
310312
margin: 0 0 8px 0;
311313
text-transform: uppercase;
@@ -336,7 +338,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
336338
`,
337339
issueTitleRow: css`
338340
font-weight: 600;
339-
font-size: 13px;
341+
font-size: ${fontPx(13)};
340342
margin-bottom: 4px;
341343
display: flex;
342344
align-items: center;
@@ -350,13 +352,13 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
350352
flex-shrink: 0;
351353
`,
352354
issueMessage: css`
353-
font-size: 12px;
355+
font-size: ${fontPx(12)};
354356
color: ${t('#475569', '#cbd5e1')};
355357
margin: 0 0 8px 0;
356358
line-height: 1.4;
357359
`,
358360
selector: css`
359-
font-size: 10px;
361+
font-size: ${fontPx(10)};
360362
color: ${muted2};
361363
font-family:
362364
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -373,18 +375,40 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
373375
flex-shrink: 0;
374376
`,
375377
helpLink: css`
376-
font-size: 11px;
378+
font-size: ${fontPx(11)};
377379
color: #0ea5e9;
378-
text-decoration: none;
380+
font-weight: 600;
381+
text-decoration: underline;
382+
text-underline-offset: 2px;
383+
384+
&:hover {
385+
color: #0284c7;
386+
}
387+
388+
&:focus-visible {
389+
outline: 2px solid #0ea5e9;
390+
outline-offset: 2px;
391+
border-radius: 4px;
392+
}
379393
`,
380394
disableRule: css`
381-
font-size: 10px;
395+
font-size: ${fontPx(10)};
382396
color: ${muted};
383397
background: none;
384398
border: none;
385399
cursor: pointer;
386400
padding: 0;
387-
text-decoration: underline;
401+
font-weight: 600;
402+
403+
&:hover {
404+
color: #000000;
405+
}
406+
407+
&:focus-visible {
408+
outline: 2px solid #0ea5e9;
409+
outline-offset: 2px;
410+
border-radius: 4px;
411+
}
388412
`,
389413
tags: css`
390414
display: flex;
@@ -393,7 +417,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
393417
flex-wrap: wrap;
394418
`,
395419
tag: css`
396-
font-size: 10px;
420+
font-size: ${fontPx(10)};
397421
padding: 2px 6px;
398422
background: ${t('#e2e8f0', '#374151')};
399423
border-radius: 4px;
@@ -418,7 +442,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
418442
`,
419443
settingsTitle: css`
420444
margin: 0;
421-
font-size: 14px;
445+
font-size: ${fontPx(14)};
422446
font-weight: 600;
423447
`,
424448
doneButton: css`
@@ -428,7 +452,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
428452
border: none;
429453
border-radius: 4px;
430454
cursor: pointer;
431-
font-size: 12px;
455+
font-size: ${fontPx(12)};
432456
font-weight: 500;
433457
`,
434458
settingsContent: css`
@@ -441,7 +465,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
441465
`,
442466
settingsSectionLabel: css`
443467
margin: 0 0 12px 0;
444-
font-size: 12px;
468+
font-size: ${fontPx(12)};
445469
font-weight: 600;
446470
text-transform: uppercase;
447471
letter-spacing: 0.5px;
@@ -456,11 +480,11 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
456480
gap: 12px;
457481
`,
458482
settingsRowTitle: css`
459-
font-size: 13px;
483+
font-size: ${fontPx(13)};
460484
font-weight: 500;
461485
`,
462486
settingsRowDesc: css`
463-
font-size: 11px;
487+
font-size: ${fontPx(11)};
464488
color: ${muted};
465489
margin-top: 2px;
466490
`,
@@ -470,7 +494,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
470494
border-radius: 4px;
471495
background: ${bg};
472496
color: ${fg};
473-
font-size: 12px;
497+
font-size: ${fontPx(12)};
474498
`,
475499
rulesHeaderRow: css`
476500
display: flex;
@@ -491,7 +515,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
491515
border: none;
492516
border-radius: 4px;
493517
cursor: pointer;
494-
font-size: 10px;
518+
font-size: ${fontPx(10)};
495519
font-weight: 500;
496520
`,
497521
filtersRow: css`
@@ -508,7 +532,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
508532
border-radius: 4px;
509533
background: ${bg};
510534
color: ${fg};
511-
font-size: 12px;
535+
font-size: ${fontPx(12)};
512536
box-sizing: border-box;
513537
`,
514538
rulesList: css`
@@ -549,22 +573,22 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
549573
`,
550574
ruleId: css`
551575
font-weight: 500;
552-
font-size: 12px;
576+
font-size: ${fontPx(12)};
553577
text-decoration: none;
554578
`,
555579
ruleIdDisabled: css`
556580
text-decoration: line-through;
557581
`,
558582
bpBadge: css`
559-
font-size: 9px;
583+
font-size: ${fontPx(9)};
560584
padding: 1px 4px;
561585
background: #f59e0b;
562586
color: #fff;
563587
border-radius: 3px;
564588
font-weight: 500;
565589
`,
566590
ruleDesc: css`
567-
font-size: 11px;
591+
font-size: ${fontPx(11)};
568592
color: ${muted};
569593
line-height: 1.3;
570594
`,
@@ -574,7 +598,7 @@ export function createA11yPanelStyles(theme: 'light' | 'dark') {
574598
margin-top: 4px;
575599
`,
576600
catTag: css`
577-
font-size: 9px;
601+
font-size: ${fontPx(9)};
578602
padding: 1px 4px;
579603
background: ${t('#e2e8f0', '#374151')};
580604
border-radius: 3px;

0 commit comments

Comments
 (0)