fix(headless/combobox): fix dark mode and add basic a11y tests

cwoolum · cwoolum · commit e87a3c8a8547 · 2024-03-23T11:54:41.000-07:00
diff --git a/.changeset/lazy-eels-peel.md b/.changeset/lazy-eels-peel.md
@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fixed dark mode for combobox and added basic a11y test
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/context.tsx b/apps/website/src/routes/docs/headless/combobox/examples/context.tsx
@@ -40,7 +40,7 @@ export const ContextChild = component$(() => {
       </ComboboxControl>
       <ComboboxPopover flip={true} gutter={8}>
         <ComboboxListbox
-          class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+          class="rounded-base w-44 border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               index={index}
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/custom-filter.tsx b/apps/website/src/routes/docs/headless/combobox/examples/custom-filter.tsx
@@ -49,7 +49,7 @@ export default component$(() => {
       </ComboboxControl>
       <ComboboxPopover flip={true} gutter={8}>
         <ComboboxListbox
-          class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+          class="rounded-base w-44 border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/custom-keys.tsx b/apps/website/src/routes/docs/headless/combobox/examples/custom-keys.tsx
@@ -56,7 +56,7 @@ export default component$(() => {
         </ComboboxControl>
         <ComboboxPopover flip={true} gutter={8}>
           <ComboboxListbox
-            class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+            class="rounded-base w-44 border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
             optionRenderer$={(option: ResolvedOption, index: number) => {
               const pokemonOption = option.option as Pokemon;
               return (
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/default-label.tsx b/apps/website/src/routes/docs/headless/combobox/examples/default-label.tsx
@@ -27,7 +27,7 @@ export default component$(() => {
       </ComboboxControl>
       <ComboboxPopover gutter={8} hide="escaped">
         <ComboboxListbox
-          class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+          class="rounded-base w-44 border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/disable-blur.tsx b/apps/website/src/routes/docs/headless/combobox/examples/disable-blur.tsx
@@ -47,7 +47,7 @@ export default component$(() => {
         </ComboboxControl>
         <ComboboxPopover gutter={8} hide="referenceHidden">
           <ComboboxListbox
-            class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+            class="rounded-base w-44 border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
             optionRenderer$={(option: ResolvedOption, index: number) => (
               <ComboboxOption
                 key={option.key}
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/disabled.tsx b/apps/website/src/routes/docs/headless/combobox/examples/disabled.tsx
@@ -42,7 +42,7 @@ export default component$(() => {
       </ComboboxControl>
       <ComboboxPopover flip={true} gutter={8}>
         <ComboboxListbox
-          class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+          class="rounded-base w-44 border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/hero.tsx b/apps/website/src/routes/docs/headless/combobox/examples/hero.tsx
@@ -55,7 +55,7 @@ export default component$(() => {
       </ComboboxControl>
       <ComboboxPopover class="rounded-sm" gutter={8}>
         <ComboboxListbox
-          class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+          class="rounded-base w-44 border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
           optionRenderer$={(option: ResolvedOption, index: number) => {
             const myData = option.option as MyData;
             return (
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/hide.tsx b/apps/website/src/routes/docs/headless/combobox/examples/hide.tsx
@@ -50,7 +50,7 @@ export default component$(() => {
         </ComboboxControl>
         <ComboboxPopover gutter={8} hide="escaped">
           <ComboboxListbox
-            class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+            class="rounded-base w-44 border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
             optionRenderer$={(option: ResolvedOption, index: number) => (
               <ComboboxOption
                 key={option.key}
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/highlighted-index.tsx b/apps/website/src/routes/docs/headless/combobox/examples/highlighted-index.tsx
@@ -38,7 +38,7 @@ export default component$(() => {
         </ComboboxControl>
         <ComboboxPopover hide="escaped" gutter={8} size={true}>
           <ComboboxListbox
-            class="rounded-base w-fit border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+            class="rounded-base w-fit border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
             optionRenderer$={(option: ResolvedOption, index: number) => (
               <ComboboxOption
                 key={option.key}
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/object.tsx b/apps/website/src/routes/docs/headless/combobox/examples/object.tsx
@@ -37,7 +37,7 @@ export default component$(() => {
       </ComboboxControl>
       <ComboboxPopover gutter={8}>
         <ComboboxListbox
-          class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+          class="rounded-base w-44 border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/placement.tsx b/apps/website/src/routes/docs/headless/combobox/examples/placement.tsx
@@ -44,7 +44,7 @@ export default component$(() => {
         </ComboboxControl>
         <ComboboxPopover gutter={8} placement="top">
           <ComboboxListbox
-            class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+            class="rounded-base w-44 border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
             optionRenderer$={(option: ResolvedOption, index: number) => (
               <ComboboxOption
                 key={option.key}
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/search-bar.tsx b/apps/website/src/routes/docs/headless/combobox/examples/search-bar.tsx
@@ -76,7 +76,7 @@ export default component$(() => {
       </ComboboxControl>
       <ComboboxPopover gutter={8} hide="escaped">
         <ComboboxListbox
-          class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-1 py-2"
+          class="rounded-base w-44 border-[1px] border-slate-400 px-1 py-2 dark:bg-slate-900 dark:text-white"
           optionRenderer$={(option: ResolvedOption, index: number) => {
             const searchOption = option.option as MyComponents;
             return (
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/signal-binds.tsx b/apps/website/src/routes/docs/headless/combobox/examples/signal-binds.tsx
@@ -35,7 +35,7 @@ export default component$(() => {
         >
           <ComboboxControl class="rounded-base relative flex items-center border">
             <ComboboxInput
-              class="px-d2 placeholder:text-muted-foreground rounded-base w-fit px-2 pr-6"
+              class="px-d2 placeholder:text-muted-foreground bg-background rounded-base w-fit px-2 pr-6"
               onClick$={() => (isListboxOpenSig.value = !isListboxOpenSig.value)}
             />
             <ComboboxTrigger class="group absolute right-0 h-6 w-6">
@@ -44,7 +44,7 @@ export default component$(() => {
           </ComboboxControl>
           <ComboboxPopover hide="escaped" gutter={8}>
             <ComboboxListbox
-              class="rounded-base w-fit border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+              class="rounded-base w-fit border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
               optionRenderer$={(option: ResolvedOption, index: number) => (
                 <ComboboxOption
                   key={option.key}
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/sort-filter.tsx b/apps/website/src/routes/docs/headless/combobox/examples/sort-filter.tsx
@@ -53,7 +53,7 @@ export default component$(() => {
       </ComboboxControl>
       <ComboboxPopover flip={true} gutter={8}>
         <ComboboxListbox
-          class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+          class="rounded-base w-44 border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/string.tsx b/apps/website/src/routes/docs/headless/combobox/examples/string.tsx
@@ -53,7 +53,7 @@ export default component$(() => {
       </ComboboxControl>
       <ComboboxPopover gutter={8}>
         <ComboboxListbox
-          class="rounded-base w-44 border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
+          class="rounded-base w-44 border-[1px] border-slate-400 px-4 py-2 dark:bg-slate-900 dark:text-white"
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
diff --git a/packages/kit-headless/src/components/combobox/combobox.driver.ts b/packages/kit-headless/src/components/combobox/combobox.driver.ts
@@ -0,0 +1,25 @@
+import { type Locator, type Page } from '@playwright/test';
+
+export type DriverLocator = Locator | Page;
+
+export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
+  const getCombobox = () => {
+    return rootLocator.locator('[combobox]');
+  };
+
+  const getTrigger = () => {
+    return rootLocator.getByRole('button', { name: 'Toggle list of Listbox' });
+  };
+
+  const selectOption = (value: string) => {
+    return rootLocator.getByText(value);
+  };
+
+  return {
+    ...rootLocator,
+    locator: rootLocator,
+    getCombobox,
+    getTrigger,
+    selectOption,
+  };
+}
diff --git a/packages/kit-headless/src/components/combobox/combobox.test.ts b/packages/kit-headless/src/components/combobox/combobox.test.ts
@@ -0,0 +1,45 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test, type Page } from '@playwright/test';
+import { createTestDriver } from './combobox.driver';
+
+async function setup(page: Page, exampleName: string) {
+  await page.goto(`/headless/combobox/${exampleName}`);
+
+  const driver = createTestDriver(page);
+
+  return {
+    driver,
+  };
+}
+
+test('@Visual diff', async ({ page }) => {
+  const { driver: d } = await setup(page, 'hero');
+  await expect(page).toHaveScreenshot('closed combobox.png');
+
+  await d.getTrigger().click();
+
+  await expect(page).toHaveScreenshot('opened combobox.png');
+});
+
+/** 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 { driver: d } = await setup(page, 'hero');
+
+    const initialResults = await new AxeBuilder({ page })
+      .include('[role="combobox"]')
+      .analyze();
+
+    expect(initialResults.violations).toEqual([]);
+
+    await d.getTrigger().click();
+
+    await expect(d.selectOption('Malcolm')).toBeVisible();
+
+    const afterClickResults = await new AxeBuilder({ page })
+      .include('[role="combobox"]')
+      .analyze();
+
+    expect(afterClickResults.violations).toEqual([]);
+  });
+});

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@qwik-ui/headless': patch
 +---
++
 +fixed dark mode for combobox and added basic a11y test