Retro Bulletin Board Systems on atproto. Web app and TUI.
lazy mirror of alyraffauf/atbbs
atbbs.xyz
forums
python
tui
atproto
bbs
web: fix arias
+16
-3
+5
-1
web/src/components/DialBBS.tsx
+5
-1
web/src/components/DialBBS.tsx
···
108
108
onChange={setInputValue}
109
109
required
110
110
className="sm:flex-1"
111
+
aria-autocomplete="list"
112
+
aria-expanded={focused && visibleSuggestions.length > 0}
113
+
aria-label="Dial a BBS by handle"
111
114
/>
112
115
<Button type="submit">go</Button>
113
116
<Button type="button" onClick={onRandom}>random</Button>
114
117
</form>
115
118
{focused && visibleSuggestions.length > 0 && (
116
119
<div className="relative">
117
-
<div className="absolute left-0 right-0 mt-1 bg-neutral-900 border border-neutral-800 rounded shadow-lg z-10">
120
+
<div role="listbox" className="absolute left-0 right-0 mt-1 bg-neutral-900 border border-neutral-800 rounded shadow-lg z-10">
118
121
{visibleSuggestions.map((entry) => (
119
122
<Link
120
123
key={entry.to}
121
124
to={entry.to}
125
+
role="option"
122
126
className="block px-3 py-2 text-sm text-neutral-300 hover:bg-neutral-800 first:rounded-t last:rounded-b"
123
127
>
124
128
{entry.name}
+3
-1
web/src/pages/Dashboard.tsx
+3
-1
web/src/pages/Dashboard.tsx
···
91
91
<DialBBS discovered={discovered} suggestions={suggestions} />
92
92
</div>
93
93
94
-
<div className="flex gap-4 border-b border-neutral-800 mb-6 overflow-x-auto">
94
+
<div role="tablist" className="flex gap-4 border-b border-neutral-800 mb-6 overflow-x-auto">
95
95
{tabs.map((entry) => (
96
96
<button
97
97
key={entry.key}
98
+
role="tab"
99
+
aria-selected={tab === entry.key}
98
100
onClick={() => setTab(entry.key)}
99
101
className={tab === entry.key ? TAB_STYLE_ACTIVE : TAB_STYLE_INACTIVE}
100
102
>
+5
-1
web/src/pages/Login.tsx
+5
-1
web/src/pages/Login.tsx
···
78
78
onChange={setHandle}
79
79
required
80
80
className="flex-1"
81
+
aria-autocomplete="list"
82
+
aria-expanded={focused && matches.length > 0}
83
+
aria-label="Enter your handle"
81
84
/>
82
85
<Button type="submit" disabled={busy}>
83
86
{busy ? "..." : "log in"}
···
85
88
</form>
86
89
{focused && matches.length > 0 && (
87
90
<div className="relative">
88
-
<div className="absolute left-0 right-0 mt-1 bg-neutral-900 border border-neutral-800 rounded shadow-lg z-10">
91
+
<div role="listbox" className="absolute left-0 right-0 mt-1 bg-neutral-900 border border-neutral-800 rounded shadow-lg z-10">
89
92
{matches.map((match) => (
90
93
<button
91
94
key={match.handle}
92
95
type="button"
96
+
role="option"
93
97
onClick={() => selectHandle(match.handle)}
94
98
className="flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-neutral-800 first:rounded-t last:rounded-b"
95
99
>
+3
web/src/pages/SysopModerate.tsx
+3
web/src/pages/SysopModerate.tsx
···
96
96
href={`https://pdsls.dev/at/${did}`}
97
97
target="_blank"
98
98
rel="noreferrer"
99
+
aria-label={`${bannedHandles[did] ?? did} (opens in new tab)`}
99
100
className="truncate text-neutral-300 hover:text-neutral-200"
100
101
>
101
102
{bannedHandles[did] ?? did}
···
135
136
href={`https://pdsls.dev/${p.uri}`}
136
137
target="_blank"
137
138
rel="noreferrer"
139
+
aria-label={`${p.handle} — ${p.title || p.body} (opens in new tab)`}
138
140
className="truncate text-neutral-300 hover:text-neutral-200"
139
141
>
140
142
{p.handle} — {p.title || p.body}
···
157
159
value={hideUri}
158
160
onChange={(e) => setHideUri(e.target.value)}
159
161
placeholder="at://did/collection/rkey"
162
+
aria-label="Post URI to hide"
160
163
className="flex-1 bg-neutral-900 border border-neutral-800 rounded px-3 py-2 text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-neutral-600"
161
164
/>
162
165
<Button onClick={hide}>hide</Button>