Adds a11y progress

src/lib/components/audio-a11y-progress.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let currentTime: number;
+	export let paused: boolean;
+	export let duration: number;
+</script>
+
+<progress
+	class="svelte-podcast-a11y-hidden"
+	data-paused={paused ? 'true' : 'false'}
+	max={duration}
+	value={currentTime}
+/>
+
+<style>
+	.svelte-podcast-a11y-hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+</style>

src/lib/components/audio.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { usePlayer, type PlayerElement } from './audio';
+	import AudioA11yProgress from '$lib/components/audio-a11y-progress.svelte';
 
 	// TODO: Abstract to a store so we can add actions like reqind 20s
 
@@ -67,5 +68,6 @@
 		on:emptied={(e) => console.log('emptied', e)}
 		on:load={(e) => console.log('load', e)}
 	/>
+	<AudioA11yProgress {currentTime} {paused} {duration} />
 	<slot {duration} />
 {/key}