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

Author: gantoine

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,

frontend/package-lock.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",

frontend/package.json

@@ -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" },

frontend/src/v2/lib/data/RTable/RTable.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 ─────────────────────────────────────────────────────
 

frontend/src/v2/lib/forms/RCheckbox/RCheckbox.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",

frontend/src/v2/lib/forms/RDateField/RDateField.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" },

frontend/src/v2/lib/forms/RDropzone/RDropzone.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.

frontend/src/v2/lib/forms/RRating/RRating.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 }),

frontend/src/v2/lib/forms/RSelect/RSelect.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" },