fix(frontend): label every settings slider

frontend/__tests__/components/pages/settings/SliderAccessibility.spec.tsx

@@ -0,0 +1,66 @@
+import { cleanup, render } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
+import { afterEach, beforeEach, expect, it, vi } from "vite-plus/test";
+
+import "../../../__harness__/mock-static";
+import { Slider } from "../../../../src/ts/components/common/Slider";
+import { CustomBackgroundFilters } from "../../../../src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters";
+import { KeymapSize } from "../../../../src/ts/components/pages/settings/custom-setting/KeymapSize";
+import { SoundVolume } from "../../../../src/ts/components/pages/settings/custom-setting/SoundVolume";
+import { setFullConfigStore } from "../../../../src/ts/config/store";
+import { getDefaultConfig } from "../../../../src/ts/constants/default-config";
+
+vi.mock("idb", () => ({ openDB: async () => ({}) }));
+beforeEach(() => setFullConfigStore(getDefaultConfig()));
+afterEach(cleanup);
+
+it("names all six settings sliders", () => {
+  const view = render(() => (
+    <>
+      <KeymapSize />
+      <SoundVolume />
+      <CustomBackgroundFilters />
+    </>
+  ));
+  expect(view.getAllByRole("slider")).toHaveLength(6);
+  for (const name of [
+    "Keymap size",
+    "Sound volume",
+    "Background blur",
+    "Background brightness",
+    "Background saturation",
+    "Background opacity",
+  ]) {
+    expect(view.getByRole("slider", { name })).toBeInTheDocument();
+  }
+});
+
+it.each([
+  ["blur", "Background blur"],
+  ["brightness", "Background brightness"],
+  ["saturate", "Background saturation"],
+  ["opacity", "Background opacity"],
+])("connects the visible %s label to its control", (text, name) => {
+  const view = render(() => <CustomBackgroundFilters />);
+  expect(view.getByLabelText(text)).toBe(view.getByRole("slider", { name }));
+});
+
+it("updates the accessible name with reactive props", () => {
+  const [label, setLabel] = createSignal("Initial label");
+  const props = {
+    min: 0,
+    max: 1,
+    value: 0.5,
+    get label() {
+      return label();
+    },
+  };
+  const view = render(() => <Slider {...props} />);
+  expect(
+    view.getByRole("slider", { name: "Initial label" }),
+  ).toBeInTheDocument();
+  setLabel("Updated label");
+  expect(
+    view.getByRole("slider", { name: "Updated label" }),
+  ).toBeInTheDocument();
+});

frontend/src/ts/components/common/Slider.tsx

@@ -1,6 +1,8 @@
 import { createEffect, createSignal, JSXElement } from "solid-js";
 
 type Props = {
+  id?: string;
+  label: string;
   ref?: (el: HTMLInputElement) => void;
   value: number;
   min: number;
@@ -26,6 +28,8 @@ export function Slider(props: Props): JSXElement {
     <div class="grid w-full min-w-0 grid-cols-[3ch_minmax(0,1fr)] items-center gap-4">
       <div>{textToDisplay()}</div>
       <input
+        id={props.id}
+        aria-label={props.label}
         ref={props.ref}
         type="range"
         // horizontal drags go to the slider on touch; vertical swipes still scroll the page

frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx

@@ -1,4 +1,4 @@
-import { JSXElement } from "solid-js";
+import { createUniqueId, JSXElement } from "solid-js";
 
 import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
@@ -8,6 +8,10 @@ import { Slider } from "../../../common/Slider";
 import { SearchableSetting } from "../SearchableSetting";
 
 export function CustomBackgroundFilters(): JSXElement {
+  const blurId = createUniqueId();
+  const brightnessId = createUniqueId();
+  const saturateId = createUniqueId();
+  const opacityId = createUniqueId();
   let refBlur: HTMLInputElement | undefined = undefined;
   let refBrightness: HTMLInputElement | undefined = undefined;
   let refSaturate: HTMLInputElement | undefined = undefined;
@@ -34,8 +38,10 @@ export function CustomBackgroundFilters(): JSXElement {
       fullWidthInputs={
         <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
           <div class="grid grid-cols-[7rem_1fr] items-center gap-2">
-            <div>blur</div>
+            <label for={blurId}>blur</label>
             <Slider
+              id={blurId}
+              label="Background blur"
               ref={(el) => (refBlur = el)}
               min={0}
               max={5}
@@ -57,8 +63,10 @@ export function CustomBackgroundFilters(): JSXElement {
             />
           </div>
           <div class="grid grid-cols-[7rem_1fr] items-center gap-2">
-            <div>brightness</div>
+            <label for={brightnessId}>brightness</label>
             <Slider
+              id={brightnessId}
+              label="Background brightness"
               ref={(el) => (refBrightness = el)}
               min={0}
               max={2}
@@ -80,8 +88,10 @@ export function CustomBackgroundFilters(): JSXElement {
             />
           </div>
           <div class="grid grid-cols-[7rem_1fr] items-center gap-2">
-            <div>saturate</div>
+            <label for={saturateId}>saturate</label>
             <Slider
+              id={saturateId}
+              label="Background saturation"
               ref={(el) => (refSaturate = el)}
               min={0}
               max={2}
@@ -103,8 +113,10 @@ export function CustomBackgroundFilters(): JSXElement {
             />
           </div>
           <div class="grid grid-cols-[7rem_1fr] items-center gap-2">
-            <div>opacity</div>
+            <label for={opacityId}>opacity</label>
             <Slider
+              id={opacityId}
+              label="Background opacity"
               ref={(el) => (refOpacity = el)}
               min={0}
               max={1}

frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx

@@ -15,6 +15,7 @@ export function KeymapSize(): JSXElement {
       fa={configMetadata.keymapSize.fa}
       inputs={
         <Slider
+          label="Keymap size"
           min={0.5}
           max={3.5}
           step={0.1}

frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx

@@ -19,6 +19,7 @@ export function SoundVolume(): JSXElement {
       fa={configMetadata.soundVolume.fa}
       inputs={
         <Slider
+          label="Sound volume"
           min={0}
           max={1}
           step={0.1}