fix(web): rating stars accessibility (#11966)

* fix(web): exif ratings accessibility

* chore: add tests

* fix: eslint errors

* fix: clean up issues from changes in use:focusOutside

web/src/lib/components/shared-components/star-rating.svelte

@@ -1,15 +1,25 @@
 <script lang="ts">
+  import { focusOutside } from '$lib/actions/focus-outside';
+  import { shortcuts } from '$lib/actions/shortcut';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { generateId } from '$lib/utils/generate-id';
+  import { t } from 'svelte-i18n';
 
   export let count = 5;
   export let rating: number;
   export let readOnly = false;
   export let onRating: (rating: number) => void | undefined;
 
+  let ratingSelection = 0;
   let hoverRating = 0;
+  let focusRating = 0;
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  $: ratingSelection = rating;
 
   const starIcon =
     'M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z';
+  const id = generateId();
 
   const handleSelect = (newRating: number) => {
     if (readOnly) {
@@ -17,34 +27,93 @@
     }
 
     if (newRating === rating) {
-      newRating = 0;
+      return;
     }
 
-    rating = newRating;
+    onRating(newRating);
+  };
 
-    onRating?.(rating);
+  const setHoverRating = (value: number) => {
+    if (readOnly) {
+      return;
+    }
+    hoverRating = value;
+  };
+
+  const reset = () => {
+    setHoverRating(0);
+    focusRating = 0;
+  };
+
+  const handleSelectDebounced = (value: number) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      handleSelect(value);
+    }, 300);
   };
 </script>
 
-<div role="presentation" tabindex="-1" on:mouseout={() => (hoverRating = 0)} on:blur|preventDefault>
-  {#each { length: count } as _, index}
-    {@const value = index + 1}
-    {@const filled = hoverRating >= value || (hoverRating === 0 && rating >= value)}
-    <button
-      type="button"
-      on:click={() => handleSelect(value)}
-      on:mouseover={() => (hoverRating = value)}
-      on:focus|preventDefault={() => (hoverRating = value)}
-      class="shadow-0 outline-0 text-immich-primary dark:text-immich-dark-primary"
-      disabled={readOnly}
-    >
-      <Icon
-        path={starIcon}
-        size="1.5em"
-        strokeWidth={1}
-        color={filled ? 'currentcolor' : 'transparent'}
-        strokeColor={filled ? 'currentcolor' : '#c1cce8'}
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<fieldset
+  class="text-immich-primary dark:text-immich-dark-primary w-fit cursor-default"
+  on:mouseleave={() => setHoverRating(0)}
+  use:focusOutside={{ onFocusOut: reset }}
+  use:shortcuts={[
+    { shortcut: { key: 'ArrowLeft' }, preventDefault: false, onShortcut: (event) => event.stopPropagation() },
+    { shortcut: { key: 'ArrowRight' }, preventDefault: false, onShortcut: (event) => event.stopPropagation() },
+  ]}
+>
+  <legend class="sr-only">{$t('rating')}</legend>
+  <div class="flex flex-row" data-testid="star-container">
+    {#each { length: count } as _, index}
+      {@const value = index + 1}
+      {@const filled = hoverRating >= value || (hoverRating === 0 && ratingSelection >= value)}
+      {@const starId = `${id}-${value}`}
+      <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <label
+        for={starId}
+        class:cursor-pointer={!readOnly}
+        class:ring-2={focusRating === value}
+        on:mouseover={() => setHoverRating(value)}
+        tabindex={-1}
+        data-testid="star"
+      >
+        <span class="sr-only">{$t('rating_count', { values: { count: value } })}</span>
+        <Icon
+          path={starIcon}
+          size="1.5em"
+          strokeWidth={1}
+          color={filled ? 'currentcolor' : 'transparent'}
+          strokeColor={filled ? 'currentcolor' : '#c1cce8'}
+          ariaHidden
+        />
+      </label>
+      <input
+        type="radio"
+        name="stars"
+        {value}
+        id={starId}
+        bind:group={ratingSelection}
+        disabled={readOnly}
+        on:focus={() => {
+          focusRating = value;
+        }}
+        on:change={() => handleSelectDebounced(value)}
+        class="sr-only"
       />
-    </button>
-  {/each}
-</div>
+    {/each}
+  </div>
+</fieldset>
+{#if ratingSelection > 0 && !readOnly}
+  <button
+    type="button"
+    on:click={() => {
+      ratingSelection = 0;
+      handleSelect(ratingSelection);
+    }}
+    class="cursor-pointer text-xs text-immich-primary dark:text-immich-dark-primary"
+  >
+    {$t('rating_clear')}
+  </button>
+{/if}