fluentui
fluentui copied to clipboard
test: add axe accessibility testing
Previous Behavior
No automated accessibility testing.
New Behavior
- added tests for components to make sure there's no auto-detectable accessibility issues
- added a helper function to help Axe work better with
ElementInternals(by exposing ARIA properties defined onElementInernalson the host element) - Fixed a few ARIA issues in Button, DialogBody, Drawer, Tab, and Tablist
Related Issue(s)
- Fixes #
Perf Analysis (@fluentui/react-components)
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| FluentProviderWithTheme | virtual-rerender | 39 | 38 | 10 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 614 | 633 | 5000 | |
| Button | mount | 293 | 298 | 5000 | |
| Field | mount | 1139 | 1143 | 5000 | |
| FluentProvider | mount | 737 | 725 | 5000 | |
| FluentProviderWithTheme | mount | 91 | 93 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 39 | 38 | 10 | Possible regression |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 88 | 85 | 10 | |
| MakeStyles | mount | 879 | 875 | 50000 | |
| Persona | mount | 1754 | 1705 | 5000 | |
| SpinButton | mount | 1404 | 1385 | 5000 | |
| SwatchPicker | mount | 1660 | 1669 | 5000 |
🕵 FluentUIV0 No visual regressions between this PR and main
📊 Bundle size report
✅ No changes found
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| ButtonMinimalPerf.default | 95 | 83 | 1.14:1 |
| ChatWithPopoverPerf.default | 217 | 194 | 1.12:1 |
| FlexMinimalPerf.default | 161 | 146 | 1.1:1 |
| FormMinimalPerf.default | 227 | 208 | 1.09:1 |
| ListMinimalPerf.default | 321 | 296 | 1.08:1 |
| RefMinimalPerf.default | 116 | 107 | 1.08:1 |
| TextAreaMinimalPerf.default | 303 | 281 | 1.08:1 |
| CarouselMinimalPerf.default | 271 | 254 | 1.07:1 |
| MenuMinimalPerf.default | 536 | 503 | 1.07:1 |
| TextMinimalPerf.default | 198 | 185 | 1.07:1 |
| TooltipMinimalPerf.default | 1309 | 1222 | 1.07:1 |
| AttachmentMinimalPerf.default | 87 | 82 | 1.06:1 |
| CardMinimalPerf.default | 315 | 298 | 1.06:1 |
| LoaderMinimalPerf.default | 198 | 186 | 1.06:1 |
| AnimationMinimalPerf.default | 313 | 297 | 1.05:1 |
| ButtonSlotsPerf.default | 323 | 307 | 1.05:1 |
| ChatMinimalPerf.default | 449 | 428 | 1.05:1 |
| CheckboxMinimalPerf.default | 1174 | 1114 | 1.05:1 |
| MenuButtonMinimalPerf.default | 966 | 930 | 1.04:1 |
| SegmentMinimalPerf.default | 200 | 192 | 1.04:1 |
| AvatarMinimalPerf.default | 113 | 110 | 1.03:1 |
| ChatDuplicateMessagesPerf.default | 153 | 148 | 1.03:1 |
| HeaderMinimalPerf.default | 208 | 202 | 1.03:1 |
| ItemLayoutMinimalPerf.default | 711 | 692 | 1.03:1 |
| SkeletonMinimalPerf.default | 203 | 197 | 1.03:1 |
| TreeMinimalPerf.default | 477 | 463 | 1.03:1 |
| AttachmentSlotsPerf.default | 643 | 630 | 1.02:1 |
| DialogMinimalPerf.default | 446 | 439 | 1.02:1 |
| DropdownMinimalPerf.default | 1417 | 1384 | 1.02:1 |
| GridMinimalPerf.default | 191 | 187 | 1.02:1 |
| LabelMinimalPerf.default | 220 | 215 | 1.02:1 |
| ListCommonPerf.default | 388 | 382 | 1.02:1 |
| PopupMinimalPerf.default | 355 | 349 | 1.02:1 |
| ReactionMinimalPerf.default | 208 | 204 | 1.02:1 |
| SliderMinimalPerf.default | 751 | 739 | 1.02:1 |
| StatusMinimalPerf.default | 409 | 402 | 1.02:1 |
| VideoMinimalPerf.default | 432 | 424 | 1.02:1 |
| DatepickerMinimalPerf.default | 3507 | 3484 | 1.01:1 |
| HeaderSlotsPerf.default | 457 | 454 | 1.01:1 |
| RosterPerf.default | 1578 | 1555 | 1.01:1 |
| ButtonOverridesMissPerf.default | 649 | 648 | 1:1 |
| EmbedMinimalPerf.default | 1911 | 1909 | 1:1 |
| PortalMinimalPerf.default | 88 | 88 | 1:1 |
| RadioGroupMinimalPerf.default | 260 | 260 | 1:1 |
| TableManyItemsPerf.default | 1091 | 1090 | 1:1 |
| AlertMinimalPerf.default | 157 | 159 | 0.99:1 |
| DividerMinimalPerf.default | 202 | 205 | 0.99:1 |
| DropdownManyItemsPerf.default | 394 | 397 | 0.99:1 |
| ProviderMinimalPerf.default | 199 | 202 | 0.99:1 |
| SplitButtonMinimalPerf.default | 2227 | 2246 | 0.99:1 |
| ListWith60ListItems.default | 361 | 367 | 0.98:1 |
| ProviderMergeThemesPerf.default | 640 | 654 | 0.98:1 |
| CustomToolbarPrototype.default | 1460 | 1487 | 0.98:1 |
| ToolbarMinimalPerf.default | 543 | 554 | 0.98:1 |
| BoxMinimalPerf.default | 196 | 202 | 0.97:1 |
| LayoutMinimalPerf.default | 199 | 205 | 0.97:1 |
| TableMinimalPerf.default | 232 | 238 | 0.97:1 |
| AccordionMinimalPerf.default | 84 | 88 | 0.95:1 |
| TreeWith60ListItems.default | 83 | 87 | 0.95:1 |
| ImageMinimalPerf.default | 212 | 225 | 0.94:1 |
| InputMinimalPerf.default | 531 | 566 | 0.94:1 |
| ListNestedPerf.default | 326 | 346 | 0.94:1 |
| IconMinimalPerf.default | 350 | 378 | 0.93:1 |
Perf Analysis (@fluentui/react)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 645 | 633 | 5000 | |
| Breadcrumb | mount | 1701 | 1689 | 1000 | |
| Checkbox | mount | 1756 | 1738 | 5000 | |
| CheckboxBase | mount | 1487 | 1521 | 5000 | |
| ChoiceGroup | mount | 2986 | 2936 | 5000 | |
| ComboBox | mount | 665 | 707 | 1000 | |
| CommandBar | mount | 6629 | 6611 | 1000 | |
| ContextualMenu | mount | 14137 | 13531 | 1000 | |
| DefaultButton | mount | 793 | 834 | 5000 | |
| DetailsRow | mount | 2277 | 2209 | 5000 | |
| DetailsRowFast | mount | 2280 | 2288 | 5000 | |
| DetailsRowNoStyles | mount | 2123 | 2091 | 5000 | |
| Dialog | mount | 2754 | 2761 | 1000 | |
| DocumentCardTitle | mount | 238 | 225 | 1000 | |
| Dropdown | mount | 2065 | 2004 | 5000 | |
| FocusTrapZone | mount | 1169 | 1200 | 5000 | |
| FocusZone | mount | 1085 | 1097 | 5000 | |
| GroupedList | mount | 43336 | 43382 | 2 | |
| GroupedList | virtual-rerender | 20631 | 20674 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 52277 | 52502 | 2 | |
| GroupedListV2 | mount | 233 | 229 | 2 | |
| GroupedListV2 | virtual-rerender | 213 | 221 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 243 | 244 | 2 | |
| IconButton | mount | 1153 | 1136 | 5000 | |
| Label | mount | 359 | 347 | 5000 | |
| Layer | mount | 2785 | 2784 | 5000 | |
| Link | mount | 425 | 403 | 5000 | |
| MenuButton | mount | 1027 | 1012 | 5000 | |
| MessageBar | mount | 21394 | 21268 | 5000 | |
| Nav | mount | 2098 | 2074 | 1000 | |
| OverflowSet | mount | 795 | 797 | 5000 | |
| Panel | mount | 1847 | 1890 | 1000 | |
| Persona | mount | 750 | 751 | 1000 | |
| Pivot | mount | 924 | 926 | 1000 | |
| PrimaryButton | mount | 932 | 944 | 5000 | |
| Rating | mount | 4732 | 4781 | 5000 | |
| SearchBox | mount | 959 | 940 | 5000 | |
| Shimmer | mount | 1998 | 1930 | 5000 | |
| Slider | mount | 1361 | 1368 | 5000 | |
| SpinButton | mount | 2995 | 3007 | 5000 | |
| Spinner | mount | 408 | 398 | 5000 | |
| SplitButton | mount | 1881 | 1890 | 5000 | |
| Stack | mount | 428 | 435 | 5000 | |
| StackWithIntrinsicChildren | mount | 891 | 876 | 5000 | |
| StackWithTextChildren | mount | 2811 | 2782 | 5000 | |
| SwatchColorPicker | mount | 6422 | 6514 | 5000 | |
| TagPicker | mount | 1456 | 1513 | 5000 | |
| Text | mount | 396 | 388 | 5000 | |
| TextField | mount | 974 | 972 | 5000 | |
| ThemeProvider | mount | 890 | 869 | 5000 | |
| ThemeProvider | virtual-rerender | 601 | 605 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1325 | 1313 | 5000 | |
| Toggle | mount | 622 | 612 | 5000 | |
| buttonNative | mount | 199 | 192 | 5000 |