feat(accordion) add storybook + a11y (#303)

* feat: export AccordionItemProps

Co-authored-by: Itai Mizlish <[email protected]>

* test(accordion): add story of Accordion

* chore: add storybook bundles to gitignore

* feat(accordion): add aria-hidden to accordion items

* test(accordion): update accordion story with more items

* feat(accordion): improve a11y support

---------

Co-authored-by: Itai Mizlish <[email protected]>

Author: tleperou

.gitignore

@@ -63,4 +63,7 @@ testem.log
 
 # System Files
 .DS_Store
-Thumbs.db
+Thumbs.db
+
+# Storybook
+**/storybook-static/*

packages/kit-headless/src/components/accordion/accordion.stories.tsx

@@ -1,27 +1,51 @@
 import { Meta, StoryObj } from 'storybook-framework-qwik';
-import { Accordion, AccordionItem, AccordionProps } from './accordion';
-import { within, userEvent } from '@storybook/testing-library';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionProps,
+  AccordionItemProps,
+} from './accordion';
+import { userEvent, within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
 const meta: Meta<AccordionProps> = {
   component: Accordion,
 };
 
-export default meta;
+type Story = StoryObj<{
+  accordion: AccordionProps;
+  accordionItem: AccordionItemProps;
+}>;
 
-type Story = StoryObj<AccordionProps>;
+export default meta;
 
 export const Primary: Story = {
-  render: () => (
-    <Accordion>
-      <AccordionItem label="Item 1">This is a test</AccordionItem>
-    </Accordion>
+  args: {
+    accordionItem: {
+      label: 'Label of the accordion being tested',
+    },
+  },
+  render: (args) => (
+    <>
+      <Accordion>
+        <AccordionItem label={`${args.accordionItem.label}`}>
+          Content of the accordion 11
+        </AccordionItem>
+        <AccordionItem label={`${args.accordionItem.label} 11`}>
+          Content of the accordion 12
+        </AccordionItem>
+        <AccordionItem label={`${args.accordionItem.label} 13`}>
+          Content of the accordion 13
+        </AccordionItem>
+        <AccordionItem label={`${args.accordionItem.label} 14`}>
+          Content of the accordion 14
+        </AccordionItem>
+      </Accordion>
+    </>
   ),
-  play: async ({ canvasElement }) => {
+  play: ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
-
-    await userEvent.click(canvas.getByText('Item 1'));
-
-    await expect(canvas.getByText('This is a test')).toBeInTheDocument();
+    userEvent.click(canvas.getByText(args.accordionItem.label));
+    expect(canvas.getByText('Content of the accordion 11')).toBeTruthy();
   },
 };

packages/kit-headless/src/components/accordion/accordion.tsx

@@ -13,6 +13,7 @@ import {
   useSignal,
   useStore,
   useStylesScoped$,
+  useId,
 } from '@builder.io/qwik';
 
 export type AccordionProps = HTMLAttributes<HTMLElement>;
@@ -25,7 +26,7 @@ interface AccordionContextService {
   setItemsBoxRef$: QRL<(ref: Signal<HTMLElement | undefined>) => void>;
 }
 
-interface AccordionItemProps {
+export interface AccordionItemProps {
   label: string;
   disabled?: boolean;
   class?: string;
@@ -73,11 +74,17 @@ export const AccordionItem = component$((props: AccordionItemProps) => {
       }
     `);
   const contextService = useContext(accordionContext);
+  const ref = useSignal<HTMLElement>();
+  const id = useId();
+
   return (
-    <div class="item">
+    <div ref={ref} class="item">
       <button
+        id={`${id}__trigger`}
+        aria-controls={`${id}__body`}
+        aria-expanded={!!ref.value?.getAttribute('open')}
         onClick$={(e) => {
-          const target = (e.target as HTMLElement).parentElement;
+          const target = ref.value;
           contextService.items.forEach((i: HTMLElement) => {
             if (target === i) {
               return;
@@ -92,7 +99,13 @@ export const AccordionItem = component$((props: AccordionItemProps) => {
       >
         {props.label}
       </button>
-      <div class="content">
+      <div
+        role="region"
+        id={`${id}__body`}
+        class="content"
+        aria-labelledby={`${id}__trigger`}
+        aria-hidden={!!ref.value?.getAttribute('open')}
+      >
         <Slot />
       </div>
     </div>