From cf1e510963be5505166994e83fca268c91329a59 Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Wed, 11 Sep 2024 12:07:05 -0400
Subject: [PATCH 1/2] fix(chrome): prevent focus on closed `Sheet`

---
 packages/chrome/src/elements/sheet/Sheet.tsx    | 1 +
 packages/chrome/src/styled/sheet/StyledSheet.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/chrome/src/elements/sheet/Sheet.tsx b/packages/chrome/src/elements/sheet/Sheet.tsx
index 5d2b1ee790c..a560700b4aa 100644
--- a/packages/chrome/src/elements/sheet/Sheet.tsx
+++ b/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}
diff --git a/packages/chrome/src/styled/sheet/StyledSheet.ts b/packages/chrome/src/styled/sheet/StyledSheet.ts
index 4984df8f5d9..980f92fdef2 100644
--- a/packages/chrome/src/styled/sheet/StyledSheet.ts
+++ b/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;

From ac8f904e13a0294a69f9e37bc107eba9abbc55cf Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Wed, 11 Sep 2024 12:10:22 -0400
Subject: [PATCH 2/2] Add inert testing

---
 packages/chrome/src/elements/sheet/Sheet.spec.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/chrome/src/elements/sheet/Sheet.spec.tsx b/packages/chrome/src/elements/sheet/Sheet.spec.tsx
index 4837c521f25..5055d2e2b45 100644
--- a/packages/chrome/src/elements/sheet/Sheet.spec.tsx
+++ b/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');
   });
 });