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
--timing: ${utils.getRandom(blog.balloons.timing)}s;
26
`}
27
>
28
-
<button
29
class="balloon"
30
style={`--width: ${utils.getRandom(blog.balloons.size[0])}rem;
31
--height: ${utils.getRandom(blog.balloons.size[1])}rem;`}
32
tabindex="-1"
33
data-min-time={blog.balloons.time[0]}
34
data-max-time={blog.balloons.time[1]}
35
>
36
<div class="cable-tie"></div>
37
<div class="tie"></div>
38
-
</button>
39
</div>
40
41
<script>
42
const balloons = document.querySelectorAll(".balloon");
43
console.log(balloons);
44
balloons.forEach((el) => {
45
-
if (!(el instanceof HTMLButtonElement)) return;
46
-
47
-
// reenable tab index as functional
48
-
el.tabIndex = 0;
49
50
const mintime = Number(el.dataset["minTime"] ?? "0");
51
const maxtime = Number(el.dataset["maxTime"] ?? "0");
···
275
276
@media (prefers-reduced-motion: no-preference) {
277
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
}
288
}
289
···
25
--timing: ${utils.getRandom(blog.balloons.timing)}s;
26
`}
27
>
28
+
<div
29
class="balloon"
30
style={`--width: ${utils.getRandom(blog.balloons.size[0])}rem;
31
--height: ${utils.getRandom(blog.balloons.size[1])}rem;`}
32
tabindex="-1"
33
data-min-time={blog.balloons.time[0]}
34
data-max-time={blog.balloons.time[1]}
35
+
role="none"
36
>
37
<div class="cable-tie"></div>
38
<div class="tie"></div>
39
+
</div>
40
</div>
41
42
<script>
43
const balloons = document.querySelectorAll(".balloon");
44
console.log(balloons);
45
balloons.forEach((el) => {
46
+
if (!(el instanceof HTMLElement)) return;
47
48
const mintime = Number(el.dataset["minTime"] ?? "0");
49
const maxtime = Number(el.dataset["maxTime"] ?? "0");
···
273
274
@media (prefers-reduced-motion: no-preference) {
275
animation: infinite var(--timing) linear inv-tilt;
276
}
277
}
278