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.

Sign up for GitHub

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

Jump to bottom

VirtualizedComboBox: ARIA attributes now have valid values after passing id and arialabelledby attributes to List component #17455

Merged
merged 2 commits into from
Mar 29, 2021
Merged

VirtualizedComboBox: ARIA attributes now have valid values after passing id and arialabelledby attributes to List component #17455

merged 2 commits into from
Mar 29, 2021

Conversation

TristanWatanabe
Copy link
Member

@TristanWatanabe TristanWatanabe commented Mar 16, 2021 •
edited

Pull request checklist

  • Addresses an existing issue: Fixes bug 10688
  • Include a change request file using $ yarn change

Description of changes

  • VirtualizedComboBox uses the List component to render the ComboBox options and the container div of List was missing the id and aria-labelledby attributes.
  • Those attributes have now been added to List via prop passing.

Errors Resolved:
Combobox

@codesandbox-ci
Copy link

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 e07788e:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@size-auditor
Copy link

size-auditor bot commented Mar 16, 2021 •
edited

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-northstar-Pill 94.479 kB 94.574 kB ExceedsBaseline     95 bytes
office-ui-fabric-react fluentui-react-ComboBox 228.53 kB 228.597 kB ExceedsBaseline     67 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: d781a4c0aff6940dbedb1edb4f6a06e40cb97003 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 16, 2021 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 941 932 5000
BaseButton mount 915 926 5000
Breadcrumb mount 44396 43230 5000
ButtonNext mount 533 542 5000
Checkbox mount 1602 1587 5000
CheckboxBase mount 1318 1277 5000
ChoiceGroup mount 4800 4852 5000
ComboBox mount 982 1020 1000
CommandBar mount 10455 10385 1000
ContextualMenu mount 6388 6451 1000
DefaultButton mount 1133 1164 5000
DetailsRow mount 3723 3753 5000
DetailsRowFast mount 3721 3756 5000
DetailsRowNoStyles mount 3502 3503 5000
Dialog mount 1493 1429 1000
DocumentCardTitle mount 1844 1940 1000
Dropdown mount 3339 3641 5000
FocusTrapZone mount 1853 1802 5000
FocusZone mount 1906 1899 5000
IconButton mount 1732 1741 5000
Label mount 351 345 5000
Layer mount 1788 1761 5000
Link mount 463 461 5000
MakeStyles mount 1778 1762 50000
MenuButton mount 1436 1419 5000
MessageBar mount 2113 2117 5000
Nav mount 3326 3304 1000
OverflowSet mount 1019 1074 5000
Panel mount 1404 1411 1000
Persona mount 812 811 1000
Pivot mount 1416 1412 1000
PrimaryButton mount 1328 1266 5000
Rating mount 7514 7469 5000
SearchBox mount 1290 1301 5000
Shimmer mount 2455 2574 5000
Slider mount 1969 1956 5000
SpinButton mount 4937 4930 5000
Spinner mount 423 421 5000
SplitButton mount 3044 3094 5000
Stack mount 501 493 5000
StackWithIntrinsicChildren mount 1528 1477 5000
StackWithTextChildren mount 4475 4421 5000
SwatchColorPicker mount 10018 10143 5000
Tabs mount 1385 1391 1000
TagPicker mount 2791 2842 5000
TeachingBubble mount 11471 11519 5000
Text mount 414 413 5000
TextField mount 1394 1385 5000
ThemeProvider mount 1170 1172 5000
ThemeProvider virtual-rerender 615 589 5000
ThemeProviderNext mount 15630 15985 5000
Toggle mount 808 808 5000
buttonNative mount 111 133 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.49 0.37:1 2000 358
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 596
🔧 Checkbox.Fluent 0.66 0.36 1.83:1 1000 656
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 812
🔧 Dropdown.Fluent 3.2 0.4 8:1 1000 3204
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 700
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 407
🔧 Slider.Fluent 1.63 0.44 3.7:1 1000 1634
🔧 Text.Fluent 0.08 0.04 2:1 5000 379
🦄 Tooltip.Fluent 0.14 0.91 0.15:1 5000 706

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 176 160 1.1:1
AttachmentMinimalPerf.default 178 162 1.1:1
TableMinimalPerf.default 454 421 1.08:1
ChatMinimalPerf.default 653 613 1.07:1
GridMinimalPerf.default 396 373 1.06:1
PopupMinimalPerf.default 753 709 1.06:1
BoxMinimalPerf.default 388 369 1.05:1
SegmentMinimalPerf.default 383 365 1.05:1
SkeletonMinimalPerf.default 404 383 1.05:1
ChatWithPopoverPerf.default 401 385 1.04:1
DividerMinimalPerf.default 398 382 1.04:1
HeaderMinimalPerf.default 394 379 1.04:1
HeaderSlotsPerf.default 823 793 1.04:1
ItemLayoutMinimalPerf.default 1283 1232 1.04:1
ListNestedPerf.default 608 586 1.04:1
TextMinimalPerf.default 395 380 1.04:1
Button.Fluent 596 572 1.04:1
AvatarMinimalPerf.default 218 212 1.03:1
ButtonMinimalPerf.default 180 174 1.03:1
DropdownManyItemsPerf.default 778 754 1.03:1
DropdownMinimalPerf.default 3237 3152 1.03:1
ListWith60ListItems.default 683 665 1.03:1
StatusMinimalPerf.default 772 753 1.03:1
Image.Fluent 407 396 1.03:1
AttachmentSlotsPerf.default 1227 1207 1.02:1
DatepickerMinimalPerf.default 48833 48062 1.02:1
DialogMinimalPerf.default 846 828 1.02:1
MenuButtonMinimalPerf.default 1657 1623 1.02:1
RadioGroupMinimalPerf.default 461 452 1.02:1
ButtonOverridesMissPerf.default 1738 1727 1.01:1
ButtonSlotsPerf.default 602 598 1.01:1
CardMinimalPerf.default 555 552 1.01:1
EmbedMinimalPerf.default 4375 4319 1.01:1
ProviderMinimalPerf.default 1046 1039 1.01:1
CustomToolbarPrototype.default 4011 3952 1.01:1
TreeMinimalPerf.default 843 835 1.01:1
ButtonUseCssPerf.default 827 829 1:1
CheckboxMinimalPerf.default 2821 2828 1:1
LayoutMinimalPerf.default 436 438 1:1
LoaderMinimalPerf.default 763 760 1:1
MenuMinimalPerf.default 905 903 1:1
ToolbarMinimalPerf.default 1022 1025 1:1
TooltipMinimalPerf.default 981 984 1:1
Checkbox.Fluent 656 656 1:1
Dropdown.Fluent 3204 3206 1:1
Slider.Fluent 1634 1633 1:1
ButtonUseCssNestingPerf.default 1118 1134 0.99:1
ChatDuplicateMessagesPerf.default 302 305 0.99:1
FlexMinimalPerf.default 313 317 0.99:1
ImageMinimalPerf.default 401 406 0.99:1
ListCommonPerf.default 672 681 0.99:1
ListMinimalPerf.default 532 536 0.99:1
SliderMinimalPerf.default 1659 1677 0.99:1
Avatar.Fluent 358 360 0.99:1
Dialog.Fluent 812 820 0.99:1
Text.Fluent 379 383 0.99:1
Tooltip.Fluent 706 711 0.99:1
FormMinimalPerf.default 441 449 0.98:1
PortalMinimalPerf.default 180 183 0.98:1
ProviderMergeThemesPerf.default 1696 1732 0.98:1
SplitButtonMinimalPerf.default 3858 3924 0.98:1
AnimationMinimalPerf.default 414 427 0.97:1
CarouselMinimalPerf.default 477 492 0.97:1
InputMinimalPerf.default 1308 1355 0.97:1
LabelMinimalPerf.default 452 464 0.97:1
RosterPerf.default 1175 1215 0.97:1
ReactionMinimalPerf.default 413 425 0.97:1
TextAreaMinimalPerf.default 507 525 0.97:1
TreeWith60ListItems.default 189 195 0.97:1
VideoMinimalPerf.default 650 668 0.97:1
Icon.Fluent 700 722 0.97:1
RefMinimalPerf.default 254 265 0.96:1
IconMinimalPerf.default 663 692 0.96:1
TableManyItemsPerf.default 2028 2105 0.96:1
AlertMinimalPerf.default 294 314 0.94:1

