Skip to content

Commit 1959c0a

Browse files
kentcdoddskentcdodds
committed
feat: add accessibility improvements and enhance UI components with ARIA roles
1 parent 999a167 commit 1959c0a

File tree

6 files changed

+228
-182
lines changed

6 files changed

+228
-182
lines changed

‎epicshop/epic-me/app/app.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,21 @@ body {
1414
color-scheme: dark;
1515
}
1616
}
17+
18+
/* Focus styles for better accessibility */
19+
*:focus {
20+
outline: 2px solid #3b82f6;
21+
outline-offset: 2px;
22+
}
23+
24+
*:focus:not(:focus-visible) {
25+
outline: none;
26+
}
27+
28+
/* High contrast mode support */
29+
@media (prefers-contrast: high) {
30+
:root {
31+
--tw-ring-color: #000000;
32+
--tw-ring-offset-color: #ffffff;
33+
}
34+
}

‎epicshop/epic-me/app/routes/authorize.tsx‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -98,14 +98,14 @@ export default function Authorize({
9898
return (
9999
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-8 dark:from-gray-900 dark:to-gray-800">
100100
<div className="mx-auto max-w-4xl">
101-
<div className="mb-8 text-center">
101+
<header className="mb-8 text-center">
102102
<h1 className="mb-4 text-4xl font-bold text-gray-900 dark:text-white">
103103
OAuth Authorization
104104
</h1>
105105
<p className="text-lg text-gray-600 dark:text-gray-300">
106106
Select a user to authorize OAuth access to Epic Me
107107
</p>
108-
</div>
108+
</header>
109109

110110
<div className="mb-8 rounded-xl bg-white p-6 shadow-lg dark:bg-gray-800 dark:shadow-gray-900/50">
111111
<div className="mb-4 flex items-center gap-3">
@@ -166,13 +166,17 @@ export default function Authorize({
166166
</div>
167167

168168
{actionData?.status === 'success' && (
169-
<div className="mb-8 rounded-xl border border-green-200 bg-green-50 p-6 dark:border-green-700 dark:bg-green-900/20">
169+
<div
170+
className="mb-8 rounded-xl border border-green-200 bg-green-50 p-6 dark:border-green-700 dark:bg-green-900/20"
171+
role="status"
172+
>
170173
<div className="flex">
171174
<div className="flex-shrink-0">
172175
<svg
173176
className="h-5 w-5 text-green-400 dark:text-green-300"
174177
viewBox="0 0 20 20"
175178
fill="currentColor"
179+
aria-hidden="true"
176180
>
177181
<path
178182
fillRule="evenodd"
@@ -204,13 +208,17 @@ export default function Authorize({
204208
)}
205209

206210
{actionData?.status === 'error' && actionData?.message ? (
207-
<div className="mb-8 rounded-xl border border-red-200 bg-red-50 p-6 dark:border-red-700 dark:bg-red-900/20">
211+
<div
212+
className="mb-8 rounded-xl border border-red-200 bg-red-50 p-6 dark:border-red-700 dark:bg-red-900/20"
213+
role="alert"
214+
>
208215
<div className="flex">
209216
<div className="flex-shrink-0">
210217
<svg
211218
className="h-5 w-5 text-red-400 dark:text-red-300"
212219
viewBox="0 0 20 20"
213220
fill="currentColor"
221+
aria-hidden="true"
214222
>
215223
<path
216224
fillRule="evenodd"
@@ -231,8 +239,11 @@ export default function Authorize({
231239
</div>
232240
) : null}
233241

234-
<section className="mb-8">
235-
<h2 className="mb-6 text-2xl font-bold text-gray-800 dark:text-gray-200">
242+
<section className="mb-8" aria-labelledby="user-selection-heading">
243+
<h2
244+
id="user-selection-heading"
245+
className="mb-6 text-2xl font-bold text-gray-800 dark:text-gray-200"
246+
>
236247
Select User Account
237248
</h2>
238249

@@ -387,8 +398,14 @@ export default function Authorize({
387398
</div>
388399

389400
{/* Search Parameters Form */}
390-
<section className="mt-8 rounded-xl border border-gray-200 bg-white p-6 shadow-lg dark:border-gray-700 dark:bg-gray-800">
391-
<h2 className="mb-4 text-xl font-semibold text-gray-900 dark:text-white">
401+
<section
402+
className="mt-8 rounded-xl border border-gray-200 bg-white p-6 shadow-lg dark:border-gray-700 dark:bg-gray-800"
403+
aria-labelledby="search-params-heading"
404+
>
405+
<h2
406+
id="search-params-heading"
407+
className="mb-4 text-xl font-semibold text-gray-900 dark:text-white"
408+
>
392409
Update Search Parameters
393410
</h2>
394411
<p className="mb-4 text-sm text-gray-600 dark:text-gray-300">

‎epicshop/epic-me/app/routes/index.tsx‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -446,8 +446,11 @@ function KVEntryCard({ kvEntry }: { kvEntry: KVEntry }) {
446446
// Component for database reset section
447447
function DatabaseResetSection() {
448448
return (
449-
<section>
450-
<h2 className="mb-6 text-2xl font-bold text-gray-900 dark:text-white">
449+
<section aria-labelledby="db-reset-heading">
450+
<h2
451+
id="db-reset-heading"
452+
className="mb-6 text-2xl font-bold text-gray-900 dark:text-white"
453+
>
451454
Database Reset
452455
</h2>
453456
<div className="rounded-lg border border-gray-200 bg-white p-6 shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:shadow-gray-900/50">
@@ -457,13 +460,17 @@ function DatabaseResetSection() {
457460
fresh data.
458461
</p>
459462

460-
<div className="mb-6 rounded-lg border border-yellow-200 bg-yellow-50 p-4 dark:border-yellow-700 dark:bg-yellow-900/20">
463+
<div
464+
className="mb-6 rounded-lg border border-yellow-200 bg-yellow-50 p-4 dark:border-yellow-700 dark:bg-yellow-900/20"
465+
role="alert"
466+
>
461467
<div className="flex">
462468
<div className="flex-shrink-0">
463469
<svg
464470
className="h-5 w-5 text-yellow-400 dark:text-yellow-300"
465471
viewBox="0 0 20 20"
466472
fill="currentColor"
473+
aria-hidden="true"
467474
>
468475
<path
469476
fillRule="evenodd"
@@ -490,7 +497,8 @@ function DatabaseResetSection() {
490497
<input type="hidden" name="intent" value="reset-database" />
491498
<button
492499
type="submit"
493-
className="rounded-lg bg-red-600 px-6 py-3 font-bold text-white transition-colors duration-200 hover:bg-red-700"
500+
className="rounded-lg bg-red-600 px-6 py-3 font-bold text-white transition-colors duration-200 hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:outline-none"
501+
aria-describedby="reset-warning"
494502
onClick={(e) => {
495503
if (
496504
!confirm(
@@ -503,6 +511,10 @@ function DatabaseResetSection() {
503511
>
504512
Reset Database and KV Store
505513
</button>
514+
<div id="reset-warning" className="sr-only">
515+
Warning: This action will permanently delete all data and cannot be
516+
undone.
517+
</div>
506518
</Form>
507519
</div>
508520
</section>
@@ -520,15 +532,24 @@ export default function Home({ loaderData }: Route.ComponentProps) {
520532
return (
521533
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-8 dark:from-gray-900 dark:to-gray-800">
522534
<div className="mx-auto max-w-6xl">
523-
<h1 className="mb-8 text-4xl font-bold text-gray-900 dark:text-white">
524-
Epic Me App
525-
</h1>
526-
527-
<section className="mb-12">
528-
<h2 className="mb-6 text-2xl font-bold text-gray-800 dark:text-gray-200">
535+
<header>
536+
<h1 className="mb-8 text-4xl font-bold text-gray-900 dark:text-white">
537+
Epic Me App
538+
</h1>
539+
</header>
540+
541+
<section className="mb-12" aria-labelledby="users-entries-heading">
542+
<h2
543+
id="users-entries-heading"
544+
className="mb-6 text-2xl font-bold text-gray-800 dark:text-gray-200"
545+
>
529546
Users & Entries
530547
</h2>
531-
<div className="h-[32rem] overflow-y-auto rounded-lg border border-gray-200 bg-white p-6 shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:shadow-gray-900/50">
548+
<div
549+
className="h-[32rem] overflow-y-auto rounded-lg border border-gray-200 bg-white p-6 shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:shadow-gray-900/50"
550+
role="region"
551+
aria-label="Users and entries data"
552+
>
532553
<div className="grid gap-8">
533554
{users.map((user) => (
534555
<UserCard key={user.id} user={user} />
@@ -539,8 +560,11 @@ export default function Home({ loaderData }: Route.ComponentProps) {
539560

540561
<hr className="my-6" />
541562

542-
<section>
543-
<h2 className="mb-6 text-2xl font-bold text-gray-900 dark:text-white">
563+
<section aria-labelledby="kv-entries-heading">
564+
<h2
565+
id="kv-entries-heading"
566+
className="mb-6 text-2xl font-bold text-gray-900 dark:text-white"
567+
>
544568
KV Store Entries ({kvEntries.length})
545569
</h2>
546570
<div className={kvContainerClass}>

0 commit comments

Comments
 (0)