diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 9b07918ca2..d5857a3047 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -82,6 +82,10 @@ export type Props = Omit & { * Accessibility label for the button. This is read by the screen reader when the user taps the button. */ 'aria-label'?: string; + /** + * Indicates whether the element's controlled content is expanded. + */ + 'aria-expanded'?: boolean; /** * Accessibility hint for the button. This is read by the screen reader when the user taps the button. */ @@ -171,6 +175,7 @@ const Button = ({ textColor: customTextColor, children, 'aria-label': ariaLabel, + 'aria-expanded': ariaExpanded, accessibilityHint, role = 'button', hitSlop, @@ -328,6 +333,7 @@ const Button = ({ onPressOut={hasPassedTouchHandler ? handlePressOut : undefined} delayLongPress={delayLongPress} aria-label={ariaLabel} + aria-expanded={ariaExpanded} accessibilityHint={accessibilityHint} role={role} aria-disabled={disabled} diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx index 7ea496a419..6209d3e4e8 100644 --- a/src/components/__tests__/Button.test.tsx +++ b/src/components/__tests__/Button.test.tsx @@ -24,6 +24,22 @@ it('renders text button by default', async () => { expect(tree).toMatchSnapshot(); }); +it.each<[boolean, 'toBeExpanded' | 'toBeCollapsed']>([ + [true, 'toBeExpanded'], + [false, 'toBeCollapsed'], +])( + 'exposes aria-expanded=%s on the interactive button', + async (expanded, matcher) => { + await render( + + ); + + expect(screen.getByRole('button', { name: 'Show details' }))[matcher](); + } +); + it('renders text button with mode', async () => { const tree = ( await render()