Skip to content

Commit 2cebfd2

Browse files
vveerrggclaude
vveerrgg
and
claude
committed
a11y: Comprehensive accessibility fixes for Apple App Store compliance
- Fix color contrast: muted text #8f908a → #b0b0a8 (4.5:1 WCAG AA) - Add focus outlines on all inputs (replace outline:none) - Add prefers-reduced-motion support across all CSS - Convert fixed px font sizes to rem units in sidepanel - Add aria-label to all icon-only buttons (20+ buttons) - Add aria-hidden="true" to all decorative SVGs (30+ SVGs) - Add aria-live regions to all dynamic feedback messages - Add for attributes to all form labels - Convert section-title divs to semantic h2 elements - Add role="tab" and aria-selected to tab navigation - Add type="button" to all non-submit buttons - Fix touch target sizes (min 44x44pt) - Fix muted text color in permission page Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent d952906 commit 2cebfd2

11 files changed

Lines changed: 160 additions & 112 deletions

File tree

‎src/api-keys/api-keys.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
<body class="p-4 md:p-8 lg:p-16 max-w-5xl mx-auto">
1212
<div class="flex items-start justify-between mb-4">
1313
<h1 class="section-header">API Key Vault</h1>
14-
<button id="close-btn" class="button" title="Close" style="min-width:auto;padding:8px 12px;">
15-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
14+
<button id="close-btn" class="button" type="button" title="Close" aria-label="Close" style="min-width:auto;padding:8px 12px;">
15+
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1616
<path d="M18 6L6 18M6 6l12 12"></path>
1717
</svg>
1818
</button>
@@ -24,9 +24,9 @@ <h1 class="section-header">API Key Vault</h1>
2424

2525
<!-- Sync bar -->
2626
<div class="mt-3 flex items-center gap-2 text-sm flex-wrap">
27-
<span id="sync-dot" class="inline-block w-3 h-3 rounded-full bg-green-500"></span>
27+
<span id="sync-dot" class="inline-block w-3 h-3 rounded-full bg-green-500" aria-hidden="true"></span>
2828
<span id="sync-text">Synced</span>
29-
<button id="sync-btn" class="button text-xs">Sync Now</button>
29+
<button id="sync-btn" class="button text-xs" type="button">Sync Now</button>
3030
<label class="flex items-center gap-1 text-xs cursor-pointer">
3131
<input
3232
type="checkbox"
@@ -61,13 +61,15 @@ <h1 class="section-header">API Key Vault</h1>
6161
<div class="mt-4 p-4 border border-monokai-bg-lighter rounded-lg bg-monokai-bg-light">
6262
<h3 class="text-sm font-bold mb-2">Add Key</h3>
6363
<div class="flex flex-col md:flex-row gap-2">
64+
<label for="new-label" class="sr-only">Key label</label>
6465
<input
6566
id="new-label"
6667
type="text"
6768
class="input text-sm flex-1"
6869
placeholder="Label (e.g. OpenAI)"
6970
autocomplete="off"
7071
/>
72+
<label for="new-secret" class="sr-only">Secret key</label>
7173
<input
7274
id="new-secret"
7375
type="text"
@@ -82,7 +84,7 @@ <h3 class="text-sm font-bold mb-2">Add Key</h3>
8284

8385
<!-- Import / Export -->
8486
<div class="mt-4 flex gap-2 items-center">
85-
<button id="export-btn" class="button text-sm">Export</button>
87+
<button id="export-btn" class="button text-sm" type="button">Export</button>
8688
<label class="button text-sm cursor-pointer">
8789
Import
8890
<input
@@ -99,6 +101,7 @@ <h3 class="text-sm font-bold mb-2">Add Key</h3>
99101
id="toast"
100102
class="fixed top-0 right-0 bg-monokai-accent text-monokai-bg rounded-md p-4 m-8 drop-shadow-md font-medium"
101103
style="display:none;"
104+
aria-live="polite"
102105
></div>
103106
</body>
104107
</html>

