Skip to content

Commit 54b48f9

Browse files
lemon-mintlemon-mint
authored
Merge pull request #3 from gosuda/frontend-interface-fixes
Fix accessibility and contrast defects in the badge builder
2 parents 538ddb0 + 05c0b8d commit 54b48f9

7 files changed

Lines changed: 56 additions & 15 deletions

File tree

‎src/app.css‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ body {
3030
line-height: 1.55;
3131
text-rendering: optimizeLegibility;
3232
-webkit-font-smoothing: antialiased;
33+
-moz-osx-font-smoothing: grayscale;
3334
}
3435

3536
button,
@@ -57,6 +58,35 @@ select:focus-visible {
5758
outline-offset: 3px;
5859
}
5960

61+
/* Visible only while focused, so keyboard users can bypass the nav chrome. */
62+
.skip-link {
63+
position: absolute;
64+
z-index: var(--z-toast);
65+
inset-block-start: var(--space-xs);
66+
inset-inline-start: var(--space-xs);
67+
padding: var(--space-xs) var(--space-md);
68+
border-radius: var(--radius-pill);
69+
background: var(--color-ink);
70+
color: var(--color-paper);
71+
font-weight: 700;
72+
text-decoration: none;
73+
transform: translateY(-200%);
74+
}
75+
76+
.skip-link:focus-visible {
77+
transform: translateY(0);
78+
}
79+
80+
/* Announced by screen readers, never painted. */
81+
.visually-hidden {
82+
position: absolute;
83+
width: 1px;
84+
height: 1px;
85+
overflow: hidden;
86+
clip-path: inset(50%);
87+
white-space: nowrap;
88+
}
89+
6090
::selection {
6191
background: var(--color-accent);
6292
color: var(--color-accent-ink);
@@ -546,7 +576,7 @@ main.banner-dismissed {
546576
}
547577

548578
.field-help.error-text {
549-
color: var(--color-error);
579+
color: var(--color-error-text);
550580
font-weight: 700;
551581
}
552582

@@ -768,7 +798,8 @@ main.banner-dismissed {
768798
min-height: 2.25rem;
769799
padding-inline: 0.65rem;
770800
border-radius: var(--radius-pill);
771-
font-size: var(--text-xs);
801+
/* iOS Safari zooms the page when a focused control is under 16px. */
802+
font-size: var(--text-base);
772803
font-weight: 700;
773804
}
774805

@@ -851,7 +882,8 @@ main.banner-dismissed {
851882
outline: 0;
852883
background: transparent;
853884
color: var(--color-ink);
854-
font-size: var(--text-sm);
885+
/* iOS Safari zooms the page when a focused control is under 16px. */
886+
font-size: var(--text-base);
855887
font-variant-numeric: tabular-nums;
856888
}
857889

@@ -886,6 +918,7 @@ main.banner-dismissed {
886918
.preview-card__head > div,
887919
.url-card__head > div {
888920
display: grid;
921+
min-width: 0;
889922
gap: var(--space-2xs);
890923
}
891924

@@ -908,7 +941,7 @@ main.banner-dismissed {
908941
display: inline-flex;
909942
align-items: center;
910943
gap: var(--space-xs);
911-
color: var(--color-success) !important;
944+
color: var(--color-success-text) !important;
912945
white-space: nowrap;
913946
}
914947

@@ -921,7 +954,7 @@ main.banner-dismissed {
921954
}
922955

923956
.status-dot.pending {
924-
color: var(--color-accent-deep) !important;
957+
color: var(--color-accent-text) !important;
925958
}
926959

927960
.status-dot.pending::before {

‎src/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
6-
<meta name="theme-color" content="#f6f4ee" />
6+
<meta name="theme-color" content="#f7f5ec" />
77
<link rel="preconnect" href="https://fonts.googleapis.com" />
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
99
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet" />

‎src/lib/ColorEditor.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@
102102
step={channel.step}
103103
maxlength={channel.maxlength}
104104
value={channels[channel.key] ?? ''}
105+
aria-label={`${label} ${channel.label}`}
105106
aria-invalid={invalid}
106107
aria-describedby={`${editorId}-help`}
107108
onfocus={() => (activeField = channel.key)}

‎src/lib/SiteNav.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
}
2929
</script>
3030

31+
<a class="skip-link" href="#top">Skip to main content</a>
3132
<header class:compact class:dismissed class="site-nav">
3233
<div class="announcement">
3334
<p>Every plan is $0. Finance has stopped returning our calls. <a href="/pricing/">See pricing</a></p>

‎src/routes/+page.svelte‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -271,12 +271,12 @@
271271
<div class="field">
272272
<label class="field-label" for="label">First bit</label>
273273
<input id="label" class="text-input" bind:value={label} maxlength="64" placeholder="tiny" />
274-
<p class="field-help">A short hello on the left.</p>
274+
<p class="field-help">A short hello on the left. Sent as <code>label</code>.</p>
275275
</div>
276276
<div class="field">
277277
<label class="field-label" for="message">Main bit</label>
278278
<input id="message" class="text-input" bind:value={message} maxlength="128" required placeholder="but mighty" />
279-
<p class="field-help">The good part goes on the right.</p>
279+
<p class="field-help">The good part goes on the right. Sent as <code>message</code>.</p>
280280
</div>
281281
</div>
282282
</section>
@@ -349,16 +349,14 @@
349349
<span>Right this minute</span>
350350
<strong>Your badge</strong>
351351
</div>
352-
<span class:pending={previewPending} class="status-dot">{previewPending ? 'Updating…' : 'Live preview'}</span>
352+
<span class:pending={previewPending} class="status-dot" role="status" aria-live="polite">{previewPending ? 'Updating…' : 'Live preview'}</span>
353353
</div>
354354
<div class="preview-stage">
355355
<div class="preview-zoom-switch" role="group" aria-label="Preview magnification">
356356
<button class:active={previewZoom === 1} type="button" aria-pressed={previewZoom === 1} onclick={() => (previewZoom = 1)}>1×</button>
357357
<button class:active={previewZoom === 2} type="button" aria-pressed={previewZoom === 2} onclick={() => (previewZoom = 2)}>2×</button>
358358
</div>
359-
{#key previewPath}
360-
<img class="badge-preview" src={previewPath} alt={`${requestState.label}: ${requestState.message}`} style={`--preview-zoom: ${previewZoom}`} />
361-
{/key}
359+
<img class="badge-preview" src={previewPath} alt={`${requestState.label}: ${requestState.message}`} style={`--preview-zoom: ${previewZoom}`} />
362360
</div>
363361
<div class="preview-meta">
364362
<span>{requestState.size}% scale</span>
@@ -414,6 +412,9 @@
414412
{#if burst && copyFormat === 'markdown'}<span class="star-burst" aria-hidden="true"></span>{/if}
415413
</button>
416414
</div>
415+
<p class="visually-hidden" role="status" aria-live="polite">
416+
{copyState === 'success' ? `${copyFormat === 'markdown' ? 'Markdown' : 'URL'} copied to clipboard` : copyState === 'error' ? 'Copy failed. Try again.' : ''}
417+
</p>
417418
<p class="cache-note">Use the URL anywhere, or paste the Markdown straight into a README.</p>
418419
</div>
419420
</aside>

‎src/routes/pricing/+page.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
description: 'For one person with one excellent idea and at least three favorite colors.',
1414
perSeat: false,
1515
tone: 'pear',
16-
cta: 'Choose Solo',
16+
cta: 'Choose solo',
1717
extras: ['Extra independent vibe', 'Extra “I made this” vibe']
1818
},
1919
{
@@ -30,7 +30,7 @@
3030
description: 'For a room full of taste, tabs, and someone asking whether the green feels greener.',
3131
perSeat: false,
3232
tone: 'lavender',
33-
cta: 'Go Studio',
33+
cta: 'Go studio',
3434
extras: ['Extra polished vibe', 'Extra good-chair vibe', 'Extra one-more-version vibe', 'Extra tasteful-nod vibe']
3535
},
3636
{
@@ -39,7 +39,7 @@
3939
perSeat: true,
4040
tone: 'ink',
4141
enterprise: true,
42-
cta: 'Choose Enterprise',
42+
cta: 'Choose enterprise',
4343
extras: ['Extra enterprise vibe', 'Extra procurement vibe', 'Extra lanyard vibe', 'Extra quarterly vibe', 'Extra approved-font vibe']
4444
}
4545
];

‎tokens.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@
2020
--color-success: oklch(60% 0.15 145);
2121
--color-error: oklch(58% 0.2 28);
2222
--color-focus: oklch(48% 0.17 265);
23+
/* Text-safe variants. The base tokens above stay vivid for dots, borders,
24+
and shadows; these darker forms clear WCAG AA as small text on paper. */
25+
--color-success-text: oklch(48% 0.15 145);
26+
--color-error-text: oklch(52% 0.2 28);
27+
--color-accent-text: oklch(50% 0.17 95);
2328
--color-stage: oklch(22% 0.012 250);
2429
--color-stage-2: oklch(28% 0.014 250);
2530
--color-stage-ink: oklch(96% 0.008 95);

0 commit comments

Comments
 (0)