fix: update accordion item heading tag to be customizable (#2265)

* fix: update accordion item heading tag to be customizable * Update .changeset/heavy-hairs-join.md Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * Update .changeset/heavy-hairs-join.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore(accordion): lint * chore(changeset): add issue number * feat(docs): add HeadingComponent prop --------- Co-authored-by: Shawn Dong <shawn.dong@flybuys.com.au> Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com>
nextui-org · May 13, 2024 · 10497f1 · 10497f1
1 parent 633f9d2
commit 10497f1
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 17 deletions.
diff --git a/.changeset/heavy-hairs-join.md b/.changeset/heavy-hairs-join.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/accordion": patch
+---
+
+Make the accordion item heading tag customizable to satisfy a11y needs. Headings on web pages need to be consistent and semantic; this will help all users better find the content they are looking for. (#2950)
diff --git a/apps/docs/content/docs/components/accordion.mdx b/apps/docs/content/docs/components/accordion.mdx
@@ -220,21 +220,22 @@ Here's an example of how to customize the accordion styles:
 
 ### Accordion Item Props
 
-| Attribute                 | Type                                              | Description                                                                                           | Default |
-| ------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------- |
-| children                  | `ReactNode` \| `string`                           | The content of the component.                                                                         |         |
-| title                     | `ReactNode` \| `string`                           | The accordion item title.                                                                             |         |
-| subtitle                  | `ReactNode` \| `string`                           | The accordion item subtitle.                                                                          |         |
-| indicator                 | [IndicatorProps](#accordion-item-indicator-props) | The accordion item `expanded` indicator, usually an arrow icon.                                       |         |
-| startContent              | `ReactNode`                                       | The accordion item start content, usually an icon or avatar.                                          |         |
-| motionProps               | [MotionProps](#motion-props)                      | The props to modify the framer motion animation. Use the `variants` API to create your own animation. |         |
-| isCompact                 | `boolean`                                         | Whether the AccordionItem is compact.                                                                 | `false` |
-| isDisabled                | `boolean`                                         | The current disabled status.                                                                          | `false` |
-| keepContentMounted        | `boolean`                                         | Whether the AccordionItem content is kept mounted when closed.                                        | `false` |
-| hideIndicator             | `boolean`                                         | Whether the AccordionItem indicator is hidden.                                                        | `false` |
-| disableAnimation          | `boolean`                                         | Whether the AccordionItem animation is disabled.                                                      | `false` |
-| disableIndicatorAnimation | `boolean`                                         | Whether the AccordionItem indicator animation is disabled.                                            | `false` |
-| classNames                | [Classnames](#accordion-item-classnames)          | Allows to set custom class names for the accordion item slots.                                        | -       |
+| Attribute                 | Type                                              | Description                                                                                                                  | Default |
+|---------------------------|---------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------|---------|
+| children                  | `ReactNode` \| `string`                           | The content of the component.                                                                                                |         |
+| title                     | `ReactNode` \| `string`                           | The accordion item title.                                                                                                    |         |
+| subtitle                  | `ReactNode` \| `string`                           | The accordion item subtitle.                                                                                                 |         |
+| indicator                 | [IndicatorProps](#accordion-item-indicator-props) | The accordion item `expanded` indicator, usually an arrow icon.                                                              |         |
+| startContent              | `ReactNode`                                       | The accordion item start content, usually an icon or avatar.                                                                 |         |
+| motionProps               | [MotionProps](#motion-props)                      | The props to modify the framer motion animation. Use the `variants` API to create your own animation.                        |         |
+| isCompact                 | `boolean`                                         | Whether the AccordionItem is compact.                                                                                        | `false` |
+| isDisabled                | `boolean`                                         | The current disabled status.                                                                                                 | `false` |
+| keepContentMounted        | `boolean`                                         | Whether the AccordionItem content is kept mounted when closed.                                                               | `false` |
+| hideIndicator             | `boolean`                                         | Whether the AccordionItem indicator is hidden.                                                                               | `false` |
+| disableAnimation          | `boolean`                                         | Whether the AccordionItem animation is disabled.                                                                             | `false` |
+| disableIndicatorAnimation | `boolean`                                         | Whether the AccordionItem indicator animation is disabled.                                                                   | `false` |
+| HeadingComponent          | `React.ElementType`                               | Customizable heading tag for Web accessibility. Use headings to describe content and use them consistently and semantically. | `h2`    |
+| classNames                | [Classnames](#accordion-item-classnames)          | Allows to set custom class names for the accordion item slots.                                                               | -       |
 
 ### Accordion Item Events
 

diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx
@@ -11,6 +11,7 @@ export interface AccordionItemProps extends UseAccordionItemProps {}
 const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
   const {
     Component,
+    HeadingComponent,
     classNames,
     slots,
     indicator,
@@ -89,7 +90,7 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
 
   return (
     <Component {...getBaseProps()}>
-      <h2 {...getHeadingProps()}>
+      <HeadingComponent {...getHeadingProps()}>
         <button {...getButtonProps()}>
           {startContent && (
             <div className={slots.startContent({class: classNames?.startContent})}>
@@ -104,7 +105,7 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
             <span {...getIndicatorProps()}>{indicatorComponent}</span>
           )}
         </button>
-      </h2>
+      </HeadingComponent>
       {content}
     </Component>
   );

diff --git a/packages/components/accordion/src/base/accordion-item-base.tsx b/packages/components/accordion/src/base/accordion-item-base.tsx
@@ -4,6 +4,7 @@ import type {
   SlotsToClasses,
 } from "@nextui-org/theme";
 
+import {As} from "@nextui-org/system";
 import {ItemProps, BaseItem} from "@nextui-org/aria-utils";
 import {FocusableProps, PressEvents} from "@react-types/shared";
 import {ReactNode, MouseEventHandler} from "react";
@@ -85,6 +86,12 @@ export interface Props<T extends object = {}>
    * ```
    */
   classNames?: SlotsToClasses<AccordionItemSlots>;
+  /**
+   * Customizable heading tag for Web accessibility:
+   * use headings to describe content and use them consistently and semantically.
+   * This will help all users to better find the content they are looking for.
+   */
+  HeadingComponent?: As;
 }
 
 export type AccordionItemBaseProps<T extends object = {}> = Props<T> & AccordionItemVariantProps;

diff --git a/packages/components/accordion/src/use-accordion-item.ts b/packages/components/accordion/src/use-accordion-item.ts
@@ -58,6 +58,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
     disableAnimation = false,
     keepContentMounted = false,
     disableIndicatorAnimation = false,
+    HeadingComponent = as || "h2",
     onPress,
     onPressStart,
     onPressEnd,
@@ -237,6 +238,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
 
   return {
     Component,
+    HeadingComponent,
     item,
     slots,
     classNames,