From e6023b5fcc0f940ac9e76413286d1cfef47f32da Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 28 Apr 2026 20:13:50 +0000 Subject: [PATCH 1/6] Initial plan From 99b9864a045535d1bd25885267ab99aa9ef14b2f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 28 Apr 2026 20:16:42 +0000 Subject: [PATCH 2/6] fix: set inert attribute as empty string instead of boolean on AccordionPanel Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/8efa377d-77f3-42ec-a9b4-f6192d31b226 Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com> --- .../src/components/AccordionPanel/AccordionPanel.test.tsx | 2 +- .../library/src/components/AccordionPanel/useAccordionPanel.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx b/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx index 9907f0538b6933..4481d2e60d5c55 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx +++ b/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx @@ -38,7 +38,7 @@ describe('AccordionPanel', () => { {children} ); const { result } = renderHook(() => useAccordionPanelBase_unstable({}, ref), { wrapper }); - expect(result.current.root.inert).toBe(true); + expect(result.current.root.inert).toBe(''); expect(result.current.root.tabIndex).toBe(-1); }); diff --git a/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts b/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts index d352a2df7d6be3..655ca8bcb2a52f 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts +++ b/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts @@ -73,7 +73,7 @@ export const useAccordionPanelBase_unstable = ( // 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 }), + ...(open ? {} : { tabIndex: -1, inert: '' }), }, { elementType: 'div' }, ), From f7a41a0152b65565df5b718c88fd6ec148fe8f04 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 29 Apr 2026 05:35:49 +0000 Subject: [PATCH 3/6] chore: add beachball change file for react-accordion inert fix Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/2a74c102-f6e8-41d2-9194-7f054cdf91e8 Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com> --- ...act-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json diff --git a/change/@fluentui-react-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json b/change/@fluentui-react-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json new file mode 100644 index 00000000000000..4ada44a1289295 --- /dev/null +++ b/change/@fluentui-react-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: use empty string for inert attribute instead of boolean in AccordionPanel to prevent React DOM warning", + "packageName": "@fluentui/react-accordion", + "email": "198982749+Copilot@users.noreply.github.com", + "dependentChangeType": "patch" +} From 783c7b94ff7cd375715b055ce6f6df6267cba065 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 29 Apr 2026 17:39:31 +0000 Subject: [PATCH 4/6] fix(react-accordion): use aria-hidden instead of inert attribute on AccordionPanel when closed Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/a189f5ea-ede2-4409-8997-58bfb92e907f Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com> --- ...ct-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json | 2 +- .../src/components/AccordionPanel/AccordionPanel.test.tsx | 8 ++++---- .../src/components/AccordionPanel/useAccordionPanel.ts | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/change/@fluentui-react-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json b/change/@fluentui-react-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json index 4ada44a1289295..1f13c61fb6d8ae 100644 --- a/change/@fluentui-react-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json +++ b/change/@fluentui-react-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "fix: use empty string for inert attribute instead of boolean in AccordionPanel to prevent React DOM warning", + "comment": "fix: use aria-hidden instead of inert attribute on AccordionPanel when closed", "packageName": "@fluentui/react-accordion", "email": "198982749+Copilot@users.noreply.github.com", "dependentChangeType": "patch" diff --git a/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx b/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx index 4481d2e60d5c55..150a48d774d2d5 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx +++ b/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx @@ -32,23 +32,23 @@ describe('AccordionPanel', () => { expect(container).toMatchSnapshot(); }); - it('sets inert and tabIndex -1 on root when closed to prevent keyboard focus entering the panel', () => { + it('sets aria-hidden and tabIndex -1 on root when closed to prevent keyboard focus entering the panel', () => { const ref = React.createRef(); const wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => ( {children} ); const { result } = renderHook(() => useAccordionPanelBase_unstable({}, ref), { wrapper }); - expect(result.current.root.inert).toBe(''); + expect(result.current.root['aria-hidden']).toBe(true); expect(result.current.root.tabIndex).toBe(-1); }); - it('does not set inert or tabIndex -1 on root when open', () => { + it('does not set aria-hidden or tabIndex -1 on root when open', () => { const ref = React.createRef(); const wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => ( {children} ); const { result } = renderHook(() => useAccordionPanelBase_unstable({}, ref), { wrapper }); - expect(result.current.root.inert).toBeUndefined(); + expect(result.current.root['aria-hidden']).toBeUndefined(); expect(result.current.root.tabIndex).toBeUndefined(); }); }); diff --git a/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts b/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts index 655ca8bcb2a52f..8a0021472ec726 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts +++ b/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts @@ -71,9 +71,9 @@ export const useAccordionPanelBase_unstable = ( ref: ref as React.Ref, ...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: '' }), + // tabIndex: -1 prevents the panel itself from being focused, and aria-hidden + // hides the panel and its descendants from assistive technologies. + ...(open ? {} : { tabIndex: -1, 'aria-hidden': true }), }, { elementType: 'div' }, ), From a93a99980e0a1da6a1deb996f5ce1bf9029f08af Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 29 Apr 2026 19:26:27 +0000 Subject: [PATCH 5/6] fix(react-accordion): use inert with type cast instead of aria-hidden on closed AccordionPanel Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/16951f74-723b-4a57-b75a-6fbdc66a4601 Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com> --- ...ct-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json | 2 +- .../src/components/AccordionPanel/AccordionPanel.test.tsx | 8 ++++---- .../src/components/AccordionPanel/useAccordionPanel.ts | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/change/@fluentui-react-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json b/change/@fluentui-react-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json index 1f13c61fb6d8ae..4ada44a1289295 100644 --- a/change/@fluentui-react-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json +++ b/change/@fluentui-react-accordion-447fffcd-1e24-4145-babe-49abf6bc1134.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "fix: use aria-hidden instead of inert attribute on AccordionPanel when closed", + "comment": "fix: use empty string for inert attribute instead of boolean in AccordionPanel to prevent React DOM warning", "packageName": "@fluentui/react-accordion", "email": "198982749+Copilot@users.noreply.github.com", "dependentChangeType": "patch" diff --git a/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx b/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx index 150a48d774d2d5..4481d2e60d5c55 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx +++ b/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx @@ -32,23 +32,23 @@ describe('AccordionPanel', () => { expect(container).toMatchSnapshot(); }); - it('sets aria-hidden and tabIndex -1 on root when closed to prevent keyboard focus entering the panel', () => { + it('sets inert and tabIndex -1 on root when closed to prevent keyboard focus entering the panel', () => { const ref = React.createRef(); const wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => ( {children} ); const { result } = renderHook(() => useAccordionPanelBase_unstable({}, ref), { wrapper }); - expect(result.current.root['aria-hidden']).toBe(true); + expect(result.current.root.inert).toBe(''); expect(result.current.root.tabIndex).toBe(-1); }); - it('does not set aria-hidden or tabIndex -1 on root when open', () => { + it('does not set inert or tabIndex -1 on root when open', () => { const ref = React.createRef(); const wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => ( {children} ); const { result } = renderHook(() => useAccordionPanelBase_unstable({}, ref), { wrapper }); - expect(result.current.root['aria-hidden']).toBeUndefined(); + expect(result.current.root.inert).toBeUndefined(); expect(result.current.root.tabIndex).toBeUndefined(); }); }); diff --git a/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts b/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts index 8a0021472ec726..b15533377d70a8 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts +++ b/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts @@ -71,9 +71,9 @@ export const useAccordionPanelBase_unstable = ( ref: ref as React.Ref, ...props, // Prevent keyboard focus from entering the panel while it is closed/collapsing. - // tabIndex: -1 prevents the panel itself from being focused, and aria-hidden - // hides the panel and its descendants from assistive technologies. - ...(open ? {} : { tabIndex: -1, 'aria-hidden': true }), + // 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: '' }) as React.HTMLAttributes), }, { elementType: 'div' }, ), From 965543ca4afd68466500f80f2ed04d0afd069d9e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 30 Apr 2026 08:35:39 +0000 Subject: [PATCH 6/6] fix(react-accordion): use inert='true' string to avoid React 19 warning Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/1f2aa75f-22d0-4d34-86bc-470e17a106f9 Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com> --- .../src/components/AccordionPanel/AccordionPanel.test.tsx | 2 +- .../library/src/components/AccordionPanel/useAccordionPanel.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx b/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx index 4481d2e60d5c55..2bb99caeca159f 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx +++ b/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx @@ -38,7 +38,7 @@ describe('AccordionPanel', () => { {children} ); const { result } = renderHook(() => useAccordionPanelBase_unstable({}, ref), { wrapper }); - expect(result.current.root.inert).toBe(''); + expect(result.current.root.inert).toBe('true'); expect(result.current.root.tabIndex).toBe(-1); }); diff --git a/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts b/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts index b15533377d70a8..a456bc1160ed5f 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts +++ b/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts @@ -73,7 +73,7 @@ export const useAccordionPanelBase_unstable = ( // 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: '' }) as React.HTMLAttributes), + ...((open ? {} : { tabIndex: -1, inert: 'true' }) as React.HTMLAttributes), }, { elementType: 'div' }, ),