feat(accordion): accordion item header

adevinta · Jun 17, 2024 · 20c248f · 20c248f
1 parent 72d42b2
commit 20c248f
Show file tree

Hide file tree

Showing 7 changed files with 189 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/accordion/src/Accordion.doc.mdx b/packages/components/accordion/src/Accordion.doc.mdx
@@ -49,7 +49,14 @@ import { Accordion } from '@spark-ui/accordion'
 
 ### Default
 
-A `Accordion` is closed by default. Interacting with its trigger will open the associated content.
+An `Accordion` is closed by default. Interacting with its trigger will open the associated content.
+
+Important, as per ARIA specifications:
+
+> **Each accordion header button is wrapped in an element with role [heading](https://w3c.github.io/aria/#heading) that has a value set for [aria-level](https://w3c.github.io/aria/#aria-level) that is appropriate for the information architecture of the page.**
+
+For this, you must wrap each `Accordion.ItemTrigger` with an `Accordion.ItemHeader` (`h3` by default, use `asChild` property of `ItemHeader` to set the heading level that matches your page structure).
+For example, in the context of this storybook page, we use `h4` because the accordion is preceded by an `h3` already.
 
 <Canvas of={stories.Default} />
 

diff --git a/packages/components/accordion/src/Accordion.stories.tsx b/packages/components/accordion/src/Accordion.stories.tsx
@@ -14,8 +14,12 @@ export default meta
 export const Default: StoryFn = () => {
   return (
     <Accordion>
-      <Accordion.Item value="a">
-        <Accordion.ItemTrigger>Watercraft</Accordion.ItemTrigger>
+      <Accordion.Item value="watercraft">
+        <Accordion.ItemHeader asChild>
+          <h4>
+            <Accordion.ItemTrigger>Watercraft</Accordion.ItemTrigger>
+          </h4>
+        </Accordion.ItemHeader>
         <Accordion.ItemContent>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
@@ -24,8 +28,12 @@ export const Default: StoryFn = () => {
         </Accordion.ItemContent>
       </Accordion.Item>
 
-      <Accordion.Item value="b">
-        <Accordion.ItemTrigger>Automobiles</Accordion.ItemTrigger>
+      <Accordion.Item value="automobiles">
+        <Accordion.ItemHeader asChild>
+          <h4>
+            <Accordion.ItemTrigger>Automobiles</Accordion.ItemTrigger>
+          </h4>
+        </Accordion.ItemHeader>
         <Accordion.ItemContent>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
@@ -34,8 +42,12 @@ export const Default: StoryFn = () => {
         </Accordion.ItemContent>
       </Accordion.Item>
 
-      <Accordion.Item value="c">
-        <Accordion.ItemTrigger>Aircrafts</Accordion.ItemTrigger>
+      <Accordion.Item value="aircrafts">
+        <Accordion.ItemHeader asChild>
+          <h4>
+            <Accordion.ItemTrigger>Aircrafts</Accordion.ItemTrigger>
+          </h4>
+        </Accordion.ItemHeader>
         <Accordion.ItemContent>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
@@ -50,7 +62,7 @@ export const Default: StoryFn = () => {
 export const Disabled: StoryFn = () => {
   return (
     <Accordion disabled>
-      <Accordion.Item value="a">
+      <Accordion.Item value="watercraft">
         <Accordion.ItemTrigger>Watercraft</Accordion.ItemTrigger>
         <Accordion.ItemContent>
           <p>
@@ -60,7 +72,7 @@ export const Disabled: StoryFn = () => {
         </Accordion.ItemContent>
       </Accordion.Item>
 
-      <Accordion.Item value="b">
+      <Accordion.Item value="automobiles">
         <Accordion.ItemTrigger>Automobiles</Accordion.ItemTrigger>
         <Accordion.ItemContent>
           <p>
@@ -70,7 +82,7 @@ export const Disabled: StoryFn = () => {
         </Accordion.ItemContent>
       </Accordion.Item>
 
-      <Accordion.Item value="c">
+      <Accordion.Item value="aircrafts">
         <Accordion.ItemTrigger>Aircrafts</Accordion.ItemTrigger>
         <Accordion.ItemContent>
           <p>
@@ -86,7 +98,7 @@ export const Disabled: StoryFn = () => {
 export const DisabledItem: StoryFn = () => {
   return (
     <Accordion>
-      <Accordion.Item value="a">
+      <Accordion.Item value="watercraft">
         <Accordion.ItemTrigger>Watercraft</Accordion.ItemTrigger>
         <Accordion.ItemContent>
           <p>
@@ -96,7 +108,7 @@ export const DisabledItem: StoryFn = () => {
         </Accordion.ItemContent>
       </Accordion.Item>
 
-      <Accordion.Item value="b" disabled>
+      <Accordion.Item value="automobiles" disabled>
         <Accordion.ItemTrigger>Automobiles</Accordion.ItemTrigger>
         <Accordion.ItemContent>
           <p>
@@ -106,7 +118,7 @@ export const DisabledItem: StoryFn = () => {
         </Accordion.ItemContent>
       </Accordion.Item>
 
-      <Accordion.Item value="c">
+      <Accordion.Item value="aircrafts">
         <Accordion.ItemTrigger>Aircrafts</Accordion.ItemTrigger>
         <Accordion.ItemContent>
           <p>
@@ -121,8 +133,8 @@ export const DisabledItem: StoryFn = () => {
 
 export const Multiple: StoryFn = () => {
   return (
-    <Accordion multiple defaultValue={['b', 'c']}>
-      <Accordion.Item value="a">
+    <Accordion multiple defaultValue={['automobiles', 'aircrafts']}>
+      <Accordion.Item value="watercraft">
         <Accordion.ItemTrigger>Watercraft</Accordion.ItemTrigger>
         <Accordion.ItemContent>
           <p>
@@ -132,7 +144,7 @@ export const Multiple: StoryFn = () => {
         </Accordion.ItemContent>
       </Accordion.Item>
 
-      <Accordion.Item value="b">
+      <Accordion.Item value="automobiles">
         <Accordion.ItemTrigger>Automobiles</Accordion.ItemTrigger>
         <Accordion.ItemContent>
           <p>
@@ -142,7 +154,7 @@ export const Multiple: StoryFn = () => {
         </Accordion.ItemContent>
       </Accordion.Item>
 
-      <Accordion.Item value="c">
+      <Accordion.Item value="aircrafts">
         <Accordion.ItemTrigger>Aircrafts</Accordion.ItemTrigger>
         <Accordion.ItemContent>
           <p>
@@ -156,7 +168,7 @@ export const Multiple: StoryFn = () => {
 }
 
 export const Controlled: StoryFn = () => {
-  const [value, setValue] = useState(['b', 'c'])
+  const [value, setValue] = useState(['automobiles', 'aircrafts'])
 
   return (
     <div>
@@ -166,13 +178,13 @@ export const Controlled: StoryFn = () => {
         onCheckedChange={setValue}
         className="mb-lg"
       >
-        <Checkbox value="a">Watercraft</Checkbox>
-        <Checkbox value="b">Automobiles</Checkbox>
-        <Checkbox value="c">Aircrafts</Checkbox>
+        <Checkbox value="watercraft">Watercraft</Checkbox>
+        <Checkbox value="automobiles">Automobiles</Checkbox>
+        <Checkbox value="aircrafts">Aircrafts</Checkbox>
       </CheckboxGroup>
 
       <Accordion multiple value={value} onValueChange={setValue}>
-        <Accordion.Item value="a">
+        <Accordion.Item value="watercraft">
           <Accordion.ItemTrigger>Watercraft</Accordion.ItemTrigger>
           <Accordion.ItemContent>
             <p>
@@ -182,7 +194,7 @@ export const Controlled: StoryFn = () => {
           </Accordion.ItemContent>
         </Accordion.Item>
 
-        <Accordion.Item value="b">
+        <Accordion.Item value="automobiles">
           <Accordion.ItemTrigger>Automobiles</Accordion.ItemTrigger>
           <Accordion.ItemContent>
             <p>
@@ -192,7 +204,7 @@ export const Controlled: StoryFn = () => {
           </Accordion.ItemContent>
         </Accordion.Item>
 
-        <Accordion.Item value="c">
+        <Accordion.Item value="aircrafts">
           <Accordion.ItemTrigger>Aircrafts</Accordion.ItemTrigger>
           <Accordion.ItemContent>
             <p>

diff --git a/packages/components/accordion/src/Accordion.test.tsx b/packages/components/accordion/src/Accordion.test.tsx
@@ -45,4 +45,118 @@ describe('Accordion', () => {
       expect(screen.getByText('Second panel')).toBeVisible()
     })
   })
+
+  it('should open the accordion content when clicking on the trigger (multiple)', async () => {
+    const user = userEvent.setup()
+
+    // Given an accordion in closed state and multiple mode enabled
+    render(
+      <Accordion multiple>
+        <Accordion.Item value="a">
+          <Accordion.ItemTrigger>First trigger</Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            <p>First panel</p>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+
+        <Accordion.Item value="b">
+          <Accordion.ItemTrigger>Second trigger</Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            <p>Second panel</p>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      </Accordion>
+    )
+
+    // Then both panels are closed
+    expect(screen.getByText('First panel')).not.toBeVisible()
+    expect(screen.getByText('Second panel')).not.toBeVisible()
+
+    await user.click(screen.getByRole('button', { name: 'First trigger' }))
+
+    // Then first panel has been opened
+    expect(screen.getByText('First panel')).toBeVisible()
+    expect(screen.getByText('Second panel')).not.toBeVisible()
+
+    await user.click(screen.getByRole('button', { name: 'Second trigger' }))
+
+    // Then second panel is opened and the first one remains opened
+    await waitFor(() => {
+      expect(screen.getByText('First panel')).toBeVisible()
+      expect(screen.getByText('Second panel')).toBeVisible()
+    })
+  })
+
+  it('should not open content on click when disabled', async () => {
+    const user = userEvent.setup()
+
+    // Given a disabled accordion
+    render(
+      <Accordion disabled>
+        <Accordion.Item value="a">
+          <Accordion.ItemTrigger>First trigger</Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            <p>First panel</p>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+
+        <Accordion.Item value="b">
+          <Accordion.ItemTrigger>Second trigger</Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            <p>Second panel</p>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      </Accordion>
+    )
+
+    // Then both panels are closed
+    expect(screen.getByText('First panel')).not.toBeVisible()
+    expect(screen.getByText('Second panel')).not.toBeVisible()
+
+    await user.click(screen.getByRole('button', { name: 'First trigger' }))
+
+    // Then the panel remain closed
+    expect(screen.getByText('First panel')).not.toBeVisible()
+    expect(screen.getByText('Second panel')).not.toBeVisible()
+  })
+
+  it('should not open content on click when specific item is disabled', async () => {
+    const user = userEvent.setup()
+
+    // Given an accordion whose second item is disabled
+    render(
+      <Accordion>
+        <Accordion.Item value="a">
+          <Accordion.ItemTrigger>First trigger</Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            <p>First panel</p>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+
+        <Accordion.Item value="b" disabled>
+          <Accordion.ItemTrigger>Second trigger</Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            <p>Second panel</p>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      </Accordion>
+    )
+
+    // Then both panels are closed
+    expect(screen.getByText('First panel')).not.toBeVisible()
+    expect(screen.getByText('Second panel')).not.toBeVisible()
+
+    await user.click(screen.getByRole('button', { name: 'First trigger' }))
+
+    // Then first panel has been opened
+    expect(screen.getByText('First panel')).toBeVisible()
+    expect(screen.getByText('Second panel')).not.toBeVisible()
+
+    // When the used clicks on the disabled item trigger
+    await user.click(screen.getByRole('button', { name: 'Second trigger' }))
+
+    // Then first panel remain opened because second panel was disabled
+    expect(screen.getByText('First panel')).toBeVisible()
+    expect(screen.getByText('Second panel')).not.toBeVisible()
+  })
 })
diff --git a/packages/components/accordion/src/Accordion.tsx b/packages/components/accordion/src/Accordion.tsx
@@ -8,7 +8,7 @@ type ExtentedZagInterface = Omit<
   accordion.Context,
   'id' | 'ids' | 'orientation' | 'getRootNode' | 'onValueChange'
 > &
-  ComponentPropsWithoutRef<'div'>
+  Omit<ComponentPropsWithoutRef<'div'>, 'defaultChecked'>
 
 export interface AccordionProps extends ExtentedZagInterface {
   /**

diff --git a/packages/components/accordion/src/AccordionItemHeader.tsx b/packages/components/accordion/src/AccordionItemHeader.tsx
@@ -0,0 +1,25 @@
+import { Slot } from '@spark-ui/slot'
+import { cx } from 'class-variance-authority'
+import { type ComponentProps, forwardRef } from 'react'
+
+export interface AccordionItemItemHeaderProps extends ComponentProps<'h3'> {
+  asChild?: boolean
+}
+
+export const ItemHeader = forwardRef<HTMLHeadingElement, AccordionItemItemHeaderProps>(
+  ({ asChild = false, children, className }, ref) => {
+    const Component = asChild ? Slot : 'h3'
+
+    return (
+      <Component
+        ref={ref}
+        data-spark-component="accordion-item-header"
+        className={cx('rounded-[inherit]', className)}
+      >
+        {children}
+      </Component>
+    )
+  }
+)
+
+ItemHeader.displayName = 'Accordion.ItemHeader'
diff --git a/packages/components/accordion/src/index.ts b/packages/components/accordion/src/index.ts
@@ -3,23 +3,28 @@ import type { FC } from 'react'
 import { Accordion as Root, type AccordionProps } from './Accordion'
 import { Item } from './AccordionItem'
 import { ItemContent } from './AccordionItemContent'
+import { ItemHeader } from './AccordionItemHeader'
 import { ItemTrigger } from './AccordionItemTrigger'
 
 export const Accordion: FC<AccordionProps> & {
   Item: typeof Item
+  ItemHeader: typeof ItemHeader
   ItemTrigger: typeof ItemTrigger
   ItemContent: typeof ItemContent
 } = Object.assign(Root, {
   Item,
+  ItemHeader,
   ItemTrigger,
   ItemContent,
 })
 
 Accordion.displayName = 'Accordion'
 Item.displayName = 'Item'
+ItemHeader.displayName = 'ItemHeader'
 ItemTrigger.displayName = 'Accordion.Trigger'
 ItemContent.displayName = 'Accordion.Content'
 
 export { type AccordionProps } from './Accordion'
+export { type AccordionItemHeaderProps } from './AccordionItemHeader'
 export { type AccordionItemContentProps } from './AccordionItemContent'
 export { type AccordionItemTriggerProps } from './AccordionItemTrigger'