diff --git a/packages/accordions/src/elements/stepper/components/Content.spec.tsx b/packages/accordions/src/elements/stepper/components/Content.spec.tsx index ae5cb6cfbc3..49e97726351 100644 --- a/packages/accordions/src/elements/stepper/components/Content.spec.tsx +++ b/packages/accordions/src/elements/stepper/components/Content.spec.tsx @@ -58,8 +58,12 @@ describe('Content', () => { ); + const visibleElement = queryByText('Blueberry'); + const hiddenElement = queryByText('Strawberry'); - expect(queryByText('Blueberry')).toHaveAttribute('aria-hidden', 'false'); - expect(queryByText('Strawberry')).toHaveAttribute('aria-hidden', 'true'); + expect(visibleElement).toHaveAttribute('aria-hidden', 'false'); + expect(visibleElement).not.toHaveAttribute('inert'); + expect(hiddenElement).toHaveAttribute('aria-hidden', 'true'); + expect(hiddenElement).toHaveAttribute('inert'); }); }); diff --git a/packages/accordions/src/elements/stepper/components/Content.tsx b/packages/accordions/src/elements/stepper/components/Content.tsx index 0861b8a4778..81d2c41d390 100644 --- a/packages/accordions/src/elements/stepper/components/Content.tsx +++ b/packages/accordions/src/elements/stepper/components/Content.tsx @@ -16,7 +16,9 @@ const ContentComponent = forwardRef - {props.children} + + {props.children} + ) : null; } diff --git a/packages/accordions/src/styled/stepper/StyledInnerContent.ts b/packages/accordions/src/styled/stepper/StyledInnerContent.ts index 32be72326ef..1c9cf7c1f97 100644 --- a/packages/accordions/src/styled/stepper/StyledInnerContent.ts +++ b/packages/accordions/src/styled/stepper/StyledInnerContent.ts @@ -10,10 +10,14 @@ import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden const COMPONENT_ID = 'accordions.step_inner_content'; -export const StyledInnerContent = styled.div.attrs>({ +interface IStyledInnerContentProps extends ThemeProps { + inert?: string; +} + +export const StyledInnerContent = styled.div.attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION -})` +})` overflow: hidden; line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)}; color: ${({ theme }) => getColor({ theme, variable: 'foreground.default' })};