smhigley
smhigley approved these changes Mar 17, 2021
View reviewed changes
Copy link
Contributor

@smhigley smhigley left a comment

Choose a reason for hiding this comment

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

LGTM!

@smhigley
Copy link
Contributor

Going to close & re-open to restart the N* screener

@smhigley smhigley closed this Mar 29, 2021
@smhigley smhigley reopened this Mar 29, 2021
@TristanWatanabe TristanWatanabe merged commit 9eb019b into microsoft:master Mar 29, 2021
@TristanWatanabe TristanWatanabe deleted the bug-10688 branch March 29, 2021 21:47
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react@v8.7.0 has been released which incorporates this pull request.:tada:

Handy links:

@TristanWatanabe TristanWatanabe mentioned this pull request Mar 30, 2021
Merged
2 tasks
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@TristanWatanabe @miroslavstastny
VirtualizedComboBox: ARIA attributes now have valid values after pass…
213a5dd 
…ing id and arialabelledby attributes to List component (microsoft#17455)

* pass ComboBox id to List in VirtualizedCombobox

* Change files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@smhigley smhigley smhigley approved these changes

@joschect joschect joschect approved these changes

Assignees
No one assigned
Labels
Component: ComboBox
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@TristanWatanabe @fabricteam @smhigley @msft-fluent-ui-bot @joschect