fix(react-accordion): prevent keyboard focus from entering a collapsing panel (#35960)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com>

Author: Copilot

change/@fluentui-react-accordion-d0e5a4ef-74c7-4b06-9982-5f9616ec3404.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: prevent keyboard focus from entering a collapsing panel",
+  "packageName": "@fluentui/react-accordion",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import { AccordionPanel } from './AccordionPanel';
 import { isConformant } from '../../testing/isConformant';
 import { AccordionItemProvider } from '../../contexts/accordionItem';
 import { mockAccordionItemContextValue } from '../../testing/mockContextValue';
+import { useAccordionPanelBase_unstable } from './useAccordionPanel';
 
 describe('AccordionPanel', () => {
   const Wrapper: React.FC<{ children?: React.ReactNode }> = props => (
@@ -29,4 +31,24 @@ describe('AccordionPanel', () => {
     const { container } = render(<AccordionPanel>Default AccordionPanel</AccordionPanel>);
     expect(container).toMatchSnapshot();
   });
+
+  it('sets inert and tabIndex -1 on root when closed to prevent keyboard focus entering the panel', () => {
+    const ref = React.createRef<HTMLElement>();
+    const wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+      <AccordionItemProvider value={mockAccordionItemContextValue({ open: false })}>{children}</AccordionItemProvider>
+    );
+    const { result } = renderHook(() => useAccordionPanelBase_unstable({}, ref), { wrapper });
+    expect(result.current.root.inert).toBe(true);
+    expect(result.current.root.tabIndex).toBe(-1);
+  });
+
+  it('does not set inert or tabIndex -1 on root when open', () => {
+    const ref = React.createRef<HTMLElement>();
+    const wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+      <AccordionItemProvider value={mockAccordionItemContextValue({ open: true })}>{children}</AccordionItemProvider>
+    );
+    const { result } = renderHook(() => useAccordionPanelBase_unstable({}, ref), { wrapper });
+    expect(result.current.root.inert).toBeUndefined();
+    expect(result.current.root.tabIndex).toBeUndefined();
+  });
 });

packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts

@@ -70,6 +70,10 @@ export const useAccordionPanelBase_unstable = (
       {
         ref: ref as React.Ref<HTMLDivElement>,
         ...props,
+        // Prevent keyboard focus from entering the panel while it is closed/collapsing.
+        // tabIndex: -1 prevents the panel itself from being focused, and inert prevents
+        // all focusable descendants from being reachable via keyboard navigation.
+        ...(open ? {} : { tabIndex: -1, inert: true }),
       },
       { elementType: 'div' },
     ),