fix: Use role=complementary for Popovers without focus traps

change/@fluentui-react-popover-ca31294d-f8a3-4d50-bb6d-0d42a16bd4e2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: Use role=complementary for Popovers without focus traps",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-popover/e2e/Popover.e2e.ts

@@ -1,5 +1,6 @@
 const popoverTriggerSelector = '[aria-haspopup]';
-const popoverContentSelector = '[role="dialog"]';
+const popoverContentSelector = '[role="complementary"]';
+const popoverInteractiveContentSelector = '[role="dialog"]';
 const popoverStoriesTitle = 'Components/Popover';
 
 const popoverDefaultStory = 'Default';
@@ -95,21 +96,21 @@ describe('Popover', () => {
     });
 
     it('should dismiss all nested popovers on outside click', () => {
-      cy.get('body').click('bottomRight').get(popoverContentSelector).should('not.exist');
+      cy.get('body').click('bottomRight').get(popoverInteractiveContentSelector).should('not.exist');
     });
 
     it('should not dismiss when clicking on nested content', () => {
-      cy.contains('Second nested button').click().get(popoverContentSelector).should('have.length', 3);
+      cy.contains('Second nested button').click().get(popoverInteractiveContentSelector).should('have.length', 3);
     });
 
     it('should dismiss child popovers when clicking on parents', () => {
       cy.contains('First nested button')
         .click()
-        .get(popoverContentSelector)
+        .get(popoverInteractiveContentSelector)
         .should('have.length', 2)
         .contains('Root button')
         .click()
-        .get(popoverContentSelector)
+        .get(popoverInteractiveContentSelector)
         .should('have.length', 1);
     });
 
@@ -119,22 +120,22 @@ describe('Popover', () => {
       cy.get(secondNestedTriggerSelector)
         .eq(1)
         .click()
-        .get(popoverContentSelector)
+        .get(popoverInteractiveContentSelector)
         .should('have.length', 3)
         .get(secondNestedTriggerSelector)
         .eq(0)
         .click()
-        .get(popoverContentSelector)
+        .get(popoverInteractiveContentSelector)
         .should('have.length', 3);
     });
 
     it('should dismiss each popover in the stack with Escape keydown', () => {
       cy.focused().realPress('Escape');
-      cy.get(popoverContentSelector).should('have.length', 2);
+      cy.get(popoverInteractiveContentSelector).should('have.length', 2);
       cy.focused().realPress('Escape');
-      cy.get(popoverContentSelector).should('have.length', 1);
+      cy.get(popoverInteractiveContentSelector).should('have.length', 1);
       cy.focused().realPress('Escape');
-      cy.get(popoverContentSelector).should('not.exist');
+      cy.get(popoverInteractiveContentSelector).should('not.exist');
     });
   });
 

packages/react-popover/src/components/PopoverSurface/PopoverSurface.test.tsx

@@ -70,4 +70,22 @@ describe('PopoverSurface', () => {
     // Assert
     expect(getByTestId(testid).getAttribute('aria-modal')).toEqual('true');
   });
+
+  it('should set role dialog if focus trap is active', () => {
+    // Arrange
+    mockPopoverContext({ open: true, trapFocus: true });
+    const { queryByRole } = render(<PopoverSurface data-testid={testid}>Content</PopoverSurface>);
+
+    // Assert
+    expect(queryByRole('dialog')).not.toBeNull();
+  });
+
+  it('should set role complementary if focus trap is not active', () => {
+    // Arrange
+    mockPopoverContext({ open: true, trapFocus: false });
+    const { getByTestId } = render(<PopoverSurface data-testid={testid}>Content</PopoverSurface>);
+
+    // Assert
+    expect(getByTestId(testid)).not.toBeNull();
+  });
 });

packages/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`PopoverSurface renders a default state 1`] = `
   class="fui-PopoverSurface"
   data-tabster="{\\"deloser\\":{},\\"modalizer\\":{\\"id\\":\\"modal-1\\",\\"isOthersAccessible\\":true}}"
   data-testid="component"
-  role="dialog"
+  role="complementary"
 >
   <div
     class=""

packages/react-popover/src/components/PopoverSurface/usePopoverSurface.ts

@@ -38,7 +38,7 @@ export const usePopoverSurface = (props: PopoverSurfaceProps, ref: React.Ref<HTM
     },
     root: getNativeElementProps('div', {
       ref: useMergedRefs(ref, contentRef),
-      role: 'dialog',
+      role: trapFocus ? 'dialog' : 'complementary',
       'aria-modal': trapFocus ? true : undefined,
       ...modalAttributes,
       ...props,