From 96f80501430c3979af3a54a03c0370b6d550df03 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Thu, 8 Aug 2024 13:28:24 +0200
Subject: [PATCH] feat(web): improve group-tab accessibility (#11647)

feat(web): improve GroupTab accessibility
---
 .../album-page/albums-controls.svelte         |  1 +
 .../lib/components/elements/group-tab.svelte  | 41 ++++++++++++-------
 web/src/lib/i18n/en.json                      |  1 +
 web/src/routes/(user)/albums/+page.svelte     |  1 +
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/web/src/lib/components/album-page/albums-controls.svelte b/web/src/lib/components/album-page/albums-controls.svelte
index 793c2b4970..ae8178a805 100644
--- a/web/src/lib/components/album-page/albums-controls.svelte
+++ b/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)}
diff --git a/web/src/lib/components/elements/group-tab.svelte b/web/src/lib/components/elements/group-tab.svelte
index c2bc835295..f5e2f79350 100644
--- a/web/src/lib/components/elements/group-tab.svelte
+++ b/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
-      type="button"
-      class="text-sm px-4 {filter === selected
-        ? 'dark:bg-gray-700 bg-gray-300'
-        : 'dark:hover:bg-gray-800 hover:bg-gray-300'}  {index === 0 ? 'rounded-l-2xl' : ''} {index ===
-      filters.length - 1
-        ? 'rounded-r-2xl'
-        : ''}"
-      on:click={() => onSelect(filter)}
-    >
-      {filter}
-    </button>
+    <div class="group">
+      <input
+        type="radio"
+        name={id}
+        id="{id}-{index}"
+        class="peer sr-only"
+        value={filter}
+        checked={filter === selected}
+        on:change={() => onSelect(filter)}
+      />
+      <label
+        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>
diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json
index 172b1b5d05..807a192013 100644
--- a/web/src/lib/i18n/en.json
+++ b/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",
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index b4b1f5ee1a..35402ce331 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/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)}