fix: update accordion item heading tag to be customizable

.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.

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>
  );

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;

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,