vielle.dev
Personal Site
Add accessible aria-roles
+4
-2
src/components/playing/NowPlaying.astro
+4
-2
src/components/playing/NowPlaying.astro
···
49
49
--small-box-mask-png: url("${smallBoxMask.src}");
50
50
`}
51
51
>
52
-
<div class="player" tabindex="0">
52
+
<div class="player" tabindex="0" aria-label="Record player">
53
53
<div class="spinner"></div>
54
54
55
55
<div class="record">
···
66
66
<div class="head"></div>
67
67
</div>
68
68
69
-
<now-playing data-render={dataTrack(track)}>
69
+
<!-- aria-live=off means aria updates are only announced when focused.
70
+
this makes sense as what im listening too is irrelevant if -->
71
+
<now-playing data-render={dataTrack(track)} aria-live="off">
70
72
<a
71
73
slot="title"
72
74
href={dataTrack(track) ? track.external_urls.spotify : "#"}