yay accessibility!

aria tags + better touchscreen support

src/routes/streams/Sidebar.svelte

@@ -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;