mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
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>
This commit is contained in:
Shawn Dong
GitHub
parent
633f9d208b
commit
10497f1a97
5
.changeset/heavy-hairs-join.md
Normal file
5
.changeset/heavy-hairs-join.md
Normal file
@ -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)
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user