use group role

microsoft · Sep 21, 2022 · d4d8c58 · d4d8c58
1 parent fb689ea
commit d4d8c58
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 6 deletions.
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="note">
+<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="note">
+<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="note"]';
+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 note 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="note"
+  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' : 'note',
+      role: trapFocus ? 'dialog' : 'group',
       'aria-modal': trapFocus ? true : undefined,
       ...modalAttributes,
       ...props,