Personal Site
Improve accessibility (i think)
+36
-20
+36
-20
src/components/home/feeds/Feeds.astro
+36
-20
src/components/home/feeds/Feeds.astro
···
29
29
to scrub across children etc. which is a logical default
30
30
but in this case is annoying as scrubbing is already possible via the tabs
31
31
-->
32
-
<div id="tab-container" tabindex="-1">
32
+
<div
33
+
id="tab-container"
34
+
tabindex="-1"
35
+
role="tablist"
36
+
aria-label="Social media feed"
37
+
>
33
38
{
34
39
tabs.map((tab, i) => (
35
-
<label>
36
-
<input
37
-
type="radio"
38
-
name="social-tab"
39
-
data-tab-for={tab.id}
40
-
checked={i === 0}
41
-
/>
42
-
{tab.icon &&
43
-
(typeof tab.icon === "string" ? (
44
-
<img src={tab.icon} alt="" />
45
-
) : (
46
-
<tab.icon />
47
-
))}
48
-
<span class="label">{tab.label}</span>
49
-
</label>
40
+
<div role="tab" aria-controls={"tab-contents-" + tab.id}>
41
+
<label>
42
+
<input
43
+
type="radio"
44
+
name="social-tab"
45
+
id={"tab-" + tab.id}
46
+
checked={i === 0}
47
+
/>
48
+
{tab.icon &&
49
+
(typeof tab.icon === "string" ? (
50
+
<img src={tab.icon} alt="" />
51
+
) : (
52
+
<tab.icon />
53
+
))}
54
+
<span class="label">{tab.label}</span>
55
+
</label>
56
+
</div>
50
57
))
51
58
}
52
59
</div>
53
60
54
61
<div class="feed-contents">
55
62
{
56
-
tabs.map((tab) => (
57
-
<div class="content" data-tab={tab.id}>
58
-
<tab.content />
63
+
tabs.map(({ id, content: Content }) => (
64
+
<div
65
+
class="content"
66
+
id={"tab-contents-" + id}
67
+
aria-labelledby={"tab-" + id}
68
+
role="tabpanel"
69
+
>
70
+
<Content />
59
71
</div>
60
72
))
61
73
}
···
69
81
set:html={tabs
70
82
.map(
71
83
({ id }) =>
72
-
`#tab-container:has([data-tab-for="${id}"]:checked) + .feed-contents [data-tab="${id}"] { /* show relevant tab */ }`,
84
+
`#tab-container:has([aria-controls="tab-contents-${id}"] :checked) + .feed-contents #tab-contents-${id} { display: var(--display, block); }`,
73
85
)
74
86
.join("\n")}
75
87
></style>
···
161
173
grid-area: contents;
162
174
overflow-y: auto;
163
175
min-height: 100%;
176
+
}
177
+
178
+
.feed-contents .content {
179
+
display: none;
164
180
}
165
181
</style>