From e4be6f4223ad17dc542438754e8659ffee1619d0 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 21 Sep 2022 10:59:25 -0700 Subject: [PATCH 1/3] fix: update popover role to be note when it does not trap focus --- packages/react-components/react-popover/Spec.md | 4 ++-- packages/react-components/react-popover/e2e/Popover.e2e.tsx | 2 +- .../src/components/PopoverSurface/PopoverSurface.test.tsx | 2 +- .../PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap | 2 +- .../src/components/PopoverSurface/usePopoverSurface.ts | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-components/react-popover/Spec.md b/packages/react-components/react-popover/Spec.md index 0f8ba5c033719..2539d7e4a0ae7 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..2b7766357b310 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="note"]'; 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..a5b0f2b9fd074 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 note 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..4ad73770ebce1 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="note" > 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..fa62e8177abe0 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' : 'note', 'aria-modal': trapFocus ? true : undefined, ...modalAttributes, ...props, From fb689ea0ff3425d9159bcaf95ec33b0111527627 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 21 Sep 2022 11:00:12 -0700 Subject: [PATCH 2/3] change file --- ...react-popover-66a51d32-93ef-481a-bef9-5595c8ef528a.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-popover-66a51d32-93ef-481a-bef9-5595c8ef528a.json 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" +} From d4d8c58df499f39eb5b1bec77337c592ece2867a Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 21 Sep 2022 13:46:20 -0700 Subject: [PATCH 3/3] use group role --- packages/react-components/react-popover/Spec.md | 4 ++-- packages/react-components/react-popover/e2e/Popover.e2e.tsx | 2 +- .../src/components/PopoverSurface/PopoverSurface.test.tsx | 2 +- .../PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap | 2 +- .../src/components/PopoverSurface/usePopoverSurface.ts | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-components/react-popover/Spec.md b/packages/react-components/react-popover/Spec.md index 2539d7e4a0ae7..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 2b7766357b310..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="note"]'; +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 a5b0f2b9fd074..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 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(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 4ad73770ebce1..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="note" + 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 fa62e8177abe0..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' : 'note', + role: trapFocus ? 'dialog' : 'group', 'aria-modal': trapFocus ? true : undefined, ...modalAttributes, ...props,