fix(chrome): prevent focus on closed Sheet (#1920)

Author: jzempel

packages/chrome/src/elements/sheet/Sheet.spec.tsx

@@ -52,11 +52,19 @@ describe('Sheet', () => {
     expect(getByRole('complementary')).toBe(ref.current);
   });
 
+  it('is inert when closed', () => {
+    const { getByRole } = render(<Example />);
+    const sheet = getByRole('complementary');
+
+    expect(sheet).toHaveAttribute('inert');
+  });
+
   it('contains a11y bindings to label and describe the sheet', () => {
     const { getByRole } = render(<Example isOpen />);
     const sheet = getByRole('complementary');
 
     expect(screen.getByLabelText('title')).toBe(sheet);
     expect(sheet).toHaveAccessibleDescription('description');
+    expect(sheet).not.toHaveAttribute('inert');
   });
 });

packages/chrome/src/elements/sheet/Sheet.tsx

@@ -51,6 +51,7 @@ const SheetComponent = React.forwardRef<HTMLElement, ISheetProps>(
     return (
       <SheetContext.Provider value={sheetContext}>
         <StyledSheet
+          inert={isOpen ? undefined : ''}
           isOpen={isOpen}
           isAnimated={isAnimated}
           placement={placement}

packages/chrome/src/styled/sheet/StyledSheet.ts

@@ -12,6 +12,7 @@ import { ISheetProps } from '../../types';
 const COMPONENT_ID = 'chrome.sheet';
 
 interface IStyledSheetProps {
+  inert?: string;
   placement?: ISheetProps['placement'];
   isOpen?: boolean;
   isAnimated?: boolean;