From 3b09c447190ef69358db32986bafff709434c000 Mon Sep 17 00:00:00 2001 From: Shawn Dong Date: Fri, 19 Jan 2024 11:28:08 +1100 Subject: [PATCH 1/6] fix: update accordion item heading tag to be customizable --- .changeset/heavy-hairs-join.md | 5 +++++ packages/components/accordion/src/accordion-item.tsx | 5 +++-- .../accordion/src/base/accordion-item-base.tsx | 9 ++++++++- packages/components/accordion/src/use-accordion-item.ts | 2 ++ 4 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 .changeset/heavy-hairs-join.md diff --git a/.changeset/heavy-hairs-join.md b/.changeset/heavy-hairs-join.md new file mode 100644 index 0000000000..dcc96a52bf --- /dev/null +++ b/.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. diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx index 081678c42f..2f7a70b58d 100644 --- 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, @@ -85,7 +86,7 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => { return ( -

+ -

+ {content} ); diff --git a/packages/components/accordion/src/base/accordion-item-base.tsx b/packages/components/accordion/src/base/accordion-item-base.tsx index 7c61e30002..4781343317 100644 --- 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"; @@ -24,7 +25,6 @@ export type AccordionItemIndicatorProps = { */ isDisabled?: boolean; }; - export interface Props extends Omit, "children" | "title" | keyof FocusableProps>, FocusableProps, @@ -85,6 +85,13 @@ export interface Props * ``` */ classNames?: SlotsToClasses; + + /** + * 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 = Props & AccordionItemVariantProps; diff --git a/packages/components/accordion/src/use-accordion-item.ts b/packages/components/accordion/src/use-accordion-item.ts index 2f0d9f1648..7228f0a2c1 100644 --- a/packages/components/accordion/src/use-accordion-item.ts +++ b/packages/components/accordion/src/use-accordion-item.ts @@ -59,6 +59,7 @@ export function useAccordionItem(props: UseAccordionItemP disableAnimation = false, keepContentMounted = false, disableIndicatorAnimation = false, + HeadingComponent = as || "h2", onPress, onPressStart, onPressEnd, @@ -238,6 +239,7 @@ export function useAccordionItem(props: UseAccordionItemP return { Component, + HeadingComponent, item, slots, classNames, From da00ab9d4f8f4781443cf7b7aa9940268e2c0b5c Mon Sep 17 00:00:00 2001 From: Shawn Dong Date: Mon, 22 Apr 2024 09:40:06 +1000 Subject: [PATCH 2/6] Update .changeset/heavy-hairs-join.md Co-authored-by: Junior Garcia --- .changeset/heavy-hairs-join.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/heavy-hairs-join.md b/.changeset/heavy-hairs-join.md index dcc96a52bf..111d0f5f66 100644 --- a/.changeset/heavy-hairs-join.md +++ b/.changeset/heavy-hairs-join.md @@ -1,5 +1,5 @@ --- -"@nextui-org/accordion": major +"@nextui-org/accordion": patch --- 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. From a0c14e873fd5ef6665b58784eaebbc090dddeda0 Mon Sep 17 00:00:00 2001 From: Shawn Dong Date: Mon, 22 Apr 2024 09:43:03 +1000 Subject: [PATCH 3/6] Update .changeset/heavy-hairs-join.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- .changeset/heavy-hairs-join.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/heavy-hairs-join.md b/.changeset/heavy-hairs-join.md index 111d0f5f66..afea05a872 100644 --- a/.changeset/heavy-hairs-join.md +++ b/.changeset/heavy-hairs-join.md @@ -2,4 +2,4 @@ "@nextui-org/accordion": patch --- -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. +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. From 06e9bc5fe71207f72bbc21ac1ce35af14757f0a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Mon, 22 Apr 2024 12:08:43 +0800 Subject: [PATCH 4/6] chore(accordion): lint --- packages/components/accordion/src/base/accordion-item-base.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/accordion/src/base/accordion-item-base.tsx b/packages/components/accordion/src/base/accordion-item-base.tsx index 4781343317..d97226fb38 100644 --- a/packages/components/accordion/src/base/accordion-item-base.tsx +++ b/packages/components/accordion/src/base/accordion-item-base.tsx @@ -25,6 +25,7 @@ export type AccordionItemIndicatorProps = { */ isDisabled?: boolean; }; + export interface Props extends Omit, "children" | "title" | keyof FocusableProps>, FocusableProps, @@ -85,7 +86,6 @@ export interface Props * ``` */ classNames?: SlotsToClasses; - /** * Customizable heading tag for Web accessibility: * use headings to describe content and use them consistently and semantically. From 1d69add123949ce716a1d976d569397851ecafe8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Sun, 5 May 2024 11:48:40 +0800 Subject: [PATCH 5/6] chore(changeset): add issue number --- .changeset/heavy-hairs-join.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/heavy-hairs-join.md b/.changeset/heavy-hairs-join.md index afea05a872..a706ffe55a 100644 --- a/.changeset/heavy-hairs-join.md +++ b/.changeset/heavy-hairs-join.md @@ -2,4 +2,4 @@ "@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. +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) From 72be5abc4f9ffcecd5f1c77661bbeb400c21044a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Sun, 5 May 2024 12:00:14 +0800 Subject: [PATCH 6/6] feat(docs): add HeadingComponent prop --- .../content/docs/components/accordion.mdx | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/apps/docs/content/docs/components/accordion.mdx b/apps/docs/content/docs/components/accordion.mdx index 0b95f6e804..587162d03c 100644 --- 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