Merge pull request #3691 from rommapp/posthog-code/v2-a11y-audit

test(v2): add axe accessibility gate + keyboard nav tests to Storybook

Author: gantoine

frontend/.storybook/preview.ts

@@ -55,6 +55,10 @@ const preview: Preview = {
   parameters: {
     layout: "centered",
     backgrounds: { disable: true },
+    // Accessibility gate
+    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

@@ -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,9 @@ 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">
+    <!-- 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
           v-for="col in columns"
@@ -198,7 +201,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"

frontend/src/v2/lib/data/RTable/RTable.vue

@@ -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

@@ -410,8 +410,18 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
+  <!-- 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" 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 +435,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>

frontend/src/v2/lib/forms/RDateField/RDateField.vue

@@ -22,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) => ({

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,38 @@ export const Default: Story = { args: { halfIncrements: true, hover: true } };
 export const Readonly: Story = { args: { readonly: true } };
 export const Large: Story = { args: { size: "large" } };
 
+// Keyboard: Tab across the star buttons, Enter/Space commits the 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

@@ -211,6 +211,10 @@ export const Validation: Story = {
 // ── Clearable ──────────────────────────────────────────────────────
 
 export const Clearable: Story = {
+  // 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 },
     setup: () => ({ value: ref("psx"), items: PLATFORMS }),

frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts

@@ -5,6 +5,8 @@ import RSlider from "./RSlider.vue";
 const meta: Meta<typeof RSlider> = {
   title: "Forms/RSlider",
   component: RSlider,
+  // RSlider has no visible label, so every instance needs `ariaLabel`.
+  args: { ariaLabel: "Value" },
   argTypes: {
     min: { control: "number" },
     max: { control: "number" },
@@ -112,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>
     `,
   }),
@@ -148,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>