fix: update non-focus-trap Popover role to be group (microsoft#24897)

NotWoods · Nov 18, 2022 · 177675f · 177675f
1 parent a64be78
commit 177675f
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 6 deletions.
diff --git a/change/@fluentui-react-popover-66a51d32-93ef-481a-bef9-5595c8ef528a.json 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
@@ -348,7 +348,7 @@ Default popover
 </div>
 
 // on document.body
-<div role="complementary">
+<div role="group">
  {/** content */}
 </div>
 ```
@@ -499,7 +499,7 @@ Accessible markup is divided into two scenarios:
 ```tsx
 // Popover that does not trap focus
 <button aria-expanded="false">Trigger</button>
-<div role="complementary">
+<div role="group">
  No focus trap
 </div>
 

diff --git 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/...ages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.test.tsx b/...ages/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(<PopoverSurface {...props}>Content</PopoverSurface>);

diff --git a/...ts/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap b/...ts/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
 </div>

diff --git 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,