Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
May 13, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3b09c44
fix: update accordion item heading tag to be customizable
Jan 19, 2024
da00ab9
Update .changeset/heavy-hairs-join.md
outputboy Apr 21, 2024
a0c14e8
Update .changeset/heavy-hairs-join.md
outputboy Apr 21, 2024
9bd84cf
Merge branch 'main' into pr/2265
wingkwong Apr 22, 2024
06e9bc5
chore(accordion): lint
wingkwong Apr 22, 2024
4e5c3a2
Merge branch 'canary' into pr/2265
wingkwong May 5, 2024
1d69add
chore(changeset): add issue number
wingkwong May 5, 2024
72be5ab
feat(docs): add HeadingComponent prop
wingkwong May 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/heavy-hairs-join.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
31 changes: 16 additions & 15 deletions apps/docs/content/docs/components/accordion.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
5 changes: 3 additions & 2 deletions packages/components/accordion/src/accordion-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export interface AccordionItemProps extends UseAccordionItemProps {}
const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
const {
Component,
HeadingComponent,
classNames,
slots,
indicator,
Expand Down Expand Up @@ -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})}>
Expand All @@ -104,7 +105,7 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
<span {...getIndicatorProps()}>{indicatorComponent}</span>
)}
</button>
</h2>
</HeadingComponent>
{content}
</Component>
);
Expand Down
7 changes: 7 additions & 0 deletions packages/components/accordion/src/base/accordion-item-base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions packages/components/accordion/src/use-accordion-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
disableAnimation = false,
keepContentMounted = false,
disableIndicatorAnimation = false,
HeadingComponent = as || "h2",
onPress,
onPressStart,
onPressEnd,
Expand Down Expand Up @@ -237,6 +238,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP

return {
Component,
HeadingComponent,
item,
slots,
classNames,
Expand Down
Loading