diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx index 1607d0de06c..4eb9c2e333f 100644 --- a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx +++ b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx @@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles'; import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import { PickOptional } from '../../helpers/typeUtils'; -import { debounce } from '../../helpers/util'; +import { debounce, getUniqueId } from '../../helpers/util'; import { getResizeObserver } from '../../helpers/resizeObserver'; export enum ExpandableSectionVariant { @@ -23,6 +23,12 @@ export interface ExpandableSectionProps extends React.HTMLProps * property's value should match the contenId property of the expandable section toggle sub-component. */ contentId?: string; + /** Id of the toggle of the expandable section, which provides an accessible name to the + * expandable section content via the aria-labelledby attribute. When the isDetached property + * is also passed in, the value of this property must match the toggleId property of the + * expandable section toggle sub-component. + */ + toggleId?: string; /** Display size variant. Set to "lg" for disclosure styling. */ displaySize?: 'default' | 'lg'; /** Forces active state. */ @@ -102,7 +108,6 @@ export class ExpandableSection extends React.Component onToggle(event, !propOrStateIsExpanded)} > {variant !== ExpandableSectionVariant.truncate && ( @@ -250,7 +268,9 @@ export class ExpandableSection extends React.Component