microsoft
feat: Updates triggers to use `useARIAButton`
Current Behavior
Currently each trigger implementation has its own internal implementation of keydown handling that ensure <button> behavior on trigger.
New Behavior
Triggers will use useARIAButtonProps to ensure <button> behavior, since keydown is actually not enough.
- Updates
DialogTriggerto useuseARIAButtonProps - Updates
MenuTriggerto useuseARIAButtonProps - Updates
PopoverTriggerto useuseARIAButtonProps - Updates
useARIAButtonPropsinternal types to properly provide stricter types
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 11b697cd0fb6e78e2ce4dc9be1e0fd5cca1fceac:
| Sandbox | Source |
|---|---|
| @fluentui/react 8 starter | Configuration |
| @fluentui/react-components 9 starter | Configuration |
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
Asset size changes
Size Auditor did not detect a change in bundle size for any component!
Baseline commit: 0fa48e25fd9b173a8574c3ad3421979e627a145d (build)
![size-auditor[bot] avatar](https://avatars.githubusercontent.com/in/13711?v=4 "Published by a pub.dev verified publisher"){kind=small}
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
188.925 kB51.884 kB |
189.01 kB51.922 kB |
85 B 38 B |
| react-dialog Dialog (including children components) |
85.19 kB25.322 kB |
84.804 kB25.244 kB |
-386 B -78 B |
| react-menu Menu (including children components) |
114.927 kB35.102 kB |
115.941 kB35.393 kB |
1.014 kB 291 B |
| react-menu Menu (including selectable components) |
118.126 kB35.592 kB |
119.14 kB35.886 kB |
1.014 kB 294 B |
| react-popover Popover |
102.267 kB31.373 kB |
103.061 kB31.573 kB |
794 B 200 B |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| react-accordion Accordion (including children components) |
79.529 kB24.099 kB |
| react-alert Alert |
82.874 kB20.608 kB |
| react-avatar Avatar |
48.283 kB13.644 kB |
| react-avatar AvatarGroup |
15.068 kB6.016 kB |
| react-avatar AvatarGroupItem |
68.418 kB19.038 kB |
| react-button Button |
36.396 kB9.575 kB |
| react-button CompoundButton |
43.469 kB10.812 kB |
| react-button MenuButton |
39.014 kB10.456 kB |
| react-button SplitButton |
46.544 kB11.84 kB |
| react-button ToggleButton |
51.91 kB11.003 kB |
| react-card Card - All |
67.47 kB19.273 kB |
| react-card Card |
63.152 kB18.185 kB |
| react-card CardFooter |
8.461 kB3.555 kB |
| react-card CardHeader |
9.504 kB3.896 kB |
| react-card CardPreview |
8.562 kB3.61 kB |
| react-components react-components: FluentProvider & webLightTheme |
32.876 kB10.773 kB |
Perf Analysis (@fluentui/react-components)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 1485 | 1470 | 5000 | |
| Button | mount | 1130 | 1117 | 5000 | |
| FluentProvider | mount | 1882 | 1853 | 5000 | |
| FluentProviderWithTheme | mount | 741 | 754 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 694 | 698 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 741 | 729 | 10 | |
| MakeStyles | mount | 2230 | 2241 | 50000 | |
| SpinButton | mount | 2967 | 2956 | 5000 |