fix: Set aria-modal on Popover if focus trap is enabled (#21387)

* fix: Set `aria-modal` on Popover if focus trap is enabled

* Change files

* do not use aria-modal=false

* add test

change/@fluentui-react-popover-3a0c4933-511e-46f3-bf8f-5fcdda876462.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: Set `aria-modal` on Popover if focus trap is enabled",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

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

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

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