apt-get/strimserve
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

yay accessibility!

Browse Source 
aria tags + better touchscreen support
This commit is contained in:
apt-get
2026-09-25 21:50:00 +02:00
parent 83cc73acff
commit 3aae8a0130
8 changed files with 80 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/WeightedTags.svelte
+12 -1
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { TAG_WEIGHT_NAMES } from '$lib/stores.svelte.ts';
import type { TagWeights } from '$lib/types';
let { tags, highlighted = {} }: { tags: TagWeights; highlighted?: Record<string, number> } =
@@ -9,7 +10,8 @@
{#each sorted as [tag, weight], i}{i ? ', ' : ''}<span
class="weight-{weight}"
class:highlighted={tag in highlighted}>{tag}</span
class:highlighted={tag in highlighted}
>{tag}<span class="screen-reader-only"> ({TAG_WEIGHT_NAMES[weight]})</span></span
>{/each}
<style>
@@ -30,4 +32,13 @@
.highlighted {
background: rgba(255, 220, 0, 0.18);
}
.screen-reader-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
</style>
src/lib/stores.svelte.ts
+1
View File
@@ -9,6 +9,7 @@ $effect.root(() => {
});
export const MAX_TAG_WEIGHT = 3;
export const TAG_WEIGHT_NAMES = ['off', 'light', 'medium', 'heavy'];
export const tagList = [
'acoustic',
src/routes/streams/Footer.svelte
-1
View File
@@ -38,7 +38,6 @@
a,
a:visited {
outline: none;
color: black;
}
</style>
src/routes/streams/Sidebar.svelte
+31 -3
View File
@@ -102,12 +102,16 @@
/>
<button
onclick={() => (cachedOnly = !cachedOnly)}
aria-label="Downloaded only"
aria-pressed={cachedOnly}
class="material-icons filter-download {cachedOnly
? 'select-faves-star'
: 'unselect-faves-star'}">file_download</button
>
<button
onclick={() => (favoritesOnly = !favoritesOnly)}
aria-label="Favorites only"
aria-pressed={favoritesOnly}
class="material-icons {favoritesOnly ? '' : 'un'}select-faves-star">star</button
>
</div>
@@ -125,7 +129,11 @@
class="stream-item {current ? 'current-stream' : ''}"
id="stream-{stream.id}"
>
<button class="stream-item-button" onclick={() => goto('/streams/' + stream.id)}>
<button
class="stream-item-button"
aria-current={current ? 'page' : undefined}
onclick={() => goto('/streams/' + stream.id)}
>
<span class="stream-item-id">
ID:
{shorthandCode(stream.id)}</span
@@ -135,12 +143,12 @@
<span class="stream-item-length">{formatSecondsToHms(stream.length_seconds)}</span>
<p class="stream-item-tags" hidden={!Object.keys(stream.tags).length}>
<span class="stream-item-tags" hidden={!Object.keys(stream.tags).length}>
<span class="stream-item-tags-label">Tags:</span>
<span class="stream-item-tags-list"
><WeightedTags tags={stream.tags} highlighted={filteredTags} /></span
>
</p>
</span>
</button>
<button
@@ -148,6 +156,8 @@
e.stopPropagation();
updateFavorites(stream);
}}
aria-label="Favorite"
aria-pressed={favorited}
class="material-icons stream-item-star {favorited ? 'stream-item-star-faved' : ''}"
>{favorited ? 'star' : 'star_border'}</button
>
@@ -159,6 +169,7 @@
e.stopPropagation();
streamCache.remove(stream.id);
}}
aria-label="Delete download"
class="material-icons stream-item-cached stream-item-cached-btn">delete</button
>
{:else}
@@ -168,6 +179,7 @@
e.stopPropagation();
streamCache.download(stream);
}}
aria-label={partial ? 'Resume download' : 'Download'}
title={partial
? `Partially downloaded (${Math.round((partial.received / partial.total) * 100)}%). Click to resume.`
: undefined}
@@ -350,6 +362,22 @@
border: 0;
}
.stream-item .stream-item-star:focus-visible,
.stream-item .stream-item-cached-btn:focus-visible {
opacity: 1;
}
/* touch screens can't hover, so always display */
@media (hover: none) {
.stream-item-star {
opacity: 0.5;
}
.stream-item-cached {
opacity: 0.4;
}
}
@media (max-width: 575px) {
.stream-item-star {
opacity: 0.5;
src/routes/streams/TagSelect.svelte
+2 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import Select from 'svelte-select';
import { tagList, MAX_TAG_WEIGHT } from '$lib/stores.svelte.ts';
import { tagList, MAX_TAG_WEIGHT, TAG_WEIGHT_NAMES } from '$lib/stores.svelte.ts';
// type not exported in the lib itself
type SelectItem = Record<string, unknown>;
@@ -115,6 +115,7 @@
<button
type="button"
class="weight"
aria-label="{selection.label}, at least {TAG_WEIGHT_NAMES[min]}, press to change"
onpointerup={(e) => e.stopPropagation()}
onclick={(e) => cycle(tag, e.shiftKey)}
>
src/routes/streams/[stream_id]/MetadataEditor.svelte
+2 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { page } from '$app/state';
import { tagList, MAX_TAG_WEIGHT } from '$lib/stores.svelte.ts';
import { tagList, MAX_TAG_WEIGHT, TAG_WEIGHT_NAMES } from '$lib/stores.svelte.ts';
import type { TagWeights } from '$lib/types';
let { original = $bindable() } = $props();
@@ -42,6 +42,7 @@
type="button"
class="tag-pill"
class:off={!weight}
aria-label="{tag}, {TAG_WEIGHT_NAMES[weight]}"
onclick={(e) => cycle(tag, e.shiftKey)}
>
{tag}<span class="dots">{'·'.repeat(weight)}</span>
src/routes/streams/[stream_id]/Player.svelte
+16 -7
View File
@@ -246,7 +246,7 @@
seekText = formatSeconds(seekValue);
}
function trackMouse(event: MouseEvent) {
function trackPointer(event: MouseEvent) {
if (seeking) updateSeekVisual(event);
if (showTooltip && !disableTooltip) seekTooltip(event);
if (volumeSeeking) seekVolume(event);
@@ -265,7 +265,7 @@
<svelte:window
bind:innerWidth
bind:innerHeight
onmouseup={() => {
onpointerup={() => {
if (seeking && pendingSeekTime != null) {
audio.currentTime = pendingSeekTime;
currentTime = pendingSeekTime;
@@ -274,7 +274,11 @@
}
seeking = volumeSeeking = false;
}}
onmousemove={trackMouse}
onpointercancel={() => {
pendingSeekTime = null;
seeking = volumeSeeking = false;
}}
onpointermove={trackPointer}
/>
{#if display}
@@ -282,6 +286,7 @@
<button
class="material-icons"
style="--icon-color:{iconColor}"
aria-label={paused ? 'Play' : 'Pause'}
onclick={() => (audio.paused ? audio.play() : audio.pause())}
>
{#if paused}
@@ -294,12 +299,12 @@
bind:this={songBar}
value={seeking && pendingSeekTime != null ? pendingSeekTime : currentTime || 0}
max={duration}
onmousedown={(e) => {
onpointerdown={(e) => {
seeking = true;
updateSeekVisual(e);
}}
onmouseenter={() => (showTooltip = true)}
onmouseleave={() => (showTooltip = false)}
onpointerenter={() => (showTooltip = true)}
onpointerleave={() => (showTooltip = false)}
style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
class="song-progress"
></progress>
@@ -309,6 +314,8 @@
<button
style="--icon-color:{iconColor}"
class="material-icons"
aria-label="Mute"
aria-pressed={muted}
onclick={() => (muted = !muted)}
>
{#if muted}
@@ -324,7 +331,7 @@
<progress
bind:this={volumeBar}
value={volume}
onmousedown={() => (volumeSeeking = true)}
onpointerdown={() => (volumeSeeking = true)}
onclick={seekVolume}
style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
class="volume-progress"
@@ -448,6 +455,8 @@
margin: auto;
margin-left: 5px;
margin-right: 5px;
/* make finger drags seek */
touch-action: none;
}
progress::-webkit-progress-bar {
src/routes/streams/[stream_id]/StreamPage.svelte
+16 -1
View File
@@ -31,12 +31,16 @@
<tbody>
<tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
{#each ctx.current.tracks as track, i}
<tr class:current={i == ctx.songIndex}>
<tr
class:current={i == ctx.songIndex}
aria-current={i == ctx.songIndex ? 'true' : undefined}
>
<td class="timestamp-field"
><div class="timestamp-field-flex">
{formatTrackTime(track[0])}
<button
onclick={() => jumpToTrack(track[0])}
aria-label="Play from {formatTrackTime(track[0])}"
class="material-icons"
style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
>fast_forward</button
@@ -180,6 +184,17 @@
border: 0;
}
tr .material-icons:focus-visible {
opacity: 1;
}
/* touch screens can't hover, so always display */
@media (hover: none) {
.material-icons {
opacity: 0.5;
}
}
@media (max-width: 575px) {
.material-icons {
opacity: 0.5;