this repo has no description
aria: improve accessibility
+34
-32
+1
-1
app/src/components/Button.tsx
+1
-1
app/src/components/Button.tsx
···
19
19
20
20
return (
21
21
<button
22
-
class={`${styles[customProps.style || 'default']} rounded-xl px-3 py-2 border cursor-pointer active:scale-95 active:transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100`}
22
+
class={`${styles[customProps.style || 'default']} rounded-xl px-3 py-2 border cursor-pointer active:scale-95 active:transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100 focus-ring`}
23
23
{...restProps}
24
24
>
25
25
{safeChildren()}
+6
-6
app/src/components/Dialog.tsx
+6
-6
app/src/components/Dialog.tsx
···
19
19
<ArkDialog.Trigger asChild={(p) => <props.trigger {...p} />} />
20
20
<ArkDialog.Backdrop class="fixed inset-0 bg-black/50" />
21
21
<ArkDialog.Positioner class="flex items-center justify-center fixed inset-0">
22
-
<ArkDialog.Content class="bg-background rounded-lg p-4 border border-border">
22
+
<ArkDialog.Content class="bg-background rounded-lg p-4 border border-border mx-4">
23
23
<div class="flex border-b border-border mb-4 pb-1 flex-row justify-between">
24
24
<div>
25
25
<ArkDialog.Title class="font-bold text-2xl select-none">
26
26
{props.title}
27
27
</ArkDialog.Title>
28
28
{props.description && (
29
-
<ArkDialog.Description
30
-
class="text-zinc-600"
31
-
asChild={(pr) => <p {...pr} />}
32
-
>
29
+
<ArkDialog.Description class="text-zinc-600">
33
30
{props.description}
34
31
</ArkDialog.Description>
35
32
)}
36
33
</div>
37
-
<ArkDialog.CloseTrigger class="cursor-pointer">
34
+
<ArkDialog.CloseTrigger
35
+
class="cursor-pointer focus-ring"
36
+
aria-label="Close dialog"
37
+
>
38
38
x
39
39
</ArkDialog.CloseTrigger>
40
40
</div>
+13
-5
app/src/components/SignInDialog.tsx
+13
-5
app/src/components/SignInDialog.tsx
···
41
41
sign in to your account with your{' '}
42
42
<a
43
43
href="https://internethandle.org"
44
-
class="text-blue-400 hover:underline"
44
+
class="text-blue-400 hover:underline focus-ring"
45
45
target="_blank"
46
+
rel="noopener noreferrer"
46
47
>
47
48
internet handle
48
49
</a>
···
52
53
initialFocusEl={() => handleInputRef!}
53
54
>
54
55
<form
55
-
class="w-[400px]"
56
+
class="w-full max-w-[400px]"
56
57
onSubmit={(e) => {
57
58
e.preventDefault();
58
59
e.stopPropagation();
···
73
74
<span class="select-none">handle:</span>
74
75
<input
75
76
ref={handleInputRef}
77
+
id="handle-input"
76
78
value={field().state.value}
77
79
onBlur={field().handleBlur}
78
80
onInput={(e) =>
79
81
field().handleChange(e.target.value as Handle | Did)
80
82
}
81
83
placeholder="alice.bsky.social or did:plc:..."
82
-
class="border border-border-input bg-bg-input rounded-input px-3 py-2"
84
+
class="border border-border-input bg-bg-input rounded-input px-3 py-2 focus-ring"
85
+
aria-describedby="handle-error"
83
86
/>
84
-
<p class="text-red-400 font-semibold italic">
87
+
<p
88
+
id="handle-error"
89
+
class="text-red-400 font-semibold italic"
90
+
role="alert"
91
+
aria-live="polite"
92
+
>
85
93
{field().state.meta.errors}
86
94
</p>
87
95
</label>
···
89
97
/>
90
98
<Show when={authHost()}>
91
99
<p class="text-green-700 text-sm flex items-center gap-1">
92
-
<Check size={16} />
100
+
<Check size={16} aria-hidden="true" />
93
101
identified auth server as {authHost()}
94
102
</p>
95
103
</Show>
+5
-2
app/src/components/Toaster.tsx
+5
-2
app/src/components/Toaster.tsx
···
26
26
<ArkToast.Title class="font-semibold">
27
27
{toast().title}
28
28
</ArkToast.Title>
29
-
<ArkToast.CloseTrigger class="cursor-pointer">
30
-
x
29
+
<ArkToast.CloseTrigger
30
+
class="cursor-pointer focus-ring"
31
+
aria-label="Dismiss notification"
32
+
>
33
+
✕
31
34
</ArkToast.CloseTrigger>
32
35
</div>
33
36
<ArkToast.Description class="text-sm">
+3
-1
app/src/routes/__root.tsx
+3
-1
app/src/routes/__root.tsx
···
23
23
24
24
function RootComponent() {
25
25
return (
26
-
<html>
26
+
<html lang="en">
27
27
<head>
28
+
<meta charset="utf-8" />
29
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
28
30
<HydrationScript />
29
31
</head>
30
32
<body class="bg-background text-text font-mono">
+2
-3
app/src/routes/index.tsx
+2
-3
app/src/routes/index.tsx
···
1
1
import { createFileRoute } from '@tanstack/solid-router';
2
2
import { createServerFn } from '@tanstack/solid-start';
3
+
import { For } from 'solid-js';
3
4
4
5
import { prisma } from '~/server/db.server';
5
6
···
20
21
return (
21
22
<div>
22
23
<ul>
23
-
{users.map((user) => (
24
-
<li>{user.did}</li>
25
-
))}
24
+
<For each={users}>{(user) => <li>{user.did}</li>}</For>
26
25
</ul>
27
26
</div>
28
27
);
+4
-14
app/src/styles.css
+4
-14
app/src/styles.css
···
1
1
@import 'tailwindcss';
2
2
3
-
/*body {
4
-
@apply m-0;
5
-
font-family:
6
-
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
7
-
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
8
-
-webkit-font-smoothing: antialiased;
9
-
-moz-osx-font-smoothing: grayscale;
10
-
}
11
-
12
-
code {
13
-
font-family:
14
-
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
15
-
}*/
16
-
17
3
@font-face {
18
4
font-family: 'Iosevka';
19
5
font-style: normal;
···
63
49
--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.04);
64
50
--shadow-btn: 0px 1px 0px 1px rgba(0, 0, 0, 0.03);
65
51
}
52
+
53
+
@utility focus-ring {
54
+
@apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current;
55
+
}