diff --git a/change/@fluentui-react-popover-a88a6d1a-e63c-4c03-8d58-35b1065c4396.json b/change/@fluentui-react-popover-a88a6d1a-e63c-4c03-8d58-35b1065c4396.json new file mode 100644 index 0000000000000..beff494b64b0b --- /dev/null +++ b/change/@fluentui-react-popover-a88a6d1a-e63c-4c03-8d58-35b1065c4396.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: don't apply modalizer attributes when focus trap isn't configured", + "packageName": "@fluentui/react-popover", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tabster-74dae66a-2abe-42d2-87f7-515c21ea4a3e.json b/change/@fluentui-react-tabster-74dae66a-2abe-42d2-87f7-515c21ea4a3e.json new file mode 100644 index 0000000000000..37d9c875a9f9e --- /dev/null +++ b/change/@fluentui-react-tabster-74dae66a-2abe-42d2-87f7-515c21ea4a3e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: don't apply modalizer attributes when focus trap isn't configured", + "packageName": "@fluentui/react-tabster", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-popover/src/components/Popover/Popover.cy.tsx b/packages/react-components/react-popover/src/components/Popover/Popover.cy.tsx index 4069d2bc9e2a7..4095204f8ba51 100644 --- a/packages/react-components/react-popover/src/components/Popover/Popover.cy.tsx +++ b/packages/react-components/react-popover/src/components/Popover/Popover.cy.tsx @@ -541,4 +541,31 @@ describe('Popover', () => { .should('have.length', 2); }); }); + + describe('Without trapFocus', () => { + it('should restore focus on close', () => { + mount( + + + + + + + + , + ); + + cy.get('#trigger') + .click() + .get(popoverContentSelector) + .should('exist') + .get('#button') + .focus() + .type('{esc}') + .get(popoverContentSelector) + .should('not.exist') + .get('#trigger') + .should('have.focus'); + }); + }); }); diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap b/packages/react-components/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap index 3bb7e10437395..d1661f0f1f593 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap +++ b/packages/react-components/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap @@ -4,6 +4,7 @@ exports[`PopoverSurface renders a default state 1`] = `
diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts index ac0731e22d114..690121577c0f8 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts +++ b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts @@ -49,7 +49,7 @@ export const usePopoverSurface_unstable = ( ref: useMergedRefs(ref, contentRef), role: trapFocus ? 'dialog' : 'group', 'aria-modal': trapFocus ? true : undefined, - ...(trapFocus ? modalAttributes : {}), + ...modalAttributes, ...props, }), { elementType: 'div' }, diff --git a/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts b/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts index c4734b164d516..fc8cb2ec518b8 100644 --- a/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts +++ b/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts @@ -52,12 +52,14 @@ export const useModalAttributes = ( const id = useId('modal-', options.id); const modalAttributes = useTabsterAttributes({ restorer: { type: TabsterTypes.RestorerTypes.Source }, - modalizer: { - id, - isOthersAccessible: !trapFocus, - isAlwaysAccessible: alwaysFocusable, - isTrapped: legacyTrapFocus && trapFocus, - }, + ...(trapFocus && { + modalizer: { + id, + isOthersAccessible: !trapFocus, + isAlwaysAccessible: alwaysFocusable, + isTrapped: legacyTrapFocus && trapFocus, + }, + }), }); const triggerAttributes = useTabsterAttributes({