fix: update accordion item heading tag to be customizable

.changeset/heavy-hairs-join.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/accordion": major
+---
+
+Make the accordion item heading tag customizable to satisfy a11y needs. Headings in web page needs to be consistent and semantic, this will help all users to better find the content they are looking for.

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,
@@ -85,7 +86,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})}>
@@ -100,7 +101,7 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
             <span {...getIndicatorProps()}>{indicatorComponent}</span>
           )}
         </button>
-      </h2>
+      </HeadingComponent>
       {content}
     </Component>
   );

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";
@@ -24,7 +25,6 @@ export type AccordionItemIndicatorProps = {
    */
   isDisabled?: boolean;
 };
-
 export interface Props<T extends object = {}>
   extends Omit<ItemProps<"button", T>, "children" | "title" | keyof FocusableProps>,
     FocusableProps,
@@ -85,6 +85,13 @@ 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;

packages/components/accordion/src/use-accordion-item.ts

@@ -59,6 +59,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
     disableAnimation = false,
     keepContentMounted = false,
     disableIndicatorAnimation = false,
+    HeadingComponent = as || "h2",
     onPress,
     onPressStart,
     onPressEnd,
@@ -238,6 +239,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
 
   return {
     Component,
+    HeadingComponent,
     item,
     slots,
     classNames,