fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

fix: update non-focus-trap Popover role to be group

Open smhigley opened this issue 3 years ago • 4 comments

Related to #21416

We do want to use a non-dialog role for the non-focus-trapping variant, but complementary isn't the best fit -- it refers specifically to content that is complementary to the main region, and on the same level as the main region in content hierarchy. That doesn't really apply to most popovers, so this PR updates it to the group role for the following reasons:

  • Popovers may be nested, and group in particular enables that
  • It's the lowest common accessible base role in that it is flexible in its use cases, and allows naming & exposes its bounds
  • It is extremely flexible in allowed content (both in a strict spec sense, and in a general user expectation sense)

Other roles that were considered:

  • note: it generally seems fine, but it would be weird to have nested notes, and it has a narrow range of expected use cases
  • region: this would add popovers to the landmark list. It seems too heavy for something that is probably going to be a small, transient addition to the page, but we could reconsider it based on user feedback. The benefit would be that it would be easier to find with a screen reader's virtual cursor.

smhigley avatar Sep 21 '22 19:09 smhigley

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
188.672 kB
52.359 kB
188.664 kB
52.353 kB
-8 B
-6 B
react-popover
Popover
102.963 kB
31.553 kB
102.955 kB
31.548 kB
-8 B
-5 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-alert
Alert
83.511 kB
20.921 kB
react-avatar
Avatar
48.381 kB
13.696 kB
react-avatar
AvatarGroup
14.95 kB
5.989 kB
react-avatar
AvatarGroupItem
68.349 kB
19.039 kB
react-components
react-components: FluentProvider & webLightTheme
33.394 kB
11.007 kB
react-portal-compat
PortalCompatProvider
5.851 kB
1.964 kB
🤖 This report was generated against 62aadfe9a8429fbc5c0660c1e741e5e8171f8f23

fabricteam avatar Sep 21 '22 19:09 fabricteam

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d4d8c58df499f39eb5b1bec77337c592ece2867a:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

codesandbox-ci[bot] avatar Sep 21 '22 20:09 codesandbox-ci[bot]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 62aadfe9a8429fbc5c0660c1e741e5e8171f8f23 (build)

size-auditor[bot] avatar Sep 21 '22 20:09 size-auditor[bot]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1584 1618 5000
Button mount 1179 1144 5000
FluentProvider mount 1912 1930 5000
FluentProviderWithTheme mount 767 760 10
FluentProviderWithTheme virtual-rerender 715 732 10
FluentProviderWithTheme virtual-rerender-with-unmount 766 769 10
MakeStyles mount 2323 2344 50000
SpinButton mount 3184 3085 5000

fabricteam avatar Sep 21 '22 20:09 fabricteam