‎src/event_history/event_history.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<body class="p-4 md:p-8 lg:p-16 max-w-5xl mx-auto">
1919
<div class="flex items-start justify-between mb-4">
2020
<h1 class="section-header">Event History</h1>
21-
<button id="close-btn" class="button" title="Close" style="min-width:auto;padding:8px 12px;">
22-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
21+
<button id="close-btn" class="button" type="button" title="Close" aria-label="Close" style="min-width:auto;padding:8px 12px;">
22+
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
2323
<path d="M18 6L6 18M6 6l12 12"></path>
2424
</svg>
2525
</button>
@@ -130,8 +130,8 @@ <h1 class="section-header">Event History</h1>
130130
</div>
131131

132132
<div>
133-
<button id="save-all-btn" class="button mt-3">Save all</button>
134-
<button id="delete-all-btn" class="button mt-3">Delete all</button>
133+
<button id="save-all-btn" class="button mt-3" type="button">Save all</button>
134+
<button id="delete-all-btn" class="button mt-3" type="button">Delete all</button>
135135
</div>
136136
</div>
137137

@@ -145,6 +145,7 @@ <h1 class="section-header">Event History</h1>
145145
id="copied-toast"
146146
class="fixed top-0 right-0 bg-monokai-accent text-monokai-bg rounded-md p-4 m-8 drop-shadow-md font-medium"
147147
style="display:none;"
148+
aria-live="polite"
148149
>
149150
Event copied!
150151
</div>

‎src/experimental/experimental.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
<body class="p-4 md:p-8 lg:p-16 max-w-5xl mx-auto">
1313
<div class="flex items-start justify-between mb-4">
1414
<h1 class="section-header">Experimental Features</h1>
15-
<button id="close-btn" class="button" title="Close" style="min-width:auto;padding:8px 12px;">
16-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
15+
<button id="close-btn" class="button" type="button" title="Close" aria-label="Close" style="min-width:auto;padding:8px 12px;">
16+
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1717
<path d="M18 6L6 18M6 6l12 12"></path>
1818
</svg>
1919
</button>

‎src/options.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,3 +111,12 @@ body {
111111
@apply mb-4;
112112
}
113113
}
114+
115+
/* Respect reduced motion preferences */
116+
@media (prefers-reduced-motion: reduce) {
117+
*, *::before, *::after {
118+
animation-duration: 0.01ms !important;
119+
animation-iteration-count: 1 !important;
120+
transition-duration: 0.01ms !important;
121+
}
122+
}

