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/__test__/star-rating.spec.ts

@@ -0,0 +1,78 @@
+import StarRating from '$lib/components/shared-components/star-rating.svelte';
+import { render } from '@testing-library/svelte';
+
+describe('StarRating component', () => {
+  it('renders correctly', () => {
+    const component = render(StarRating, {
+      count: 3,
+      rating: 2,
+      readOnly: false,
+      onRating: vi.fn(),
+    });
+    const container = component.getByTestId('star-container') as HTMLImageElement;
+    expect(container.className).toBe('flex flex-row');
+
+    const radioButtons = component.getAllByRole('radio') as HTMLInputElement[];
+    expect(radioButtons.length).toBe(3);
+    const labels = component.getAllByTestId('star') as HTMLLabelElement[];
+    expect(labels.length).toBe(3);
+    const labelText = component.getAllByText('rating_count') as HTMLSpanElement[];
+    expect(labelText.length).toBe(3);
+    const clearButton = component.getByRole('button') as HTMLButtonElement;
+    expect(clearButton).toBeInTheDocument();
+
+    // Check the clear button content
+    expect(clearButton.textContent).toBe('rating_clear');
+
+    // Check the initial state
+    expect(radioButtons[0].checked).toBe(false);
+    expect(radioButtons[1].checked).toBe(true);
+    expect(radioButtons[2].checked).toBe(false);
+
+    // Check the radio button attributes
+    for (const [index, radioButton] of radioButtons.entries()) {
+      expect(radioButton.id).toBe(labels[index].htmlFor);
+      expect(radioButton.name).toBe('stars');
+      expect(radioButton.value).toBe((index + 1).toString());
+      expect(radioButton.disabled).toBe(false);
+      expect(radioButton.className).toBe('sr-only');
+    }
+
+    // Check the label attributes
+    for (const label of labels) {
+      expect(label.className).toBe('cursor-pointer');
+      expect(label.tabIndex).toBe(-1);
+    }
+  });
+
+  it('renders correctly with readOnly', () => {
+    const component = render(StarRating, {
+      count: 3,
+      rating: 2,
+      readOnly: true,
+      onRating: vi.fn(),
+    });
+    const radioButtons = component.getAllByRole('radio') as HTMLInputElement[];
+    expect(radioButtons.length).toBe(3);
+    const labels = component.getAllByTestId('star') as HTMLLabelElement[];
+    expect(labels.length).toBe(3);
+    const clearButton = component.queryByRole('button');
+    expect(clearButton).toBeNull();
+
+    // Check the initial state
+    expect(radioButtons[0].checked).toBe(false);
+    expect(radioButtons[1].checked).toBe(true);
+    expect(radioButtons[2].checked).toBe(false);
+
+    // Check the radio button attributes
+    for (const [index, radioButton] of radioButtons.entries()) {
+      expect(radioButton.id).toBe(labels[index].htmlFor);
+      expect(radioButton.disabled).toBe(true);
+    }
+
+    // Check the label attributes
+    for (const label of labels) {
+      expect(label.className).toBe('');
+    }
+  });
+});