Skip to content

Commit cf291ea

Browse files
committed
fix(a11y): resolve accessibility warnings in PodcastView
- Replace clickable <span> elements with semantic <button> elements - Add proper button styling to maintain visual appearance - Remove unused imports (podcastView) and parameters (clickEvent) - Improve keyboard navigation support - Enhance screen reader compatibility All accessibility warnings are now resolved and the component is fully keyboard accessible.
1 parent c8edc34 commit cf291ea

File tree

1 file changed

+13
-6
lines changed

1 file changed

+13
-6
lines changed

src/ui/PodcastView/PodcastView.svelte

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
favorites,
99
localFiles,
1010
playlists,
11-
podcastView,
1211
queue,
1312
savedFeeds,
1413
viewState,
@@ -154,7 +153,7 @@ const handleSearch = debounce((event: CustomEvent<{ query: string }>) => {
154153
function handleClickPlaylist(
155154
event: CustomEvent<{ event: MouseEvent; playlist: Playlist }>,
156155
) {
157-
const { event: clickEvent, playlist } = event.detail;
156+
const { playlist } = event.detail;
158157
159158
if (playlist.name === $queue.name && $queue.episodes.length > 0) {
160159
// Only need to set the current episode if there isn't any.
@@ -193,7 +192,8 @@ function handleClickPlaylist(
193192
>
194193
<svelte:fragment slot="header">
195194
{#if selectedFeed}
196-
<span
195+
<button
196+
type="button"
197197
class="go-back"
198198
on:click={() => {
199199
selectedFeed = null;
@@ -209,13 +209,14 @@ function handleClickPlaylist(
209209
}}
210210
size={20}
211211
/> Latest Episodes
212-
</span>
212+
</button>
213213
<EpisodeListHeader
214214
text={selectedFeed.title}
215215
artworkUrl={selectedFeed.artworkUrl}
216216
/>
217217
{:else if selectedPlaylist}
218-
<span
218+
<button
219+
type="button"
219220
class="go-back"
220221
on:click={() => {
221222
selectedPlaylist = null;
@@ -231,7 +232,7 @@ function handleClickPlaylist(
231232
}}
232233
size={20}
233234
/> Latest Episodes
234-
</span>
235+
</button>
235236
<div
236237
style="display: flex; align-items: center; justify-content: center;"
237238
>
@@ -273,6 +274,12 @@ function handleClickPlaylist(
273274
cursor: pointer;
274275
margin-right: auto;
275276
opacity: 0.75;
277+
/* Remove default button styles */
278+
background: none;
279+
border: none;
280+
color: inherit;
281+
font: inherit;
282+
text-align: left;
276283
}
277284
278285
.go-back:hover {

0 commit comments

Comments
 (0)