vielle.dev
[Archived] Archived WIP of vielle.dev
Fix accessability of balloons
- not keyboard focusable for screen readers sake
- role="none" for screen readers
+4
-15
src/components/blog/Balloon.astro
+4
-15
src/components/blog/Balloon.astro
···
25
25
--timing: ${utils.getRandom(blog.balloons.timing)}s;
26
26
`}
27
27
>
28
-
<button
28
+
<div
29
29
class="balloon"
30
30
style={`--width: ${utils.getRandom(blog.balloons.size[0])}rem;
31
31
--height: ${utils.getRandom(blog.balloons.size[1])}rem;`}
32
32
tabindex="-1"
33
33
data-min-time={blog.balloons.time[0]}
34
34
data-max-time={blog.balloons.time[1]}
35
+
role="none"
35
36
>
36
37
<div class="cable-tie"></div>
37
38
<div class="tie"></div>
38
-
</button>
39
+
</div>
39
40
</div>
40
41
41
42
<script>
42
43
const balloons = document.querySelectorAll(".balloon");
43
44
console.log(balloons);
44
45
balloons.forEach((el) => {
45
-
if (!(el instanceof HTMLButtonElement)) return;
46
-
47
-
// reenable tab index as functional
48
-
el.tabIndex = 0;
46
+
if (!(el instanceof HTMLElement)) return;
49
47
50
48
const mintime = Number(el.dataset["minTime"] ?? "0");
51
49
const maxtime = Number(el.dataset["maxTime"] ?? "0");
···
275
273
276
274
@media (prefers-reduced-motion: no-preference) {
277
275
animation: infinite var(--timing) linear inv-tilt;
278
-
}
279
-
280
-
&:focus {
281
-
@media (prefers-reduced-motion: no-preference) {
282
-
outline: none;
283
-
animation:
284
-
infinite var(--timing) linear inv-tilt,
285
-
infinite 2s cubic-bezier(0.8, -0.4, 0.469, 1.692) bouncing;
286
-
}
287
276
}
288
277
}
289
278