vielle.dev
Personal Site
Add accessible aria-roles
+4
-2
src/components/playing/NowPlaying.astro
+4
-2
src/components/playing/NowPlaying.astro
···
49
--small-box-mask-png: url("${smallBoxMask.src}");
50
`}
51
>
52
-
<div class="player" tabindex="0">
53
<div class="spinner"></div>
54
55
<div class="record">
···
66
<div class="head"></div>
67
</div>
68
69
-
<now-playing data-render={dataTrack(track)}>
70
<a
71
slot="title"
72
href={dataTrack(track) ? track.external_urls.spotify : "#"}
···
49
--small-box-mask-png: url("${smallBoxMask.src}");
50
`}
51
>
52
+
<div class="player" tabindex="0" aria-label="Record player">
53
<div class="spinner"></div>
54
55
<div class="record">
···
66
<div class="head"></div>
67
</div>
68
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">
72
<a
73
slot="title"
74
href={dataTrack(track) ? track.external_urls.spotify : "#"}