fix(accordions): set inert for hidden Stepper content (#1982)

Author: jzempel

packages/accordions/src/elements/stepper/components/Content.spec.tsx

@@ -58,8 +58,12 @@ describe('Content', () => {
         </Stepper.Step>
       </Stepper>
     );
+    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');
   });
 });

packages/accordions/src/elements/stepper/components/Content.tsx

@@ -16,7 +16,9 @@ const ContentComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElemen
 
     return isHorizontal === false ? (
       <StyledContent ref={ref} $isActive={isActive} {...props}>
-        <StyledInnerContent aria-hidden={!isActive}>{props.children}</StyledInnerContent>
+        <StyledInnerContent aria-hidden={!isActive} inert={isActive ? undefined : ''}>
+          {props.children}
+        </StyledInnerContent>
       </StyledContent>
     ) : null;
   }

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<ThemeProps<DefaultTheme>>({
+interface IStyledInnerContentProps extends ThemeProps<DefaultTheme> {
+  inert?: string;
+}
+
+export const StyledInnerContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})`
+})<IStyledInnerContentProps>`
   overflow: hidden;
   line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
   color: ${({ theme }) => getColor({ theme, variable: 'foreground.default' })};