From 1eb4d1c8ed254141ce55b47396085bc6e1bbec06 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sun, 5 Jul 2026 22:06:40 -0400
Subject: [PATCH 1/3] test(v2): add axe accessibility gate + keyboard nav tests
 to Storybook

Wire axe-core into the vitest Storybook runner so every v2 lib story is
scanned for accessibility violations, gated per story by the
@storybook/addon-a11y `a11y.test` parameter (error / todo / off) with a
global default of "error".

Fix the unlabeled-control violations this surfaces (icon-only buttons,
decorative images) and mark the remaining component-level gaps as `todo`
so CI stays green while the backlog stays visible. Add keyboard-operability
play() tests to RSwitch, RTabNav, and RRating.

Refs #1848

Generated-By: PostHog Code
Task-Id: b44aba2c-90c9-407d-8c80-5bbe77ecd6c1
---
 frontend/.storybook/preview.ts                |  4 +
 frontend/package-lock.json                    |  7 +-
 frontend/package.json                         |  1 +
 .../src/v2/lib/data/RTable/RTable.stories.ts  |  3 +
 .../lib/forms/RCheckbox/RCheckbox.stories.ts  |  8 +-
 .../forms/RDateField/RDateField.stories.ts    |  3 +
 .../lib/forms/RDropzone/RDropzone.stories.ts  |  3 +
 .../v2/lib/forms/RRating/RRating.stories.ts   | 34 ++++++++
 .../v2/lib/forms/RSelect/RSelect.stories.ts   |  5 ++
 .../v2/lib/forms/RSlider/RSlider.stories.ts   |  3 +
 .../v2/lib/forms/RSwitch/RSwitch.stories.ts   | 29 +++++++
 .../forms/RTextField/RTextField.stories.ts    |  8 ++
 .../lib/menus/RMenuItem/RMenuItem.stories.ts  |  5 ++
 .../overlays/RCarousel/RCarousel.stories.ts   |  4 +-
 .../RProgressCircular.stories.ts              |  3 +
 .../primitives/RSpinner/RSpinner.stories.ts   |  3 +
 .../lib/primitives/RTabNav/RTabNav.stories.ts | 41 +++++++++
 .../src/v2/lib/primitives/RTabNav/RTabNav.vue |  2 +-
 .../structural/RToolbar/RToolbar.stories.ts   |  6 +-
 .../structural/RTooltip/RTooltip.stories.ts   | 20 ++---
 frontend/test/storybook.test.ts               | 83 ++++++++++++++++++-
 21 files changed, 252 insertions(+), 23 deletions(-)

diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts
index 3e04df7872..1c424190dd 100644
--- a/frontend/.storybook/preview.ts
+++ b/frontend/.storybook/preview.ts
@@ -55,6 +55,10 @@ const preview: Preview = {
   parameters: {
     layout: "centered",
     backgrounds: { disable: true },
+    // Accessibility gate: axe fails on any violation; known gaps opt down to `test: "todo"`. See #1848.
+    a11y: {
+      test: "error",
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3916b11574..ea214ee79c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -48,6 +48,7 @@
         "@vitest/ui": "^4.1.5",
         "@vue/test-utils": "^2.4.9",
         "@vue/tsconfig": "^0.7.0",
+        "axe-core": "^4.12.1",
         "eslint": "^10.0.3",
         "eslint-plugin-vue": "^10.8.0",
         "eslint-plugin-vuejs-accessibility": "^2.5.0",
@@ -6130,9 +6131,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.0.tgz",
-      "integrity": "sha512-FTavr/7Ba0IptwGOPxnQvdyW2tAsdLBMTBXz7rKH6xJ2skpyxpBxyHkDdBs4lf69yRqYpkqCdfhnwS8YULGOmg==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.1.tgz",
+      "integrity": "sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==",
       "dev": true,
       "license": "MPL-2.0",
       "engines": {
diff --git a/frontend/package.json b/frontend/package.json
index 002d3be3d5..19105574bc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -75,6 +75,7 @@
     "@vitest/ui": "^4.1.5",
     "@vue/test-utils": "^2.4.9",
     "@vue/tsconfig": "^0.7.0",
+    "axe-core": "^4.12.1",
     "eslint": "^10.0.3",
     "eslint-plugin-vue": "^10.8.0",
     "eslint-plugin-vuejs-accessibility": "^2.5.0",
diff --git a/frontend/src/v2/lib/data/RTable/RTable.stories.ts b/frontend/src/v2/lib/data/RTable/RTable.stories.ts
index 350f81e8d1..653046167c 100644
--- a/frontend/src/v2/lib/data/RTable/RTable.stories.ts
+++ b/frontend/src/v2/lib/data/RTable/RTable.stories.ts
@@ -11,6 +11,9 @@ const meta: Meta = {
   // RTable is generic, so its component-typed shape doesn't fit
   // Storybook's `component` slot. The cast is narrow + intentional.
   component: RTable as never,
+  // a11y todo (#1848): grid roles need their required parent structure so
+  // rows/cells are announced correctly (incl. the mobile card-stack mode).
+  parameters: { a11y: { test: "todo" } },
   argTypes: {
     loading: { control: "boolean" },
     sortKey: { control: "text" },
diff --git a/frontend/src/v2/lib/forms/RCheckbox/RCheckbox.stories.ts b/frontend/src/v2/lib/forms/RCheckbox/RCheckbox.stories.ts
index 5e9c5d0eaa..63faea1357 100644
--- a/frontend/src/v2/lib/forms/RCheckbox/RCheckbox.stories.ts
+++ b/frontend/src/v2/lib/forms/RCheckbox/RCheckbox.stories.ts
@@ -79,7 +79,13 @@ export const Indeterminate: Story = {
   args: { label: "Some items selected", indeterminate: true },
 };
 
-export const NoLabel: Story = { args: {} };
+export const NoLabel: Story = {
+  render: () => ({
+    components: { RCheckbox },
+    setup: () => ({ value: ref(false) }),
+    template: `<RCheckbox v-model="value" aria-label="Accept" />`,
+  }),
+};
 
 // ── Multi-state ─────────────────────────────────────────────────────
 
diff --git a/frontend/src/v2/lib/forms/RDateField/RDateField.stories.ts b/frontend/src/v2/lib/forms/RDateField/RDateField.stories.ts
index 55262420c2..6e7f50bf58 100644
--- a/frontend/src/v2/lib/forms/RDateField/RDateField.stories.ts
+++ b/frontend/src/v2/lib/forms/RDateField/RDateField.stories.ts
@@ -5,6 +5,9 @@ import RDateField from "./RDateField.vue";
 const meta: Meta<typeof RDateField> = {
   title: "Forms/RDateField",
   component: RDateField,
+  // a11y todo (#1848): calendar grid cells use an unsupported role and the
+  // field input lacks a programmatic label. Needs a component-level fix.
+  parameters: { a11y: { test: "todo" } },
   argTypes: {
     firstDayOfWeek: {
       control: "inline-radio",
diff --git a/frontend/src/v2/lib/forms/RDropzone/RDropzone.stories.ts b/frontend/src/v2/lib/forms/RDropzone/RDropzone.stories.ts
index b02ca743ca..e04d48d9c9 100644
--- a/frontend/src/v2/lib/forms/RDropzone/RDropzone.stories.ts
+++ b/frontend/src/v2/lib/forms/RDropzone/RDropzone.stories.ts
@@ -6,6 +6,9 @@ import RDropzone from "./RDropzone.vue";
 const meta: Meta<typeof RDropzone> = {
   title: "Forms/RDropzone",
   component: RDropzone,
+  // a11y todo (#1848): the hidden file input needs a programmatic label
+  // tied to the visible drop-zone copy.
+  parameters: { a11y: { test: "todo" } },
   argTypes: {
     title: { control: "text" },
     hint: { control: "text" },
diff --git a/frontend/src/v2/lib/forms/RRating/RRating.stories.ts b/frontend/src/v2/lib/forms/RRating/RRating.stories.ts
index 849fc6a2db..0d92842108 100644
--- a/frontend/src/v2/lib/forms/RRating/RRating.stories.ts
+++ b/frontend/src/v2/lib/forms/RRating/RRating.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { expect, userEvent, within } from "storybook/test";
 import { ref } from "vue";
 import RRating from "./RRating.vue";
 
@@ -39,6 +40,39 @@ export const Default: Story = { args: { halfIncrements: true, hover: true } };
 export const Readonly: Story = { args: { readonly: true } };
 export const Large: Story = { args: { size: "large" } };
 
+// Keyboard operability — each star is a native `<button role="radio">`, so
+// Tab walks focus across them and Enter / Space commits the focused rating.
+export const KeyboardNav: Story = {
+  name: "Keyboard navigation (play)",
+  args: { ariaLabel: "Rating" },
+  render: (args) => ({
+    components: { RRating },
+    setup: () => {
+      const value = ref(0);
+      return { args, value };
+    },
+    template: `<RRating v-bind="args" v-model="value" />`,
+  }),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const stars = canvas.getAllByRole("radio");
+
+    await step("Tab focuses the stars in order", async () => {
+      await userEvent.tab();
+      expect(stars[0]).toHaveFocus();
+      await userEvent.tab();
+      await userEvent.tab();
+      expect(stars[2]).toHaveFocus();
+    });
+
+    await step("Enter commits the focused star as the rating", async () => {
+      await userEvent.keyboard("{Enter}");
+      expect(stars[2]).toHaveAttribute("aria-checked", "true");
+      expect(stars[0]).toHaveAttribute("aria-checked", "false");
+    });
+  },
+};
+
 // Difficulty preset — same primitive driven by props. Exercises the
 // new emptyIcon/fullIcon/activeColor pass-through used by the
 // score-picker on GameDetails.
diff --git a/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts b/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts
index 7b033a5844..bf34467316 100644
--- a/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts
+++ b/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts
@@ -177,6 +177,8 @@ export const Disabled: Story = {
 };
 
 export const Loading: Story = {
+  // a11y todo (#1848): loading spinner (role="progressbar") needs a name.
+  parameters: { a11y: { test: "todo" } },
   args: { placeholder: "Loading platforms…", loading: true },
 };
 
@@ -211,6 +213,9 @@ export const Validation: Story = {
 // ── Clearable ──────────────────────────────────────────────────────
 
 export const Clearable: Story = {
+  // a11y todo (#1848): the clear affordance nests an interactive control
+  // inside the combobox; needs restructuring so roles don't nest.
+  parameters: { a11y: { test: "todo" } },
   render: () => ({
     components: { RSelect },
     setup: () => ({ value: ref("psx"), items: PLATFORMS }),
diff --git a/frontend/src/v2/lib/forms/RSlider/RSlider.stories.ts b/frontend/src/v2/lib/forms/RSlider/RSlider.stories.ts
index 59aeec3071..b53786008e 100644
--- a/frontend/src/v2/lib/forms/RSlider/RSlider.stories.ts
+++ b/frontend/src/v2/lib/forms/RSlider/RSlider.stories.ts
@@ -5,6 +5,9 @@ import RSlider from "./RSlider.vue";
 const meta: Meta<typeof RSlider> = {
   title: "Forms/RSlider",
   component: RSlider,
+  // a11y todo (#1848): the slider thumb needs an accessible name (label or
+  // aria-label). Track a labelling API / required-label lint on RSlider.
+  parameters: { a11y: { test: "todo" } },
   argTypes: {
     min: { control: "number" },
     max: { control: "number" },
diff --git a/frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts b/frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts
index 3766265e97..af218ab668 100644
--- a/frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts
+++ b/frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { expect, userEvent, within } from "storybook/test";
 import { ref } from "vue";
 import RSwitch from "./RSwitch.vue";
 
@@ -59,3 +60,31 @@ export const Small: Story = {
 export const Disabled: Story = {
   args: { label: "Disabled", disabled: true },
 };
+
+// Keyboard operability — the switch is a native `<button role="switch">`,
+// so Tab focuses it and Space / Enter flip `aria-checked` without any
+// custom key handling.
+export const KeyboardToggle: Story = {
+  name: "Keyboard toggle (play)",
+  args: { label: "Notifications" },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const sw = canvas.getByRole("switch");
+
+    await step("Tab moves focus onto the switch", async () => {
+      await userEvent.tab();
+      expect(sw).toHaveFocus();
+      expect(sw).toHaveAttribute("aria-checked", "false");
+    });
+
+    await step("Space toggles it on", async () => {
+      await userEvent.keyboard(" ");
+      expect(sw).toHaveAttribute("aria-checked", "true");
+    });
+
+    await step("Enter toggles it back off", async () => {
+      await userEvent.keyboard("{Enter}");
+      expect(sw).toHaveAttribute("aria-checked", "false");
+    });
+  },
+};
diff --git a/frontend/src/v2/lib/forms/RTextField/RTextField.stories.ts b/frontend/src/v2/lib/forms/RTextField/RTextField.stories.ts
index 7647812374..7ddc093aab 100644
--- a/frontend/src/v2/lib/forms/RTextField/RTextField.stories.ts
+++ b/frontend/src/v2/lib/forms/RTextField/RTextField.stories.ts
@@ -164,6 +164,7 @@ export const WithSubtitle: Story = {
 
 export const WithHint: Story = {
   args: {
+    label: "Email address",
     placeholder: "your@email.com",
     hint: "We'll only contact you about account events.",
     prependInnerIcon: "mdi-email",
@@ -172,6 +173,7 @@ export const WithHint: Story = {
 
 export const WithError: Story = {
   args: {
+    label: "Email address",
     placeholder: "your@email.com",
     error: true,
     errorMessages: "Must be a valid email address",
@@ -215,6 +217,8 @@ export const Validation: Story = {
 };
 
 export const Loading: Story = {
+  // a11y todo (#1848): loading spinner (role="progressbar") needs a name.
+  parameters: { a11y: { test: "todo" } },
   args: {
     placeholder: "Searching…",
     loading: true,
@@ -289,6 +293,10 @@ export const ColorLadder: Story = {
 // ── Real-world ─────────────────────────────────────────────────────
 
 export const LoginForm: Story = {
+  // a11y todo (#1848): the clickable append-inner icon (password reveal)
+  // renders as a button without an accessible name. Needs an RTextField
+  // API to label append/prepend-inner actions.
+  parameters: { a11y: { test: "todo" } },
   name: "Login (underlined)",
   render: () => ({
     components: { RTextField, RBtn },
diff --git a/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts b/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts
index fa4171a540..a4360e3c00 100644
--- a/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts
+++ b/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts
@@ -80,6 +80,9 @@ export const Variants: Story = {
 };
 
 export const WithNavigation: Story = {
+  // a11y todo (#1848): role="menuitem" needs its required menu parent. In
+  // the app RMenu provides it; the bare-item story renders without one.
+  parameters: { a11y: { test: "todo" } },
   render: () => ({
     components: { RMenuItem },
     setup: () => ({ panelStyle: PANEL_STYLE }),
@@ -99,6 +102,8 @@ export const WithNavigation: Story = {
 // and closing would unmount the <a> before the browser opens the new tab.
 // A plain click still activates the item normally.
 export const NewTabGesture: Story = {
+  // a11y todo (#1848): role="menuitem" needs its required menu parent.
+  parameters: { a11y: { test: "todo" } },
   name: "New-tab gesture (Ctrl/⌘-click)",
   args: {
     href: "#platforms",
diff --git a/frontend/src/v2/lib/overlays/RCarousel/RCarousel.stories.ts b/frontend/src/v2/lib/overlays/RCarousel/RCarousel.stories.ts
index 876fbcd8dd..3ebc326daf 100644
--- a/frontend/src/v2/lib/overlays/RCarousel/RCarousel.stories.ts
+++ b/frontend/src/v2/lib/overlays/RCarousel/RCarousel.stories.ts
@@ -58,7 +58,7 @@ export const Inline: Story = {
             <img :src="item" :alt="'Slide ' + (index + 1)" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px;" />
           </template>
           <template #thumbnail="{ item }">
-            <img :src="item" />
+            <img :src="item" alt="" />
           </template>
         </RCarousel>
       </div>
@@ -124,7 +124,7 @@ export const InlineLight: Story = {
             <img :src="item" :alt="'Slide ' + (index + 1)" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px;" />
           </template>
           <template #thumbnail="{ item }">
-            <img :src="item" />
+            <img :src="item" alt="" />
           </template>
         </RCarousel>
       </div>
diff --git a/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.stories.ts b/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.stories.ts
index d6108a2474..b5cd05a980 100644
--- a/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.stories.ts
+++ b/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.stories.ts
@@ -5,6 +5,9 @@ import RProgressCircular from "./RProgressCircular.vue";
 const meta: Meta<typeof RProgressCircular> = {
   title: "Primitives/RProgressCircular",
   component: RProgressCircular,
+  // a11y todo (#1848): role="progressbar" needs an accessible name. The
+  // consumer must supply one until RProgressCircular grows a labelling API.
+  parameters: { a11y: { test: "todo" } },
   argTypes: {
     indeterminate: { control: "boolean" },
     size: { control: "number" },
diff --git a/frontend/src/v2/lib/primitives/RSpinner/RSpinner.stories.ts b/frontend/src/v2/lib/primitives/RSpinner/RSpinner.stories.ts
index d9cb84afb1..cf386b91d5 100644
--- a/frontend/src/v2/lib/primitives/RSpinner/RSpinner.stories.ts
+++ b/frontend/src/v2/lib/primitives/RSpinner/RSpinner.stories.ts
@@ -4,6 +4,9 @@ import RSpinner from "./RSpinner.vue";
 const meta: Meta<typeof RSpinner> = {
   title: "Primitives/RSpinner",
   component: RSpinner,
+  // a11y todo (#1848): inherits RProgressCircular's role="progressbar";
+  // needs an accessible name from the consumer or a component-level default.
+  parameters: { a11y: { test: "todo" } },
   argTypes: {
     size: { control: "number" },
     width: { control: "number" },
diff --git a/frontend/src/v2/lib/primitives/RTabNav/RTabNav.stories.ts b/frontend/src/v2/lib/primitives/RTabNav/RTabNav.stories.ts
index ab6cd87ac8..6e74a177ee 100644
--- a/frontend/src/v2/lib/primitives/RTabNav/RTabNav.stories.ts
+++ b/frontend/src/v2/lib/primitives/RTabNav/RTabNav.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { expect, userEvent, within } from "storybook/test";
 import { ref } from "vue";
 import RTabNav from "./RTabNav.vue";
 
@@ -108,6 +109,46 @@ export const HiddenItems: Story = {
 // Image variant — items can carry a logo / brand mark via the `image`
 // field instead of an MDI icon. Mirrors the per-provider raw-metadata
 // tabs in EditRomDialog (IGDB / MobyGames / etc).
+// Keyboard operability — each tab is a native `<button role="tab">`, so
+// Tab walks focus across them in order and Enter / Space activates the
+// focused tab (flipping `aria-selected`).
+export const KeyboardNav: Story = {
+  name: "Keyboard navigation (play)",
+  args: {
+    modelValue: "overview",
+    items: [
+      { id: "overview", label: "Overview" },
+      { id: "media", label: "Media" },
+      { id: "notes", label: "Notes" },
+    ],
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const tabs = canvas.getAllByRole("tab");
+
+    await step("Tab focuses the tabs in DOM order", async () => {
+      await userEvent.tab();
+      expect(tabs[0]).toHaveFocus();
+      await userEvent.tab();
+      expect(tabs[1]).toHaveFocus();
+    });
+
+    await step("Enter activates the focused tab", async () => {
+      expect(tabs[1]).toHaveAttribute("aria-selected", "false");
+      await userEvent.keyboard("{Enter}");
+      expect(tabs[1]).toHaveAttribute("aria-selected", "true");
+      expect(tabs[0]).toHaveAttribute("aria-selected", "false");
+    });
+
+    await step("Space activates the next tab", async () => {
+      await userEvent.tab();
+      expect(tabs[2]).toHaveFocus();
+      await userEvent.keyboard(" ");
+      expect(tabs[2]).toHaveAttribute("aria-selected", "true");
+    });
+  },
+};
+
 export const WithImages: Story = {
   args: {
     size: "small",
diff --git a/frontend/src/v2/lib/primitives/RTabNav/RTabNav.vue b/frontend/src/v2/lib/primitives/RTabNav/RTabNav.vue
index 7278b14c50..c99691eb9e 100644
--- a/frontend/src/v2/lib/primitives/RTabNav/RTabNav.vue
+++ b/frontend/src/v2/lib/primitives/RTabNav/RTabNav.vue
@@ -161,7 +161,7 @@ onBeforeUnmount(() => {
       <RImg
         v-if="t.image"
         :src="t.image"
-        :alt="t.label"
+        alt=""
         width="1em"
         height="1em"
         contain
diff --git a/frontend/src/v2/lib/structural/RToolbar/RToolbar.stories.ts b/frontend/src/v2/lib/structural/RToolbar/RToolbar.stories.ts
index 7cb968f3b3..f8ff40f806 100644
--- a/frontend/src/v2/lib/structural/RToolbar/RToolbar.stories.ts
+++ b/frontend/src/v2/lib/structural/RToolbar/RToolbar.stories.ts
@@ -145,8 +145,8 @@ export const Colored: Story = {
       <div style="display:flex;flex-direction:column;gap:14px;width:720px">
         <RToolbar color="primary" title="Primary">
           <template #append>
-            <RBtn variant="text" prepend-icon="mdi-bell" />
-            <RBtn variant="text" prepend-icon="mdi-account-circle" />
+            <RBtn variant="text" prepend-icon="mdi-bell" aria-label="Notifications" />
+            <RBtn variant="text" prepend-icon="mdi-account-circle" aria-label="Account" />
           </template>
         </RToolbar>
         <RToolbar color="success" title="Success — scan complete">
@@ -200,7 +200,7 @@ export const GalleryHeader: Story = {
             <RBtn icon="mdi-arrow-left" variant="text" aria-label="Back" />
           </template>
           <template #append>
-            <RBtn variant="text" prepend-icon="mdi-magnify" />
+            <RBtn variant="text" prepend-icon="mdi-magnify" aria-label="Search" />
             <RBtn variant="text" prepend-icon="mdi-filter">Filters</RBtn>
             <RBtn variant="text" prepend-icon="mdi-sort-variant">Sort</RBtn>
             <RBtn icon="mdi-dots-vertical" variant="text" aria-label="More" />
diff --git a/frontend/src/v2/lib/structural/RTooltip/RTooltip.stories.ts b/frontend/src/v2/lib/structural/RTooltip/RTooltip.stories.ts
index 0a1ee6fa79..346372779a 100644
--- a/frontend/src/v2/lib/structural/RTooltip/RTooltip.stories.ts
+++ b/frontend/src/v2/lib/structural/RTooltip/RTooltip.stories.ts
@@ -98,7 +98,7 @@ export const ParentAttach: Story = {
     components: { RTooltip, RBtn },
     template: `
       <div style="padding:48px;display:flex;justify-content:center">
-        <RBtn icon="mdi-delete" variant="translucent">
+        <RBtn icon="mdi-delete" variant="translucent" aria-label="Delete this item">
           <RTooltip activator="parent" text="Delete this item" location="top" />
         </RBtn>
       </div>
@@ -116,22 +116,22 @@ export const PlacementCardinals: Story = {
       <div style="padding:80px;display:flex;gap:24px;flex-wrap:wrap;justify-content:center">
         <RTooltip text="Tooltip on top" location="top">
           <template #activator="{ props }">
-            <RBtn v-bind="props" icon="mdi-arrow-up" />
+            <RBtn v-bind="props" icon="mdi-arrow-up" aria-label="Tooltip on top" />
           </template>
         </RTooltip>
         <RTooltip text="Tooltip on end" location="end">
           <template #activator="{ props }">
-            <RBtn v-bind="props" icon="mdi-arrow-right" />
+            <RBtn v-bind="props" icon="mdi-arrow-right" aria-label="Tooltip on end" />
           </template>
         </RTooltip>
         <RTooltip text="Tooltip on bottom" location="bottom">
           <template #activator="{ props }">
-            <RBtn v-bind="props" icon="mdi-arrow-down" />
+            <RBtn v-bind="props" icon="mdi-arrow-down" aria-label="Tooltip on bottom" />
           </template>
         </RTooltip>
         <RTooltip text="Tooltip on start" location="start">
           <template #activator="{ props }">
-            <RBtn v-bind="props" icon="mdi-arrow-left" />
+            <RBtn v-bind="props" icon="mdi-arrow-left" aria-label="Tooltip on start" />
           </template>
         </RTooltip>
       </div>
@@ -222,7 +222,7 @@ export const CustomContent: Story = {
       <div style="padding:80px;display:flex;justify-content:center">
         <RTooltip location="top">
           <template #activator="{ props }">
-            <RBtn v-bind="props" icon="mdi-keyboard">Shortcuts</RBtn>
+            <RBtn v-bind="props" icon="mdi-keyboard" aria-label="Shortcuts">Shortcuts</RBtn>
           </template>
           <div style="display:flex;flex-direction:column;gap:4px">
             <div style="display:flex;align-items:center;gap:8px">
@@ -353,22 +353,22 @@ export const IconBarRealWorld: Story = {
         <div style="display:flex;gap:4px;padding:6px;background:var(--r-color-bg-elevated);border:1px solid var(--r-color-border);border-radius:10px">
           <RTooltip text="Filters" location="bottom">
             <template #activator="{ props }">
-              <RBtn v-bind="props" icon="mdi-filter" variant="text" />
+              <RBtn v-bind="props" icon="mdi-filter" variant="text" aria-label="Filters" />
             </template>
           </RTooltip>
           <RTooltip text="Sort" location="bottom">
             <template #activator="{ props }">
-              <RBtn v-bind="props" icon="mdi-sort-variant" variant="text" />
+              <RBtn v-bind="props" icon="mdi-sort-variant" variant="text" aria-label="Sort" />
             </template>
           </RTooltip>
           <RTooltip text="Search" location="bottom">
             <template #activator="{ props }">
-              <RBtn v-bind="props" icon="mdi-magnify" variant="text" />
+              <RBtn v-bind="props" icon="mdi-magnify" variant="text" aria-label="Search" />
             </template>
           </RTooltip>
           <RTooltip text="More actions" location="bottom">
             <template #activator="{ props }">
-              <RBtn v-bind="props" icon="mdi-dots-vertical" variant="text" />
+              <RBtn v-bind="props" icon="mdi-dots-vertical" variant="text" aria-label="More actions" />
             </template>
           </RTooltip>
         </div>
diff --git a/frontend/test/storybook.test.ts b/frontend/test/storybook.test.ts
index bc9b072d9f..8d63c85e81 100644
--- a/frontend/test/storybook.test.ts
+++ b/frontend/test/storybook.test.ts
@@ -1,8 +1,72 @@
 import { composeStories } from "@storybook/vue3-vite";
-import { describe, it } from "vitest";
+import axe from "axe-core";
+import { describe, expect, it } from "vitest";
 
 type StoryModule = Record<string, unknown>;
-type ComposedStory = { run?: () => Promise<void> };
+
+// The addon-a11y story parameter shape we honour here. `test` mirrors
+// @storybook/addon-a11y's own knob: "error" fails the test on any
+// violation, "todo" surfaces them as warnings without failing (a ratchet
+// escape hatch), "off" skips the scan entirely. `options` is forwarded to
+// axe.run so a story can scope or disable individual rules.
+type A11yParameters = {
+  test?: "error" | "todo" | "off";
+  options?: axe.RunOptions;
+};
+
+type ComposedStory = {
+  run?: (context?: { canvasElement?: HTMLElement }) => Promise<void>;
+  parameters?: { a11y?: A11yParameters };
+};
+
+// color-contrast needs real layout + computed colors, which happy-dom does
+// not provide, so it is disabled in this (non-browser) runner. Contrast is
+// covered by the Storybook a11y panel and, when added, a browser-mode run.
+const DEFAULT_AXE_OPTIONS: axe.RunOptions = {
+  rules: { "color-contrast": { enabled: false } },
+};
+
+function formatViolations(violations: axe.Result[]): string {
+  return violations
+    .map((v) => {
+      const nodes = v.nodes
+        .map((n) => `      ${n.html}\n        ${n.failureSummary ?? ""}`)
+        .join("\n");
+      return `  [${v.impact ?? "n/a"}] ${v.id}: ${v.help}\n${nodes}\n    ${v.helpUrl}`;
+    })
+    .join("\n\n");
+}
+
+async function checkA11y(
+  element: HTMLElement,
+  params: A11yParameters,
+  storyName: string,
+): Promise<void> {
+  const mode = params.test ?? "error";
+  if (mode === "off") return;
+
+  const options: axe.RunOptions = {
+    ...DEFAULT_AXE_OPTIONS,
+    ...params.options,
+    rules: { ...DEFAULT_AXE_OPTIONS.rules, ...params.options?.rules },
+  };
+
+  const results = await axe.run(element, options);
+  if (results.violations.length === 0) return;
+
+  const report = formatViolations(results.violations);
+  if (mode === "todo") {
+    console.warn(
+      `a11y (todo) "${storyName}" has ${results.violations.length} violation(s):\n${report}`,
+    );
+    return;
+  }
+
+  expect(
+    results.violations,
+    `Accessibility violations in "${storyName}":\n${report}`,
+  ).toHaveLength(0);
+}
 
 const storyModules = import.meta.glob<StoryModule>(
   "../src/v2/lib/**/*.stories.ts",
@@ -20,7 +84,20 @@ for (const [path, module] of Object.entries(storyModules)) {
             `Story "${name}" has no run() helper — composeStories incompatible.`,
           );
         }
-        await s.run();
+        // Render into an owned canvas so axe scans exactly this story's
+        // subtree, then clean it up so stories stay isolated.
+        const canvasElement = document.createElement("div");
+        document.body.appendChild(canvasElement);
+        try {
+          await s.run({ canvasElement });
+          await checkA11y(
+            canvasElement,
+            s.parameters?.a11y ?? {},
+            `${path.replace(/^\.\.\//, "")} > ${name}`,
+          );
+        } finally {
+          canvasElement.remove();
+        }
       });
     }
   });

From 240127ee88ffdd32051535e561b3ff10eb98aca0 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sun, 5 Jul 2026 22:30:19 -0400
Subject: [PATCH 2/3] fix(v2): work down the a11y backlog surfaced by the axe
 gate

Resolve 7 of the 8 ratcheted `todo` stories with real fixes and flip them
back to the `error` gate:

- RProgressCircular: add optional `label`; render aria-hidden when the ring
  is decorative (indeterminate + no label/slot), else name it via label or
  slot content. Cascades to RSpinner, RSelect (Loading), RTextField (Loading).
- RTextField: label the interactive prepend/append-inner adornment button
  from a new `*InnerLabel` prop (falls back to the tooltip).
- RDateField: move role="combobox" off the RTextField `<label>` wrapper onto
  the field container, restoring the input's label and using an allowed role.
- RTable: mark the layout-only scroll/body containers presentational so
  rows/cells resolve their required table parent in all states.
- RMenuItem, RDropzone, RSlider: supply the menu parent / input label /
  slider aria-label the components already support.

RSelect (Clearable) stays `todo`: the clear button is nested inside the
activator button and the correct fix is a visual-layout refactor that needs
in-browser verification.

Refs #1848

Generated-By: PostHog Code
Task-Id: b44aba2c-90c9-407d-8c80-5bbe77ecd6c1
---
 .../src/v2/lib/data/RTable/RTable.stories.ts  |  3 --
 frontend/src/v2/lib/data/RTable/RTable.vue    |  9 +++--
 .../forms/RDateField/RDateField.stories.ts    |  3 --
 .../v2/lib/forms/RDateField/RDateField.vue    | 16 ++++++---
 .../lib/forms/RDropzone/RDropzone.stories.ts  |  4 +--
 .../v2/lib/forms/RSelect/RSelect.stories.ts   | 10 +++---
 .../v2/lib/forms/RSlider/RSlider.stories.ts   | 17 +++++----
 .../forms/RTextField/RTextField.stories.ts    |  9 ++---
 .../v2/lib/forms/RTextField/RTextField.vue    | 25 +++++++++++++
 .../lib/menus/RMenuItem/RMenuItem.stories.ts  | 11 +++---
 .../RProgressCircular.stories.ts              | 22 +++++++-----
 .../RProgressCircular/RProgressCircular.vue   | 35 +++++++++++++++----
 .../primitives/RSpinner/RSpinner.stories.ts   |  3 --
 13 files changed, 107 insertions(+), 60 deletions(-)

diff --git a/frontend/src/v2/lib/data/RTable/RTable.stories.ts b/frontend/src/v2/lib/data/RTable/RTable.stories.ts
index 653046167c..350f81e8d1 100644
--- a/frontend/src/v2/lib/data/RTable/RTable.stories.ts
+++ b/frontend/src/v2/lib/data/RTable/RTable.stories.ts
@@ -11,9 +11,6 @@ const meta: Meta = {
   // RTable is generic, so its component-typed shape doesn't fit
   // Storybook's `component` slot. The cast is narrow + intentional.
   component: RTable as never,
-  // a11y todo (#1848): grid roles need their required parent structure so
-  // rows/cells are announced correctly (incl. the mobile card-stack mode).
-  parameters: { a11y: { test: "todo" } },
   argTypes: {
     loading: { control: "boolean" },
     sortKey: { control: "text" },
diff --git a/frontend/src/v2/lib/data/RTable/RTable.vue b/frontend/src/v2/lib/data/RTable/RTable.vue
index 84ad8585b3..a68510a935 100644
--- a/frontend/src/v2/lib/data/RTable/RTable.vue
+++ b/frontend/src/v2/lib/data/RTable/RTable.vue
@@ -143,6 +143,7 @@ onBeforeUnmount(() => {
   <div
     class="r-table"
     :class="{ 'r-table--mobile-stack': mobileStack }"
+    role="table"
     v-bind="$attrs"
   >
     <!-- Header row — each column header is a cell `<div>` containing
@@ -151,7 +152,11 @@ onBeforeUnmount(() => {
          icon next to "Type"). The sort button is the only interactive
          element so adornments stay focusable / clickable on their own
          without nesting buttons. -->
-    <div class="r-table__scroll" :style="scrollStyle">
+    <!-- scroll + body are layout-only containers; mark them presentational
+         so rows sit directly under the role="table" root and satisfy the
+         row/columnheader/cell parent requirements across the loading,
+         empty, and populated states (the header row is always present). -->
+    <div class="r-table__scroll" :style="scrollStyle" role="presentation">
       <div class="r-table__header" :style="gridStyle" role="row">
         <div
           v-for="col in columns"
@@ -198,7 +203,7 @@ onBeforeUnmount(() => {
       </div>
 
       <!-- Body — skeletons / real rows / empty state, in that order. -->
-      <div class="r-table__body">
+      <div class="r-table__body" role="presentation">
         <template v-if="loading">
           <div
             v-for="i in loadingRows"
diff --git a/frontend/src/v2/lib/forms/RDateField/RDateField.stories.ts b/frontend/src/v2/lib/forms/RDateField/RDateField.stories.ts
index 6e7f50bf58..55262420c2 100644
--- a/frontend/src/v2/lib/forms/RDateField/RDateField.stories.ts
+++ b/frontend/src/v2/lib/forms/RDateField/RDateField.stories.ts
@@ -5,9 +5,6 @@ import RDateField from "./RDateField.vue";
 const meta: Meta<typeof RDateField> = {
   title: "Forms/RDateField",
   component: RDateField,
-  // a11y todo (#1848): calendar grid cells use an unsupported role and the
-  // field input lacks a programmatic label. Needs a component-level fix.
-  parameters: { a11y: { test: "todo" } },
   argTypes: {
     firstDayOfWeek: {
       control: "inline-radio",
diff --git a/frontend/src/v2/lib/forms/RDateField/RDateField.vue b/frontend/src/v2/lib/forms/RDateField/RDateField.vue
index 893b4cc50d..50a2c5aecc 100644
--- a/frontend/src/v2/lib/forms/RDateField/RDateField.vue
+++ b/frontend/src/v2/lib/forms/RDateField/RDateField.vue
@@ -410,8 +410,19 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
+  <!-- The combobox role lives on this wrapper (a real element that owns
+       the textbox), not on RTextField: when a visible label is present
+       RTextField renders a `<label>`, and a role there both voids the
+       implicit label association and is a disallowed role. -->
   <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
-  <div ref="referenceEl" class="r-date-field" @keydown="onFieldKeydown">
+  <div
+    ref="referenceEl"
+    class="r-date-field"
+    role="combobox"
+    aria-haspopup="dialog"
+    :aria-expanded="isOpen"
+    @keydown="onFieldKeydown"
+  >
     <!-- Single `@click` on the wrapper is enough: native clicks on
          every part of the field (input, icon, label well) bubble up
          here. We deliberately don't subscribe to `click:append-inner` —
@@ -425,9 +436,6 @@ onBeforeUnmount(() => {
       :append-inner-icon="
         clearable && selectedDate ? undefined : 'mdi-calendar'
       "
-      :aria-haspopup="'dialog'"
-      :aria-expanded="isOpen"
-      role="combobox"
       @click="toggle"
     >
       <template v-if="clearable && selectedDate" #append-inner>
diff --git a/frontend/src/v2/lib/forms/RDropzone/RDropzone.stories.ts b/frontend/src/v2/lib/forms/RDropzone/RDropzone.stories.ts
index e04d48d9c9..50ae708083 100644
--- a/frontend/src/v2/lib/forms/RDropzone/RDropzone.stories.ts
+++ b/frontend/src/v2/lib/forms/RDropzone/RDropzone.stories.ts
@@ -6,9 +6,6 @@ import RDropzone from "./RDropzone.vue";
 const meta: Meta<typeof RDropzone> = {
   title: "Forms/RDropzone",
   component: RDropzone,
-  // a11y todo (#1848): the hidden file input needs a programmatic label
-  // tied to the visible drop-zone copy.
-  parameters: { a11y: { test: "todo" } },
   argTypes: {
     title: { control: "text" },
     hint: { control: "text" },
@@ -25,6 +22,7 @@ const meta: Meta<typeof RDropzone> = {
     title: "Drop files here",
     hint: "Drag and drop, or click to browse",
     activeTitle: "Release to upload",
+    inputLabel: "Upload files",
     multiple: true,
   },
   render: (args) => ({
diff --git a/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts b/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts
index bf34467316..a64fff083b 100644
--- a/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts
+++ b/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts
@@ -177,8 +177,6 @@ export const Disabled: Story = {
 };
 
 export const Loading: Story = {
-  // a11y todo (#1848): loading spinner (role="progressbar") needs a name.
-  parameters: { a11y: { test: "todo" } },
   args: { placeholder: "Loading platforms…", loading: true },
 };
 
@@ -213,8 +211,12 @@ export const Validation: Story = {
 // ── Clearable ──────────────────────────────────────────────────────
 
 export const Clearable: Story = {
-  // a11y todo (#1848): the clear affordance nests an interactive control
-  // inside the combobox; needs restructuring so roles don't nest.
+  // a11y todo (#1848): the clear <button> is nested inside the activator
+  // <button> (nested-interactive). The fix is to lift the clear/chip-close
+  // controls out of the activator so they're siblings (select-only combobox
+  // pattern), which moves the field's border/hover/focus/error chrome onto a
+  // wrapper. Deferred: it's a visual-layout refactor that needs in-browser
+  // verification, not a semantics-only change like the rest of this pass.
   parameters: { a11y: { test: "todo" } },
   render: () => ({
     components: { RSelect },
diff --git a/frontend/src/v2/lib/forms/RSlider/RSlider.stories.ts b/frontend/src/v2/lib/forms/RSlider/RSlider.stories.ts
index b53786008e..c713a6289a 100644
--- a/frontend/src/v2/lib/forms/RSlider/RSlider.stories.ts
+++ b/frontend/src/v2/lib/forms/RSlider/RSlider.stories.ts
@@ -5,9 +5,8 @@ import RSlider from "./RSlider.vue";
 const meta: Meta<typeof RSlider> = {
   title: "Forms/RSlider",
   component: RSlider,
-  // a11y todo (#1848): the slider thumb needs an accessible name (label or
-  // aria-label). Track a labelling API / required-label lint on RSlider.
-  parameters: { a11y: { test: "todo" } },
+  // RSlider has no visible label, so every instance needs `ariaLabel`.
+  args: { ariaLabel: "Value" },
   argTypes: {
     min: { control: "number" },
     max: { control: "number" },
@@ -115,11 +114,11 @@ export const ColorLadder: Story = {
     }),
     template: `
       <div style="display:flex;flex-direction:column;gap:18px;padding:24px;min-width:380px">
-        <RSlider v-model="primary" color="primary" value-position="right" value-suffix="%" />
-        <RSlider v-model="success" color="success" value-position="right" value-suffix="%" />
-        <RSlider v-model="warning" color="warning" value-position="right" value-suffix="%" />
-        <RSlider v-model="danger" color="danger" value-position="right" value-suffix="%" />
-        <RSlider v-model="info" color="info" value-position="right" value-suffix="%" />
+        <RSlider v-model="primary" color="primary" value-position="right" value-suffix="%" aria-label="Primary" />
+        <RSlider v-model="success" color="success" value-position="right" value-suffix="%" aria-label="Success" />
+        <RSlider v-model="warning" color="warning" value-position="right" value-suffix="%" aria-label="Warning" />
+        <RSlider v-model="danger" color="danger" value-position="right" value-suffix="%" aria-label="Danger" />
+        <RSlider v-model="info" color="info" value-position="right" value-suffix="%" aria-label="Info" />
       </div>
     `,
   }),
@@ -151,7 +150,7 @@ export const CommitOnEnd: Story = {
     },
     template: `
       <div style="padding:24px;min-width:380px;display:flex;flex-direction:column;gap:10px">
-        <RSlider v-model="preview" value-position="thumb" value-suffix="%" @end="onEnd" />
+        <RSlider v-model="preview" value-position="thumb" value-suffix="%" aria-label="Volume" @end="onEnd" />
         <div style="font:12px sans-serif;color:var(--r-color-fg-muted)">
           previewing: {{ preview }} · last committed: {{ committed }}
         </div>
diff --git a/frontend/src/v2/lib/forms/RTextField/RTextField.stories.ts b/frontend/src/v2/lib/forms/RTextField/RTextField.stories.ts
index 7ddc093aab..ab72bfc828 100644
--- a/frontend/src/v2/lib/forms/RTextField/RTextField.stories.ts
+++ b/frontend/src/v2/lib/forms/RTextField/RTextField.stories.ts
@@ -217,8 +217,6 @@ export const Validation: Story = {
 };
 
 export const Loading: Story = {
-  // a11y todo (#1848): loading spinner (role="progressbar") needs a name.
-  parameters: { a11y: { test: "todo" } },
   args: {
     placeholder: "Searching…",
     loading: true,
@@ -293,10 +291,6 @@ export const ColorLadder: Story = {
 // ── Real-world ─────────────────────────────────────────────────────
 
 export const LoginForm: Story = {
-  // a11y todo (#1848): the clickable append-inner icon (password reveal)
-  // renders as a button without an accessible name. Needs an RTextField
-  // API to label append/prepend-inner actions.
-  parameters: { a11y: { test: "todo" } },
   name: "Login (underlined)",
   render: () => ({
     components: { RTextField, RBtn },
@@ -309,17 +303,20 @@ export const LoginForm: Story = {
       <div style="width:320px;display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--r-color-bg-elevated);border:1px solid var(--r-color-border);border-radius:12px">
         <RTextField
           v-model="user"
+          label="Username"
           variant="underlined"
           placeholder="username"
           prepend-inner-icon="mdi-account"
         />
         <RTextField
           v-model="pass"
+          label="Password"
           variant="underlined"
           :type="show ? 'text' : 'password'"
           placeholder="password"
           prepend-inner-icon="mdi-lock"
           :append-inner-icon="show ? 'mdi-eye-off' : 'mdi-eye'"
+          :append-inner-tooltip="show ? 'Hide password' : 'Show password'"
           @click:append-inner="show = !show"
         />
         <RBtn block color="primary">Sign in</RBtn>
diff --git a/frontend/src/v2/lib/forms/RTextField/RTextField.vue b/frontend/src/v2/lib/forms/RTextField/RTextField.vue
index 439a380c28..8c763cca04 100644
--- a/frontend/src/v2/lib/forms/RTextField/RTextField.vue
+++ b/frontend/src/v2/lib/forms/RTextField/RTextField.vue
@@ -58,6 +58,14 @@ interface Props {
   /** Tooltip text shown on hover/focus over the append-inner
    *  adornment. The canonical use is the password-reveal eye icon. */
   appendInnerTooltip?: string;
+  /** Accessible name for the prepend-inner adornment when it is
+   *  interactive (a parent listens to `click:prepend-inner`). Falls back
+   *  to `prependInnerTooltip`. */
+  prependInnerLabel?: string;
+  /** Accessible name for the append-inner adornment when it is
+   *  interactive (a parent listens to `click:append-inner`). Falls back
+   *  to `appendInnerTooltip`. */
+  appendInnerLabel?: string;
   autocomplete?: string;
   name?: string;
   rules?: Rule[];
@@ -111,6 +119,8 @@ const props = withDefaults(defineProps<Props>(), {
   appendInnerIcon: undefined,
   prependInnerTooltip: undefined,
   appendInnerTooltip: undefined,
+  prependInnerLabel: undefined,
+  appendInnerLabel: undefined,
   autocomplete: undefined,
   name: undefined,
   rules: () => [],
@@ -357,6 +367,15 @@ function hasListener(name: string): boolean {
 const prependInteractive = computed(() => hasListener("click:prepend-inner"));
 const appendInteractive = computed(() => hasListener("click:append-inner"));
 
+// An interactive adornment is a real <button>, so it needs an accessible
+// name. Prefer the explicit label prop, fall back to the tooltip text.
+const prependAdornmentLabel = computed(
+  () => props.prependInnerLabel ?? props.prependInnerTooltip,
+);
+const appendAdornmentLabel = computed(
+  () => props.appendInnerLabel ?? props.appendInnerTooltip,
+);
+
 function onPrependInnerClick(evt: MouseEvent) {
   // Always emit — emit() is a no-op when nothing's subscribed. The
   // listener-detection above only governs the visual treatment
@@ -424,6 +443,7 @@ function onAppendInnerClick(evt: MouseEvent) {
         :class="{ 'r-text-field__adornment--interactive': prependInteractive }"
         :type="prependInteractive ? 'button' : undefined"
         :tabindex="prependInteractive ? 0 : undefined"
+        :aria-label="prependInteractive ? prependAdornmentLabel : undefined"
         @mousedown.prevent
         @click="onPrependInnerClick"
       >
@@ -505,6 +525,11 @@ function onAppendInnerClick(evt: MouseEvent) {
         :tabindex="
           appendInteractive && !showLoading && !showClear ? 0 : undefined
         "
+        :aria-label="
+          appendInteractive && !showLoading && !showClear
+            ? appendAdornmentLabel
+            : undefined
+        "
         @mousedown.prevent
         @click="onAppendInnerClick"
       >
diff --git a/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts b/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts
index a4360e3c00..77372b25b8 100644
--- a/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts
+++ b/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts
@@ -80,15 +80,14 @@ export const Variants: Story = {
 };
 
 export const WithNavigation: Story = {
-  // a11y todo (#1848): role="menuitem" needs its required menu parent. In
-  // the app RMenu provides it; the bare-item story renders without one.
-  parameters: { a11y: { test: "todo" } },
   render: () => ({
     components: { RMenuItem },
     setup: () => ({ panelStyle: PANEL_STYLE }),
+    // Link items carry role="menuitem", which needs a role="menu" parent.
+    // RMenu supplies that in the app; the bare-item story adds it here.
     template: `
       <div style="padding:40px">
-        <div :style="panelStyle">
+        <div :style="panelStyle" role="menu" aria-label="Navigation">
           <RMenuItem to="/platforms" icon="mdi-gamepad-variant-outline" label="Platforms" />
           <RMenuItem href="https://romm.app" icon="mdi-open-in-new" label="External link" />
         </div>
@@ -102,8 +101,6 @@ export const WithNavigation: Story = {
 // and closing would unmount the <a> before the browser opens the new tab.
 // A plain click still activates the item normally.
 export const NewTabGesture: Story = {
-  // a11y todo (#1848): role="menuitem" needs its required menu parent.
-  parameters: { a11y: { test: "todo" } },
   name: "New-tab gesture (Ctrl/⌘-click)",
   args: {
     href: "#platforms",
@@ -116,7 +113,7 @@ export const NewTabGesture: Story = {
     setup: () => ({ args, panelStyle: PANEL_STYLE }),
     template: `
       <div style="padding:40px">
-        <div :style="panelStyle">
+        <div :style="panelStyle" role="menu" aria-label="Actions">
           <RMenuItem v-bind="args" @click="args.onClick" />
         </div>
       </div>
diff --git a/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.stories.ts b/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.stories.ts
index b5cd05a980..5a0e407083 100644
--- a/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.stories.ts
+++ b/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.stories.ts
@@ -5,14 +5,12 @@ import RProgressCircular from "./RProgressCircular.vue";
 const meta: Meta<typeof RProgressCircular> = {
   title: "Primitives/RProgressCircular",
   component: RProgressCircular,
-  // a11y todo (#1848): role="progressbar" needs an accessible name. The
-  // consumer must supply one until RProgressCircular grows a labelling API.
-  parameters: { a11y: { test: "todo" } },
   argTypes: {
     indeterminate: { control: "boolean" },
     size: { control: "number" },
     width: { control: "number" },
     color: { control: "text" },
+    label: { control: "text" },
     modelValue: { control: { type: "range", min: 0, max: 100 } },
   },
 };
@@ -28,7 +26,13 @@ export const Indeterminate: Story = {
 };
 
 export const Determinate: Story = {
-  args: { indeterminate: false, modelValue: 65, size: 64, width: 4 },
+  args: {
+    indeterminate: false,
+    modelValue: 65,
+    size: 64,
+    width: 4,
+    label: "Download progress",
+  },
 };
 
 // ── Size ladder ─────────────────────────────────────────────────────
@@ -71,23 +75,23 @@ export const DeterminateLadder: Story = {
     template: `
       <div style="display:flex;align-items:flex-end;gap:24px;font:11px/1.2 sans-serif;color:var(--r-color-fg-muted)">
         <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-          <RProgressCircular :indeterminate="false" :model-value="0" :size="48" :width="4" />
+          <RProgressCircular :indeterminate="false" :model-value="0" :size="48" :width="4" label="Progress" />
           <span>0%</span>
         </div>
         <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-          <RProgressCircular :indeterminate="false" :model-value="25" :size="48" :width="4" />
+          <RProgressCircular :indeterminate="false" :model-value="25" :size="48" :width="4" label="Progress" />
           <span>25%</span>
         </div>
         <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-          <RProgressCircular :indeterminate="false" :model-value="50" :size="48" :width="4" />
+          <RProgressCircular :indeterminate="false" :model-value="50" :size="48" :width="4" label="Progress" />
           <span>50%</span>
         </div>
         <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-          <RProgressCircular :indeterminate="false" :model-value="75" :size="48" :width="4" />
+          <RProgressCircular :indeterminate="false" :model-value="75" :size="48" :width="4" label="Progress" />
           <span>75%</span>
         </div>
         <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-          <RProgressCircular :indeterminate="false" :model-value="100" :size="48" :width="4" />
+          <RProgressCircular :indeterminate="false" :model-value="100" :size="48" :width="4" label="Progress" />
           <span>100%</span>
         </div>
       </div>
diff --git a/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.vue b/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.vue
index 3954fbe4c8..c530ba338d 100644
--- a/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.vue
+++ b/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.vue
@@ -19,7 +19,7 @@
 //
 // Default slot — overlay content centred over the ring (percentage
 // text, status icon). Lives outside the SVG so it isn't rotated.
-import { computed, useSlots } from "vue";
+import { computed, getCurrentInstance, useSlots } from "vue";
 
 defineOptions({ inheritAttrs: false });
 
@@ -34,6 +34,11 @@ interface Props {
   color?: string;
   /** 0–100. Only consulted when `indeterminate` is false. */
   modelValue?: number;
+  /** Accessible name for the progressbar (e.g. "Upload progress"). An
+   *  indeterminate ring with neither a label nor slot content is treated
+   *  as decorative (aria-hidden) so it doesn't announce as an unnamed
+   *  progressbar; slot content names the ring via aria-labelledby. */
+  label?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -42,10 +47,21 @@ const props = withDefaults(defineProps<Props>(), {
   width: 2,
   color: "primary",
   modelValue: undefined,
+  label: undefined,
 });
 
 const slots = useSlots();
 
+// A ring with no name and no visible value is decorative — usually an
+// inline "busy" spinner sitting next to real text. Drop it from the a11y
+// tree rather than expose an unnamed progressbar. Slot content (a "35%"
+// overlay) names the ring instead, so it's not decorative.
+const hasSlotContent = computed(() => !!slots.default);
+const decorative = computed(
+  () => props.indeterminate && !props.label && !hasSlotContent.value,
+);
+const contentId = `r-pc-label-${getCurrentInstance()?.uid ?? ""}`;
+
 const TONE_MAP: Record<string, string> = {
   primary: "var(--r-color-brand-primary)",
   secondary: "var(--r-color-brand-secondary)",
@@ -101,11 +117,16 @@ const dashOffset = computed(() => 100 - progressValue.value);
       height: `${diameter}px`,
       '--r-pc-color': resolvedColor,
     }"
-    role="progressbar"
-    :aria-valuemin="0"
-    :aria-valuemax="100"
-    :aria-valuenow="indeterminate ? undefined : progressValue"
-    :aria-busy="indeterminate || undefined"
+    :role="decorative ? undefined : 'progressbar'"
+    :aria-hidden="decorative ? 'true' : undefined"
+    :aria-label="!decorative && label ? label : undefined"
+    :aria-labelledby="
+      !decorative && !label && hasSlotContent ? contentId : undefined
+    "
+    :aria-valuemin="decorative ? undefined : 0"
+    :aria-valuemax="decorative ? undefined : 100"
+    :aria-valuenow="!decorative && !indeterminate ? progressValue : undefined"
+    :aria-busy="!decorative && indeterminate ? true : undefined"
   >
     <svg class="r-pc__svg" :viewBox="`0 0 ${diameter} ${diameter}`">
       <!-- Track — faint underlay so the empty portion still reads
@@ -131,7 +152,7 @@ const dashOffset = computed(() => 100 - progressValue.value);
         :stroke-dashoffset="indeterminate ? undefined : dashOffset"
       />
     </svg>
-    <span v-if="slots.default" class="r-pc__content">
+    <span v-if="slots.default" :id="contentId" class="r-pc__content">
       <slot />
     </span>
   </span>
diff --git a/frontend/src/v2/lib/primitives/RSpinner/RSpinner.stories.ts b/frontend/src/v2/lib/primitives/RSpinner/RSpinner.stories.ts
index cf386b91d5..d9cb84afb1 100644
--- a/frontend/src/v2/lib/primitives/RSpinner/RSpinner.stories.ts
+++ b/frontend/src/v2/lib/primitives/RSpinner/RSpinner.stories.ts
@@ -4,9 +4,6 @@ import RSpinner from "./RSpinner.vue";
 const meta: Meta<typeof RSpinner> = {
   title: "Primitives/RSpinner",
   component: RSpinner,
-  // a11y todo (#1848): inherits RProgressCircular's role="progressbar";
-  // needs an accessible name from the consumer or a component-level default.
-  parameters: { a11y: { test: "todo" } },
   argTypes: {
     size: { control: "number" },
     width: { control: "number" },

From fba242150ad58283fd2880d7f873225c261d5f3b Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sun, 5 Jul 2026 22:40:51 -0400
Subject: [PATCH 3/3] docs(v2): trim and compact a11y comments

Remove redundant explanation and shorten the remaining comments added by
the accessibility work to the "why" only.

Generated-By: PostHog Code
Task-Id: b44aba2c-90c9-407d-8c80-5bbe77ecd6c1
---
 frontend/.storybook/preview.ts                      |  2 +-
 frontend/src/v2/lib/data/RTable/RTable.vue          |  6 ++----
 frontend/src/v2/lib/forms/RDateField/RDateField.vue |  7 +++----
 .../src/v2/lib/forms/RRating/RRating.stories.ts     |  3 +--
 .../src/v2/lib/forms/RSelect/RSelect.stories.ts     |  9 +++------
 .../src/v2/lib/forms/RSwitch/RSwitch.stories.ts     |  4 +---
 frontend/src/v2/lib/forms/RTextField/RTextField.vue | 13 +++++--------
 .../src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts |  3 +--
 .../RProgressCircular/RProgressCircular.vue         | 12 ++++--------
 .../v2/lib/primitives/RTabNav/RTabNav.stories.ts    |  4 +---
 frontend/test/storybook.test.ts                     | 12 ++++--------
 11 files changed, 26 insertions(+), 49 deletions(-)

diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts
index 1c424190dd..dc248b2aed 100644
--- a/frontend/.storybook/preview.ts
+++ b/frontend/.storybook/preview.ts
@@ -55,7 +55,7 @@ const preview: Preview = {
   parameters: {
     layout: "centered",
     backgrounds: { disable: true },
-    // Accessibility gate: axe fails on any violation; known gaps opt down to `test: "todo"`. See #1848.
+    // Accessibility gate
     a11y: {
       test: "error",
     },
diff --git a/frontend/src/v2/lib/data/RTable/RTable.vue b/frontend/src/v2/lib/data/RTable/RTable.vue
index a68510a935..c642d07e1e 100644
--- a/frontend/src/v2/lib/data/RTable/RTable.vue
+++ b/frontend/src/v2/lib/data/RTable/RTable.vue
@@ -152,10 +152,8 @@ onBeforeUnmount(() => {
          icon next to "Type"). The sort button is the only interactive
          element so adornments stay focusable / clickable on their own
          without nesting buttons. -->
-    <!-- scroll + body are layout-only containers; mark them presentational
-         so rows sit directly under the role="table" root and satisfy the
-         row/columnheader/cell parent requirements across the loading,
-         empty, and populated states (the header row is always present). -->
+    <!-- Presentational so rows resolve their role="table" parent (the
+         scroll/body divs are layout-only). -->
     <div class="r-table__scroll" :style="scrollStyle" role="presentation">
       <div class="r-table__header" :style="gridStyle" role="row">
         <div
diff --git a/frontend/src/v2/lib/forms/RDateField/RDateField.vue b/frontend/src/v2/lib/forms/RDateField/RDateField.vue
index 50a2c5aecc..7ebc8cd898 100644
--- a/frontend/src/v2/lib/forms/RDateField/RDateField.vue
+++ b/frontend/src/v2/lib/forms/RDateField/RDateField.vue
@@ -410,10 +410,9 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <!-- The combobox role lives on this wrapper (a real element that owns
-       the textbox), not on RTextField: when a visible label is present
-       RTextField renders a `<label>`, and a role there both voids the
-       implicit label association and is a disallowed role. -->
+  <!-- combobox role goes here, not on RTextField: with a visible label
+       RTextField renders a <label>, where the role is disallowed and voids
+       the input's label association. -->
   <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
   <div
     ref="referenceEl"
diff --git a/frontend/src/v2/lib/forms/RRating/RRating.stories.ts b/frontend/src/v2/lib/forms/RRating/RRating.stories.ts
index 0d92842108..dbd3d0b34d 100644
--- a/frontend/src/v2/lib/forms/RRating/RRating.stories.ts
+++ b/frontend/src/v2/lib/forms/RRating/RRating.stories.ts
@@ -40,8 +40,7 @@ export const Default: Story = { args: { halfIncrements: true, hover: true } };
 export const Readonly: Story = { args: { readonly: true } };
 export const Large: Story = { args: { size: "large" } };
 
-// Keyboard operability — each star is a native `<button role="radio">`, so
-// Tab walks focus across them and Enter / Space commits the focused rating.
+// Keyboard: Tab across the star buttons, Enter/Space commits the rating.
 export const KeyboardNav: Story = {
   name: "Keyboard navigation (play)",
   args: { ariaLabel: "Rating" },
diff --git a/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts b/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts
index a64fff083b..7e75bb2865 100644
--- a/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts
+++ b/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts
@@ -211,12 +211,9 @@ export const Validation: Story = {
 // ── Clearable ──────────────────────────────────────────────────────
 
 export const Clearable: Story = {
-  // a11y todo (#1848): the clear <button> is nested inside the activator
-  // <button> (nested-interactive). The fix is to lift the clear/chip-close
-  // controls out of the activator so they're siblings (select-only combobox
-  // pattern), which moves the field's border/hover/focus/error chrome onto a
-  // wrapper. Deferred: it's a visual-layout refactor that needs in-browser
-  // verification, not a semantics-only change like the rest of this pass.
+  // a11y todo (#1848): clear <button> nested in the activator <button>
+  // (nested-interactive). Fix = lift clear/chip-close out as siblings; a
+  // visual-layout refactor deferred pending in-browser verification.
   parameters: { a11y: { test: "todo" } },
   render: () => ({
     components: { RSelect },
diff --git a/frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts b/frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts
index af218ab668..a6f54f49d5 100644
--- a/frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts
+++ b/frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts
@@ -61,9 +61,7 @@ export const Disabled: Story = {
   args: { label: "Disabled", disabled: true },
 };
 
-// Keyboard operability — the switch is a native `<button role="switch">`,
-// so Tab focuses it and Space / Enter flip `aria-checked` without any
-// custom key handling.
+// Keyboard: Tab focuses the switch, Space/Enter toggle it.
 export const KeyboardToggle: Story = {
   name: "Keyboard toggle (play)",
   args: { label: "Notifications" },
diff --git a/frontend/src/v2/lib/forms/RTextField/RTextField.vue b/frontend/src/v2/lib/forms/RTextField/RTextField.vue
index 8c763cca04..470028be24 100644
--- a/frontend/src/v2/lib/forms/RTextField/RTextField.vue
+++ b/frontend/src/v2/lib/forms/RTextField/RTextField.vue
@@ -58,13 +58,11 @@ interface Props {
   /** Tooltip text shown on hover/focus over the append-inner
    *  adornment. The canonical use is the password-reveal eye icon. */
   appendInnerTooltip?: string;
-  /** Accessible name for the prepend-inner adornment when it is
-   *  interactive (a parent listens to `click:prepend-inner`). Falls back
-   *  to `prependInnerTooltip`. */
+  /** Accessible name for the interactive prepend-inner adornment button.
+   *  Falls back to `prependInnerTooltip`. */
   prependInnerLabel?: string;
-  /** Accessible name for the append-inner adornment when it is
-   *  interactive (a parent listens to `click:append-inner`). Falls back
-   *  to `appendInnerTooltip`. */
+  /** Accessible name for the interactive append-inner adornment button.
+   *  Falls back to `appendInnerTooltip`. */
   appendInnerLabel?: string;
   autocomplete?: string;
   name?: string;
@@ -367,8 +365,7 @@ function hasListener(name: string): boolean {
 const prependInteractive = computed(() => hasListener("click:prepend-inner"));
 const appendInteractive = computed(() => hasListener("click:append-inner"));
 
-// An interactive adornment is a real <button>, so it needs an accessible
-// name. Prefer the explicit label prop, fall back to the tooltip text.
+// Interactive adornments are real buttons; name them (label, else tooltip).
 const prependAdornmentLabel = computed(
   () => props.prependInnerLabel ?? props.prependInnerTooltip,
 );
diff --git a/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts b/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts
index 77372b25b8..4f7118a991 100644
--- a/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts
+++ b/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts
@@ -83,8 +83,7 @@ export const WithNavigation: Story = {
   render: () => ({
     components: { RMenuItem },
     setup: () => ({ panelStyle: PANEL_STYLE }),
-    // Link items carry role="menuitem", which needs a role="menu" parent.
-    // RMenu supplies that in the app; the bare-item story adds it here.
+    // Link items get role="menuitem", which needs a role="menu" parent.
     template: `
       <div style="padding:40px">
         <div :style="panelStyle" role="menu" aria-label="Navigation">
diff --git a/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.vue b/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.vue
index c530ba338d..bf75802c02 100644
--- a/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.vue
+++ b/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.vue
@@ -34,10 +34,8 @@ interface Props {
   color?: string;
   /** 0–100. Only consulted when `indeterminate` is false. */
   modelValue?: number;
-  /** Accessible name for the progressbar (e.g. "Upload progress"). An
-   *  indeterminate ring with neither a label nor slot content is treated
-   *  as decorative (aria-hidden) so it doesn't announce as an unnamed
-   *  progressbar; slot content names the ring via aria-labelledby. */
+  /** Accessible name for the progressbar. Without it (and without slot
+   *  content), an indeterminate ring is treated as decorative. */
   label?: string;
 }
 
@@ -52,10 +50,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-// A ring with no name and no visible value is decorative — usually an
-// inline "busy" spinner sitting next to real text. Drop it from the a11y
-// tree rather than expose an unnamed progressbar. Slot content (a "35%"
-// overlay) names the ring instead, so it's not decorative.
+// An unnamed indeterminate ring is decorative (a "busy" spinner beside
+// real text): hide it rather than expose an unnamed progressbar.
 const hasSlotContent = computed(() => !!slots.default);
 const decorative = computed(
   () => props.indeterminate && !props.label && !hasSlotContent.value,
diff --git a/frontend/src/v2/lib/primitives/RTabNav/RTabNav.stories.ts b/frontend/src/v2/lib/primitives/RTabNav/RTabNav.stories.ts
index 6e74a177ee..1fcb4cfb5e 100644
--- a/frontend/src/v2/lib/primitives/RTabNav/RTabNav.stories.ts
+++ b/frontend/src/v2/lib/primitives/RTabNav/RTabNav.stories.ts
@@ -109,9 +109,7 @@ export const HiddenItems: Story = {
 // Image variant — items can carry a logo / brand mark via the `image`
 // field instead of an MDI icon. Mirrors the per-provider raw-metadata
 // tabs in EditRomDialog (IGDB / MobyGames / etc).
-// Keyboard operability — each tab is a native `<button role="tab">`, so
-// Tab walks focus across them in order and Enter / Space activates the
-// focused tab (flipping `aria-selected`).
+// Keyboard: Tab across the tabs, Enter/Space activates the focused one.
 export const KeyboardNav: Story = {
   name: "Keyboard navigation (play)",
   args: {
diff --git a/frontend/test/storybook.test.ts b/frontend/test/storybook.test.ts
index 8d63c85e81..d549ea2ad2 100644
--- a/frontend/test/storybook.test.ts
+++ b/frontend/test/storybook.test.ts
@@ -4,11 +4,8 @@ import { describe, expect, it } from "vitest";
 
 type StoryModule = Record<string, unknown>;
 
-// The addon-a11y story parameter shape we honour here. `test` mirrors
-// @storybook/addon-a11y's own knob: "error" fails the test on any
-// violation, "todo" surfaces them as warnings without failing (a ratchet
-// escape hatch), "off" skips the scan entirely. `options` is forwarded to
-// axe.run so a story can scope or disable individual rules.
+// Per-story addon-a11y config. `test`: "error" fails on violations, "todo"
+// warns (ratchet escape hatch), "off" skips. `options` forwards to axe.run.
 type A11yParameters = {
   test?: "error" | "todo" | "off";
   options?: axe.RunOptions;
@@ -19,9 +16,8 @@ type ComposedStory = {
   parameters?: { a11y?: A11yParameters };
 };
 
-// color-contrast needs real layout + computed colors, which happy-dom does
-// not provide, so it is disabled in this (non-browser) runner. Contrast is
-// covered by the Storybook a11y panel and, when added, a browser-mode run.
+// color-contrast needs real layout, which happy-dom lacks; disable it here
+// (covered by the a11y panel / a future browser-mode run).
 const DEFAULT_AXE_OPTIONS: axe.RunOptions = {
   rules: { "color-contrast": { enabled: false } },
 };