fix: update non-focus-trap Popover role to be group
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
groupin 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.
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
188.672 kB52.359 kB |
188.664 kB52.353 kB |
-8 B -6 B |
| react-popover Popover |
102.963 kB31.553 kB |
102.955 kB31.548 kB |
-8 B -5 B |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| react-alert Alert |
83.511 kB20.921 kB |
| react-avatar Avatar |
48.381 kB13.696 kB |
| react-avatar AvatarGroup |
14.95 kB5.989 kB |
| react-avatar AvatarGroupItem |
68.349 kB19.039 kB |
| react-components react-components: FluentProvider & webLightTheme |
33.394 kB11.007 kB |
| react-portal-compat PortalCompatProvider |
5.851 kB1.964 kB |
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 |
Asset size changes
Size Auditor did not detect a change in bundle size for any component!
Baseline commit: 62aadfe9a8429fbc5c0660c1e741e5e8171f8f23 (build)
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 |
