Combobox v9 Spec - #21693
Conversation
|
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 1f64251:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 8075514d20e61e8360ebd09e5baf4856e6ebc401 (build) |
📊 Bundle size reportUnchanged fixtures
|
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 872 | 872 | 5000 | |
| BaseButton | mount | 962 | 943 | 5000 | |
| Breadcrumb | mount | 2677 | 2665 | 1000 | |
| ButtonNext | mount | 498 | 493 | 5000 | |
| Checkbox | mount | 1624 | 1551 | 5000 | |
| CheckboxBase | mount | 1318 | 1348 | 5000 | |
| ChoiceGroup | mount | 4798 | 4852 | 5000 | |
| ComboBox | mount | 1055 | 994 | 1000 | |
| CommandBar | mount | 10361 | 10415 | 1000 | |
| ContextualMenu | mount | 8516 | 8565 | 1000 | |
| DefaultButton | mount | 1140 | 1176 | 5000 | |
| DetailsRow | mount | 3788 | 3736 | 5000 | |
| DetailsRowFast | mount | 3795 | 3778 | 5000 | |
| DetailsRowNoStyles | mount | 3642 | 3632 | 5000 | |
| Dialog | mount | 2249 | 2278 | 1000 | |
| DocumentCardTitle | mount | 183 | 187 | 1000 | |
| Dropdown | mount | 3275 | 3272 | 5000 | |
| FluentProviderNext | mount | 1952 | 1924 | 5000 | |
| FluentProviderWithTheme | mount | 163 | 157 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 130 | 117 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 208 | 202 | 10 | |
| FocusTrapZone | mount | 1865 | 1874 | 5000 | |
| FocusZone | mount | 1797 | 1827 | 5000 | |
| IconButton | mount | 1775 | 1777 | 5000 | |
| Label | mount | 385 | 384 | 5000 | |
| Layer | mount | 3050 | 3091 | 5000 | |
| Link | mount | 511 | 523 | 5000 | |
| MakeStyles | mount | 1724 | 1721 | 50000 | |
| MenuButton | mount | 1497 | 1498 | 5000 | |
| MessageBar | mount | 2049 | 2086 | 5000 | |
| Nav | mount | 3302 | 3311 | 1000 | |
| OverflowSet | mount | 1134 | 1168 | 5000 | |
| Panel | mount | 2191 | 2165 | 1000 | |
| Persona | mount | 869 | 859 | 1000 | |
| Pivot | mount | 1467 | 1446 | 1000 | |
| PrimaryButton | mount | 1332 | 1304 | 5000 | |
| Rating | mount | 7692 | 7723 | 5000 | |
| SearchBox | mount | 1380 | 1367 | 5000 | |
| Shimmer | mount | 2553 | 2553 | 5000 | |
| Slider | mount | 2006 | 1998 | 5000 | |
| SpinButton | mount | 5032 | 5086 | 5000 | |
| Spinner | mount | 477 | 466 | 5000 | |
| SplitButton | mount | 3158 | 3224 | 5000 | |
| Stack | mount | 555 | 552 | 5000 | |
| StackWithIntrinsicChildren | mount | 2338 | 2327 | 5000 | |
| StackWithTextChildren | mount | 5294 | 5264 | 5000 | |
| SwatchColorPicker | mount | 11498 | 11497 | 5000 | |
| TagPicker | mount | 2650 | 2630 | 5000 | |
| TeachingBubble | mount | 13317 | 13236 | 5000 | |
| Text | mount | 458 | 464 | 5000 | |
| TextField | mount | 1413 | 1446 | 5000 | |
| ThemeProvider | mount | 1236 | 1247 | 5000 | |
| ThemeProvider | virtual-rerender | 639 | 658 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1933 | 1913 | 5000 | |
| Toggle | mount | 848 | 829 | 5000 | |
| buttonNative | mount | 156 | 149 | 5000 |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| ButtonMinimalPerf.default | 183 | 162 | 1.13:1 |
| HeaderMinimalPerf.default | 387 | 358 | 1.08:1 |
| ChatWithPopoverPerf.default | 393 | 372 | 1.06:1 |
| DividerMinimalPerf.default | 374 | 354 | 1.06:1 |
| IconMinimalPerf.default | 624 | 593 | 1.05:1 |
| AnimationMinimalPerf.default | 552 | 533 | 1.04:1 |
| DropdownManyItemsPerf.default | 697 | 669 | 1.04:1 |
| FlexMinimalPerf.default | 303 | 291 | 1.04:1 |
| ImageMinimalPerf.default | 382 | 369 | 1.04:1 |
| LabelMinimalPerf.default | 401 | 385 | 1.04:1 |
| LayoutMinimalPerf.default | 369 | 356 | 1.04:1 |
| ListMinimalPerf.default | 532 | 513 | 1.04:1 |
| BoxMinimalPerf.default | 359 | 348 | 1.03:1 |
| GridMinimalPerf.default | 348 | 337 | 1.03:1 |
| TableMinimalPerf.default | 424 | 413 | 1.03:1 |
| TooltipMinimalPerf.default | 1064 | 1031 | 1.03:1 |
| CarouselMinimalPerf.default | 481 | 473 | 1.02:1 |
| HeaderSlotsPerf.default | 787 | 772 | 1.02:1 |
| PopupMinimalPerf.default | 624 | 610 | 1.02:1 |
| ProviderMinimalPerf.default | 1128 | 1110 | 1.02:1 |
| RadioGroupMinimalPerf.default | 461 | 454 | 1.02:1 |
| ReactionMinimalPerf.default | 389 | 381 | 1.02:1 |
| StatusMinimalPerf.default | 695 | 682 | 1.02:1 |
| ToolbarMinimalPerf.default | 952 | 932 | 1.02:1 |
| ButtonOverridesMissPerf.default | 1708 | 1692 | 1.01:1 |
| ButtonSlotsPerf.default | 547 | 542 | 1.01:1 |
| ChatMinimalPerf.default | 737 | 732 | 1.01:1 |
| DatepickerMinimalPerf.default | 5682 | 5651 | 1.01:1 |
| InputMinimalPerf.default | 1294 | 1277 | 1.01:1 |
| ItemLayoutMinimalPerf.default | 1204 | 1194 | 1.01:1 |
| ListCommonPerf.default | 634 | 628 | 1.01:1 |
| ListNestedPerf.default | 566 | 560 | 1.01:1 |
| LoaderMinimalPerf.default | 697 | 690 | 1.01:1 |
| RosterPerf.default | 1192 | 1183 | 1.01:1 |
| ProviderMergeThemesPerf.default | 1757 | 1740 | 1.01:1 |
| SegmentMinimalPerf.default | 354 | 349 | 1.01:1 |
| SkeletonMinimalPerf.default | 355 | 353 | 1.01:1 |
| SliderMinimalPerf.default | 1678 | 1662 | 1.01:1 |
| TextMinimalPerf.default | 352 | 347 | 1.01:1 |
| TreeMinimalPerf.default | 795 | 785 | 1.01:1 |
| CardMinimalPerf.default | 556 | 556 | 1:1 |
| CheckboxMinimalPerf.default | 2690 | 2703 | 1:1 |
| DialogMinimalPerf.default | 761 | 758 | 1:1 |
| DropdownMinimalPerf.default | 2992 | 2992 | 1:1 |
| EmbedMinimalPerf.default | 4118 | 4119 | 1:1 |
| FormMinimalPerf.default | 407 | 408 | 1:1 |
| ListWith60ListItems.default | 651 | 651 | 1:1 |
| RefMinimalPerf.default | 240 | 240 | 1:1 |
| SplitButtonMinimalPerf.default | 4326 | 4336 | 1:1 |
| TableManyItemsPerf.default | 1904 | 1900 | 1:1 |
| CustomToolbarPrototype.default | 4087 | 4071 | 1:1 |
| AttachmentSlotsPerf.default | 1068 | 1074 | 0.99:1 |
| MenuMinimalPerf.default | 838 | 844 | 0.99:1 |
| MenuButtonMinimalPerf.default | 1663 | 1674 | 0.99:1 |
| PortalMinimalPerf.default | 180 | 181 | 0.99:1 |
| TextAreaMinimalPerf.default | 499 | 502 | 0.99:1 |
| AccordionMinimalPerf.default | 159 | 163 | 0.98:1 |
| AlertMinimalPerf.default | 278 | 285 | 0.98:1 |
| AttachmentMinimalPerf.default | 158 | 161 | 0.98:1 |
| VideoMinimalPerf.default | 631 | 647 | 0.98:1 |
| ChatDuplicateMessagesPerf.default | 299 | 313 | 0.96:1 |
| AvatarMinimalPerf.default | 195 | 206 | 0.95:1 |
| TreeWith60ListItems.default | 181 | 195 | 0.93:1 |
6db6f23 to
75893ad
Compare
|
I think you can ignore this comment, I incorrectly understood how the v8 combo box worked and how we were using it in Office Online |
|
|
||
| ### Keyboard interaction | ||
|
|
||
| The keyboard interaction model follows that of the [ARIA Practices Combobox Pattern](https://w3c.github.io/aria-practices/#combobox), with the addition of <kbd>Space</kbd> to select options. |
There was a problem hiding this comment.
when we implemented v0 Dropdown, we also had to add special handling for Tab - the requirement was that Tab should also select the active item from the list. This was not in the ARIA pattern, however major comboboxes in MS products do that, so users are used to the behavior.
There was a problem hiding this comment.
Yup, I definitely would like this to happen too -- assuming you mean tabbing away from an open dropdown selects the currently highlighted item?
Good call, I'll add this to the spec.
There was a problem hiding this comment.
yes, that is what I meant. thank you
|
|
||
| ### Semantic structure | ||
|
|
||
| The Fluent Combobox uses the [ARIA 1.2 combobox pattern](https://www.w3.org/TR/wai-aria-1.2/#combobox), which differs significantly from ARIA 1.1. The ARIA 1.2 pattern has [better practical support](https://www.24a11y.com/2019/select-your-poison-part-2/), and as of writing, the 1.2 spec is headed towards Candidate Recommendation. |
There was a problem hiding this comment.
it would be good to talk to the browser vendors or to the screen reader vendors to improve narration around the aria-controls link. Basically, as input is linked to the listbox, screen reader should be able to announce the number of available options, when it changes in the listbox. This was historically done by a live narration and is therefore tricky
There was a problem hiding this comment.
That'd be good to raise for sure. I think it may be a bit more complicated than just aria-controls, since some decisions about what page changes to announce are a combination of SR vendor verbosity decisions and access via the API. My unsubstantiated guess is that combobox patterns have been shifting so much that support for finer details like this have kind of been lagging behind. Hopefully pushing harder for support can change that.
How would you feel about me noting down the lack of option # change announcements in the "Known Issues" section for now? Ideally we can use that section in the future as a list of things to push for more support on in the future.
There was a problem hiding this comment.
I added it to the known issues list👍
9 participants
Related to #21666, adds a draft
Spect.mdfor the combobox package.