Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: add axe accessibility testing #32977

Open
wants to merge 34 commits into
base: master
Choose a base branch
from

Conversation

marchbox
Copy link
Contributor

@marchbox marchbox commented Oct 3, 2024

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 on ElementInernals on the host element)
  • Fixed a few ARIA issues in Button, DialogBody, Drawer, Tab, and Tablist

Related Issue(s)

  • Fixes #

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 3, 2024

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

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 3, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 3, 2024

📊 Bundle size report

✅ No changes found

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 3, 2024

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

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 3, 2024

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

@marchbox marchbox self-assigned this Oct 4, 2024
@marchbox marchbox marked this pull request as ready for review October 7, 2024 21:08
@marchbox marchbox requested a review from a team as a code owner October 7, 2024 21:08
@marchbox marchbox requested a review from a team as a code owner October 7, 2024 21:08
@Hotell Hotell self-requested a review October 8, 2024 12:13
Copy link
Contributor

@Hotell Hotell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM for v-build owned files

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 15, 2024

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

3 participants