diff --git a/change/@fluentui-react-popover-66a51d32-93ef-481a-bef9-5595c8ef528a.json b/change/@fluentui-react-popover-66a51d32-93ef-481a-bef9-5595c8ef528a.json new file mode 100644 index 0000000000000..becff8e9e0e45 --- /dev/null +++ b/change/@fluentui-react-popover-66a51d32-93ef-481a-bef9-5595c8ef528a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: update popover role to be note when it does not trap focus", + "packageName": "@fluentui/react-popover", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-popover/Spec.md b/packages/react-components/react-popover/Spec.md index 0f8ba5c033719..0cb11f09fe205 100644 --- a/packages/react-components/react-popover/Spec.md +++ b/packages/react-components/react-popover/Spec.md @@ -348,7 +348,7 @@ Default popover // on document.body -
+
{/** content */}
``` @@ -499,7 +499,7 @@ Accessible markup is divided into two scenarios: ```tsx // Popover that does not trap focus -
+
No focus trap
diff --git a/packages/react-components/react-popover/e2e/Popover.e2e.tsx b/packages/react-components/react-popover/e2e/Popover.e2e.tsx index 8dd9ea1ca7879..9dd8978fd2604 100644 --- a/packages/react-components/react-popover/e2e/Popover.e2e.tsx +++ b/packages/react-components/react-popover/e2e/Popover.e2e.tsx @@ -11,7 +11,7 @@ const mount = (element: JSX.Element) => { }; const popoverTriggerSelector = '[aria-expanded]'; -const popoverContentSelector = '[role="complementary"]'; +const popoverContentSelector = '[role="group"]'; const popoverInteractiveContentSelector = '[role="dialog"]'; describe('Popover', () => { diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.test.tsx b/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.test.tsx index 28e20767799a2..173b22b1abd56 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.test.tsx +++ b/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.test.tsx @@ -72,7 +72,7 @@ describe('PopoverSurface', () => { expect(queryByRole('dialog')).not.toBeNull(); }); - it('should set role complementary if focus trap is not active', () => { + it('should set role group if focus trap is not active', () => { // Arrange mockPopoverContext({ trapFocus: false }); const { getByTestId } = render(Content); 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 63ddd15af2316..5bf2a8aeea392 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 @@ -6,7 +6,7 @@ exports[`PopoverSurface renders a default state 1`] = ` class="fui-PopoverSurface" data-tabster="{\\"deloser\\":{},\\"modalizer\\":{\\"id\\":\\"modal-1\\",\\"isOthersAccessible\\":true}}" data-testid="component" - role="complementary" + role="group" > Default PopoverSurface
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 8533cfb60b853..abf06c0b0dd0d 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts +++ b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts @@ -42,7 +42,7 @@ export const usePopoverSurface_unstable = ( }, root: getNativeElementProps('div', { ref: useMergedRefs(ref, contentRef), - role: trapFocus ? 'dialog' : 'complementary', + role: trapFocus ? 'dialog' : 'group', 'aria-modal': trapFocus ? true : undefined, ...modalAttributes, ...props,