feat(web): improve group-tab accessibility (#11647)

feat(web): improve GroupTab accessibility

web/src/lib/components/album-page/albums-controls.svelte

@@ -129,6 +129,7 @@
 <!-- Filter Albums by Sharing Status (All, Owned, Shared) -->
 <div class="hidden xl:block h-10">
   <GroupTab
+    label={$t('show_albums')}
     filters={Object.values(albumFilterNames)}
     selected={selectedFilterOption}
     onSelect={(selected) => handleChangeAlbumFilter(selected, AlbumFilter.All)}

web/src/lib/components/elements/group-tab.svelte

@@ -1,22 +1,35 @@
 <script lang="ts">
+  import { generateId } from '$lib/utils/generate-id';
+
   export let filters: string[];
   export let selected: string;
+  export let label: string;
   export let onSelect: (selected: string) => void;
+
+  const id = `group-tab-${generateId()}`;
 </script>
 
-<div class="flex bg-gray-200 dark:bg-immich-dark-gray rounded-2xl h-full">
+<fieldset
+  class="dark:bg-immich-dark-gray flex h-full rounded-2xl bg-gray-200 ring-gray-400 has-[:focus-visible]:ring dark:ring-gray-600"
+>
+  <legend class="sr-only">{label}</legend>
   {#each filters as filter, index}
-    <button
+    <div class="group">
-      type="button"
+      <input
-      class="text-sm px-4 {filter === selected
+        type="radio"
-        ? 'dark:bg-gray-700 bg-gray-300'
+        name={id}
-        : 'dark:hover:bg-gray-800 hover:bg-gray-300'}  {index === 0 ? 'rounded-l-2xl' : ''} {index ===
+        id="{id}-{index}"
-      filters.length - 1
+        class="peer sr-only"
-        ? 'rounded-r-2xl'
+        value={filter}
-        : ''}"
+        checked={filter === selected}
-      on:click={() => onSelect(filter)}
+        on:change={() => onSelect(filter)}
-    >
+      />
-      {filter}
+      <label
-    </button>
+        for="{id}-{index}"
+        class="flex h-full cursor-pointer items-center px-4 text-sm hover:bg-gray-300 group-first-of-type:rounded-s-2xl group-last-of-type:rounded-e-2xl peer-checked:bg-gray-300 dark:hover:bg-gray-800 peer-checked:dark:bg-gray-700"
+      >
+        {filter}
+      </label>
+    </div>
   {/each}
-</div>
+</fieldset>

web/src/lib/i18n/en.json

@@ -1084,6 +1084,7 @@
   "sharing_sidebar_description": "Display a link to Sharing in the sidebar",
   "shift_to_permanent_delete": "press ⇧ to permanently delete asset",
   "show_album_options": "Show album options",
+  "show_albums": "Show albums",
   "show_all_people": "Show all people",
   "show_and_hide_people": "Show & hide people",
   "show_file_location": "Show file location",

web/src/routes/(user)/albums/+page.svelte

@@ -24,6 +24,7 @@
   <div class="xl:hidden">
     <div class="w-fit h-14 dark:text-immich-dark-fg py-2">
       <GroupTab
+        label={$t('show_albums')}
         filters={Object.keys(AlbumFilter)}
         selected={$albumViewSettings.filter}
         onSelect={(selected) => ($albumViewSettings.filter = selected)}