added a11y axe tests to select

Co-authored-by: Chris Woolum <[email protected]>
Co-authored-by: Jack Shelton <[email protected]>

Author: 3 people

apps/component-tests/src/components/showcase-test/component-imports.ts

@@ -15,20 +15,20 @@ function createMetaGlobComponents() {
     },
   );
 
-  const newThing: Record<string, unknown> = {};
+  const componentsMap: Record<string, unknown> = {};
 
   for (const key in metaGlobComponents) {
     const component = metaGlobComponents[key];
 
     if (component) {
       const componentName = key.split('routes/docs/')[1];
       if (componentName) {
-        newThing[componentName] = component;
+        componentsMap[componentName] = component;
       }
     }
   }
 
-  return newThing;
+  return componentsMap;
 }
 
 export const metaGlobComponents = createMetaGlobComponents();

apps/component-tests/src/routes/[kit]/[component]/[example]/[email protected] renamed to apps/component-tests/src/routes/[kit]/[component]/[example]/index.tsx

@@ -1,9 +1,9 @@
 import { component$, useStyles$ } from '@builder.io/qwik';
 import {
   Select,
-  SelectPopover,
   SelectListbox,
   SelectOption,
+  SelectPopover,
   SelectTrigger,
   SelectValue,
 } from '@qwik-ui/headless';
@@ -14,7 +14,7 @@ export default component$(() => {
   const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
 
   return (
-    <Select class="select">
+    <Select class="select" aria-label="hero">
       <SelectTrigger class="select-trigger">
         <SelectValue placeholder="Select an option" />
       </SelectTrigger>

apps/website/src/routes/docs/headless/select/examples/hero.tsx

@@ -32,12 +32,15 @@
     "story.headless": "nx storybook headless",
     "test.cli": "nx test cli",
     "test.headless": "nx component-test headless",
+    "test.visual.headless": "nx visual-test headless",
     "test.pw.headless": "nx e2e headless",
+    "test.pw.headless.ci": "nx e2e headless",
     "test.headless.ci": "nx component-test-ci headless",
     "test.utils": "nx test utils"
   },
   "packageManager": "[email protected]",
   "devDependencies": {
+    "@axe-core/playwright": "4.8.5",
     "@builder.io/qwik": "^1.4.0",
     "@builder.io/qwik-city": "^1.4.0",
     "@builder.io/qwik-react": "0.5.3",
@@ -217,6 +220,5 @@
   ],
   "nx": {
     "includedScripts": []
-  },
-  "dependencies": {}
+  }
 }

package.json

@@ -1,7 +1,7 @@
-import { component$, type PropsOf, useContext, sync$, $, Slot } from '@builder.io/qwik';
+import { $, Slot, component$, sync$, useContext, type PropsOf } from '@builder.io/qwik';
 import SelectContextId from './select-context';
-import { getNextEnabledOptionIndex, getPrevEnabledOptionIndex } from './utils';
 import { useTypeahead } from './use-select';
+import { getNextEnabledOptionIndex, getPrevEnabledOptionIndex } from './utils';
 
 type SelectTriggerProps = PropsOf<'button'>;
 export const SelectTrigger = component$<SelectTriggerProps>((props) => {

packages/kit-headless/src/components/select/select-trigger.tsx

@@ -1,5 +1,7 @@
+import AxeBuilder from '@axe-core/playwright';
 import { expect, test, type Page } from '@playwright/test';
 import { createTestDriver } from './select.driver';
+
 async function setup(page: Page, exampleName: string) {
   await page.goto(`/headless/select/${exampleName}`);
 
@@ -123,7 +125,7 @@ test.describe('Mouse Behavior', () => {
   // });
 
   test(`GIVEN an open hero select
-        WHEN clikcking on the group label
+        WHEN clicking on the group label
         THEN the listbox should remain open`, async ({ page }) => {
     const { getRoot, openListbox, getListbox } = await setup(page, 'group');
 
@@ -229,7 +231,7 @@ test.describe('Keyboard Behavior', () => {
   test.describe('data-highlighted navigation', () => {
     test(`GIVEN a hero select
         WHEN pressing the down arrow key
-        THEN open up the listbox
+        THEN the listbox should be opened
         AND the first option should have data-highlighted`, async ({ page }) => {
       const { getTrigger, getListbox, getOptionAt } = await setup(page, 'hero');
 
@@ -366,10 +368,9 @@ test.describe('Keyboard Behavior', () => {
   });
 
   test.describe('selecting options', () => {
-    test(`GIVEN an open hero select
-          WHEN an option has data-highlighted
-          AND the Enter key is pressed
-          THEN the listbox should be closed and aria-expanded false`, async ({
+    test(`GIVEN an opened hero select with the first option highlighted
+          WHEN the Enter key is pressed
+          THEN the listbox should be closed and aria-expanded should be false`, async ({
       page,
     }) => {
       const { getTrigger, getListbox, getOptionAt, openListbox } = await setup(
@@ -491,13 +492,14 @@ test.describe('Keyboard Behavior', () => {
       );
 
       // get initial selected value
-      const firstItemValue = await getHiddenOptionAt(0).textContent();
+      // const firstItemValue = await getHiddenOptionAt(0).textContent();
       await getTrigger().focus();
       await getTrigger().press('ArrowRight');
+      await expect(getValueElement()).toHaveText('Tim');
       await getTrigger().press('ArrowRight');
 
       await getTrigger().press('ArrowLeft');
-      expect(await getValueElement()).toHaveText(firstItemValue!);
+      await expect(getValueElement()).toHaveText('Tim');
       await expect(getHiddenOptionAt(0)).toHaveAttribute('aria-selected', 'true');
       await expect(getHiddenOptionAt(0)).toHaveAttribute('data-highlighted');
     });
@@ -1002,7 +1004,26 @@ test.describe('Props', () => {
   });
 });
 
+/** TODO: add docs telling people how to add an aria-label to the root component. (accessible name) */
 test.describe('A11y', () => {
+  test('Axe Validation Test', async ({ page }) => {
+    const { openListbox } = await setup(page, 'hero');
+
+    const initialResults = await new AxeBuilder({ page })
+      .include('[role="combobox"]')
+      .analyze();
+
+    expect(initialResults.violations).toEqual([]);
+
+    await openListbox('click');
+
+    const afterClickResults = await new AxeBuilder({ page })
+      .include('[role="combobox"]')
+      .analyze();
+
+    expect(afterClickResults.violations).toEqual([]);
+  });
+
   test(`GIVEN a select with a group
         WHEN the user adds a new group
         THEN the group should have an aria-labelledby attribute

packages/kit-headless/src/components/select/select.test.ts

@@ -1,19 +1,18 @@
 import {
-  component$,
+  PropsOf,
+  Signal,
   Slot,
-  useSignal,
+  component$,
+  useComputed$,
   useContextProvider,
+  useId,
+  useSignal,
   useTask$,
-  useComputed$,
   type QRL,
-  useId,
-  PropsOf,
-  Signal,
 } from '@builder.io/qwik';
-import { type SelectContext } from './select-context';
-import SelectContextId from './select-context';
-import { Opt } from './select-inline';
 import { isBrowser } from '@builder.io/qwik/build';
+import SelectContextId, { type SelectContext } from './select-context';
+import { Opt } from './select-inline';
 import { getActiveDescendant } from './utils';
 
 export type InternalSelectProps = {