‎src/permission/permission.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
align-items: center;
7171
justify-content: center;
7272
gap: 8px;
73-
color: #8f908a;
73+
color: #b0b0a8;
7474
font-size: 0.875rem;
7575
}
7676
.event-preview {
@@ -132,8 +132,8 @@ <h1 class="permission-title text-center">
132132
</div>
133133

134134
<div class="permission-buttons">
135-
<button id="allow-btn" class="button">Allow</button>
136-
<button id="deny-btn" class="button">Deny</button>
135+
<button id="allow-btn" class="button" type="button">Allow</button>
136+
<button id="deny-btn" class="button" type="button">Deny</button>
137137
</div>
138138

139139
<div class="remember-row">

‎src/popup.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
--monokai-bg-light: #3e3d32;
55
--monokai-bg-lighter: #49483e;
66
--monokai-text: #f8f8f2;
7-
--monokai-text-muted: #8f908a;
7+
--monokai-text-muted: #b0b0a8;
88
--monokai-accent: #a6e22e;
99
--monokai-yellow: #e6db74;
1010
--monokai-orange: #fd971f;
@@ -107,8 +107,20 @@ body {
107107

108108
.input:focus {
109109
border-color: var(--monokai-accent);
110-
outline: none;
111-
box-shadow: 0 0 0 3px rgba(166, 226, 46, 0.15);
110+
outline: 2px solid var(--monokai-accent);
111+
outline-offset: 2px;
112+
}
113+
114+
/* Respect reduced motion preferences */
115+
@media (prefers-reduced-motion: reduce) {
116+
*, *::before, *::after {
117+
animation-duration: 0.01ms !important;
118+
animation-iteration-count: 1 !important;
119+
transition-duration: 0.01ms !important;
120+
}
121+
.button:active {
122+
transform: none;
123+
}
112124
}
113125

114126
/* Profile select dropdown */

‎src/popup.html‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@
1212
<!-- LOCKED STATE: show unlock form -->
1313
<div id="locked-view" class="hidden">
1414
<div class="flex flex-col items-center gap-3 py-4">
15-
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
15+
<svg aria-hidden="true" width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1616
<path d="M16 12V8a4 4 0 10-8 0v4" stroke="#a6e22e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
1717
<rect x="5" y="12" width="14" height="10" rx="2" stroke="#a6e22e" stroke-width="1.5"></rect>
1818
<circle cx="12" cy="17" r="1.5" fill="#a6e22e"></circle>
1919
</svg>
2020
<span class="text-monokai-text font-bold text-sm">Extension Locked</span>
2121
<form id="unlock-form" class="w-full px-2">
22+
<label for="unlock-password" class="sr-only">Master password</label>
2223
<input
2324
id="unlock-password"
2425
type="password"
@@ -27,11 +28,11 @@
2728
autocomplete="off"
2829
autofocus
2930
/>
30-
<div id="unlock-error" class="text-monokai-orange text-xs font-bold mt-1 hidden"></div>
31+
<div id="unlock-error" class="text-monokai-orange text-xs font-bold mt-1 hidden" aria-live="assertive"></div>
3132
<button class="button w-full mt-2" type="submit">Unlock</button>
3233
</form>
3334
<div class="help" style="width:100%;padding:0 8px;">
34-
<button id="locked-settings-btn" class="button p-1.5 w-full">Settings</button>
35+
<button id="locked-settings-btn" class="button p-1.5 w-full" type="button">Settings</button>
3536
</div>
3637
</div>
3738
</div>
@@ -44,10 +45,12 @@
4445
<button
4546
id="lock-btn"
4647
class="button p-1 text-xs hidden"
48+
type="button"
4749
style="min-width:auto;width:auto;"
4850
title="Lock extension"
51+
aria-label="Lock extension"
4952
>
50-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:inline;vertical-align:middle;">
53+
<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:inline;vertical-align:middle;">
5154
<path d="M16 12V8a4 4 0 10-8 0v4" stroke="#a6e22e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
5255
<rect x="5" y="12" width="14" height="10" rx="2" stroke="#a6e22e" stroke-width="1.5"></rect>
5356
</svg>
@@ -61,10 +64,12 @@
6164
<button
6265
id="copy-npub-btn"
6366
class="button p-1.5"
67+
type="button"
6468
style="display: block"
6569
title="Copy npub"
70+
aria-label="Copy public key"
6671
>
67-
<?xml version="1.0" encoding="UTF-8"?><svg
72+
<svg aria-hidden="true"
6873
width="24px"
6974
height="24px"
7075
stroke-width="1.5"
@@ -109,12 +114,12 @@
109114
like to add some recommended relays now?
110115
</span>
111116
<br />
112-
<button id="add-relays-btn" class="button">Add Relays</button>
113-
<button id="no-thanks-btn" class="button">No Thanks</button>
117+
<button id="add-relays-btn" class="button" type="button">Add Relays</button>
118+
<button id="no-thanks-btn" class="button" type="button">No Thanks</button>
114119
</div>
115120

116121
<div class="help">
117-
<button id="settings-btn" class="button p-1.5">Settings</button>
122+
<button id="settings-btn" class="button p-1.5" type="button">Settings</button>
118123
</div>
119124

120125
<div class="disclaimer">

‎src/security/security.html‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
<body class="p-4 md:p-8 lg:p-16 max-w-5xl mx-auto">
1212
<div class="flex items-start justify-between mb-4">
1313
<h1 class="section-header">Security Settings</h1>
14-
<button id="close-btn" class="button" title="Close" style="min-width:auto;padding:8px 12px;">
15-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
14+
<button id="close-btn" class="button" type="button" title="Close" aria-label="Close" style="min-width:auto;padding:8px 12px;">
15+
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1616
<path d="M18 6L6 18M6 6l12 12"></path>
1717
</svg>
1818
</button>
@@ -26,7 +26,7 @@ <h2 class="section-header">Unlock Required</h2>
2626
</p>
2727
<form id="unlock-form" class="mt-3">
2828
<div class="mt-2">
29-
<label>Master Password</label>
29+
<label for="unlock-password">Master Password</label>
3030
<br />
3131
<input
3232
id="unlock-password"
@@ -41,6 +41,7 @@ <h2 class="section-header">Unlock Required</h2>
4141
id="unlock-error"
4242
class="text-red-500 text-sm font-bold mt-1"
4343
style="display:none;"
44+
aria-live="assertive"
4445
></div>
4546
<div class="mt-2">
4647
<button class="button" type="submit">Unlock</button>
@@ -56,6 +57,7 @@ <h2 class="section-header">Unlock Required</h2>
5657
id="page-success"
5758
class="p-3 rounded font-bold text-sm mb-4"
5859
style="display:none;background:#1a2e1a;border:1px solid #a6e22e;color:#a6e22e;"
60+
aria-live="polite"
5961
></div>
6062

6163
<!-- MASTER PASSWORD SECTION -->
@@ -80,7 +82,7 @@ <h3 class="subsection-header">Set Master Password</h3>
8082
</p>
8183
<form id="set-password-form">
8284
<div class="mt-2">
83-
<label>New Password</label>
85+
<label for="new-password">New Password</label>
8486
<br />
8587
<input
8688
id="new-password"
@@ -96,7 +98,7 @@ <h3 class="subsection-header">Set Master Password</h3>
9698
></div>
9799
</div>
98100
<div class="mt-2">
99-
<label>Confirm Password</label>
101+
<label for="confirm-password">Confirm Password</label>
100102
<br />
101103
<input
102104
id="confirm-password"
@@ -110,6 +112,7 @@ <h3 class="subsection-header">Set Master Password</h3>
110112
id="security-error"
111113
class="text-red-500 text-sm font-bold mt-1"
112114
style="display:none;"
115+
aria-live="assertive"
113116
></div>
114117
<div class="mt-2">
115118
<button
@@ -130,7 +133,7 @@ <h3 class="subsection-header">Set Master Password</h3>
130133
<h3 class="subsection-header">Change Master Password</h3>
131134
<form id="change-password-form">
132135
<div class="mt-2">
133-
<label>Current Password</label>
136+
<label for="current-password">Current Password</label>
134137
<br />
135138
<input
136139
id="current-password"
@@ -141,7 +144,7 @@ <h3 class="subsection-header">Change Master Password</h3>
141144
/>
142145
</div>
143146
<div class="mt-2">
144-
<label>New Password</label>
147+
<label for="new-password-change">New Password</label>
145148
<br />
146149
<input
147150
id="new-password-change"
@@ -152,7 +155,7 @@ <h3 class="subsection-header">Change Master Password</h3>
152155
/>
153156
</div>
154157
<div class="mt-2">
155-
<label>Confirm New Password</label>
158+
<label for="confirm-password-change">Confirm New Password</label>
156159
<br />
157160
<input
158161
id="confirm-password-change"
@@ -166,6 +169,7 @@ <h3 class="subsection-header">Change Master Password</h3>
166169
id="change-error"
167170
class="text-red-500 text-sm font-bold mt-1"
168171
style="display:none;"
172+
aria-live="assertive"
169173
></div>
170174
<div class="mt-2">
171175
<button
@@ -187,7 +191,7 @@ <h3 class="subsection-header mt-6">Remove Master Password</h3>
187191
</p>
188192
<form id="remove-password-form">
189193
<div class="mt-2">
190-
<label>Current Password</label>
194+
<label for="remove-password">Current Password</label>
191195
<br />
192196
<input
193197
id="remove-password"
@@ -201,6 +205,7 @@ <h3 class="subsection-header mt-6">Remove Master Password</h3>
201205
id="remove-error"
202206
class="text-red-500 text-sm font-bold mt-1"
203207
style="display:none;"
208+
aria-live="assertive"
204209
></div>
205210
<div class="mt-2">
206211
<button
@@ -245,6 +250,7 @@ <h2 class="section-header">Auto-Lock</h2>
245250
id="autolock-success"
246251
class="text-green-700 text-sm font-bold mt-2"
247252
style="display:none;"
253+
aria-live="polite"
248254
></div>
249255
</div>
250256
</div>

0 commit comments

Comments
 (0)