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" +} 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..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(true); + 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 d352a2df7d6be3..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: true }), + ...((open ? {} : { tabIndex: -1, inert: 'true' }) as React.HTMLAttributes), }, { elementType: 'div' }, ),