leaflet.pub
a tool for shared writing and social publishing
add aria labels to tag popover
awarm.space
+6
-3
app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
+6
-3
app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
···
329
329
<Popover
330
330
className="p-2! max-w-xs"
331
331
trigger={
332
-
<div className="tags flex gap-1 items-center ">
333
-
<TagTiny /> {props.tagCount}
332
+
<div
333
+
className="tags flex gap-1 items-center"
334
+
aria-label={`${props.tagCount} tag${props.tagCount === 1 ? "" : "s"}`}
335
+
>
336
+
<TagTiny aria-hidden /> {props.tagCount}
334
337
</div>
335
338
}
336
339
>
···
342
345
const TagList = (props: { className?: string; tags: string[] | undefined }) => {
343
346
if (!props.tags) return;
344
347
return (
345
-
<div className="flex gap-1 flex-wrap">
348
+
<div className="flex gap-1 flex-wrap" role="list" aria-label="Tags">
346
349
{props.tags.map((tag, index) => (
347
350
<Tag name={tag} key={index} className={props.className} />
348
351
))}
+6
-3
components/InteractionsPreview.tsx
+6
-3
components/InteractionsPreview.tsx
···
101
101
<Popover
102
102
className="p-2! max-w-xs"
103
103
trigger={
104
-
<div className="relative flex gap-1 items-center hover:text-accent-contrast">
105
-
<TagTiny /> {props.tags.length}
104
+
<div
105
+
className="relative flex gap-1 items-center hover:text-accent-contrast"
106
+
aria-label={`${props.tags.length} tag${props.tags.length === 1 ? "" : "s"}`}
107
+
>
108
+
<TagTiny aria-hidden /> {props.tags.length}
106
109
</div>
107
110
}
108
111
>
···
113
116
114
117
const TagList = (props: { tags: string[]; className?: string }) => {
115
118
return (
116
-
<div className="flex gap-1 flex-wrap">
119
+
<div className="flex gap-1 flex-wrap" role="list" aria-label="Tags">
117
120
{props.tags.map((tag, index) => (
118
121
<Tag name={tag} key={index} className={props.className} />
119
122
))}
+1
components/Tags.tsx
+1
components/Tags.tsx