fluentui
fluentui copied to clipboard
microsoft
feat(charts): Create web components - Donut, Horizontal Bar Chart
Perf Analysis (@fluentui/react-components)
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| FluentProviderWithTheme | virtual-rerender | 36 | 35 | 10 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 624 | 632 | 5000 | |
| Button | mount | 308 | 300 | 5000 | |
| Field | mount | 1141 | 1151 | 5000 | |
| FluentProvider | mount | 709 | 730 | 5000 | |
| FluentProviderWithTheme | mount | 86 | 87 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 36 | 35 | 10 | Possible regression |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 74 | 82 | 10 | |
| MakeStyles | mount | 865 | 880 | 50000 | |
| Persona | mount | 1757 | 1690 | 5000 | |
| SpinButton | mount | 1373 | 1440 | 5000 | |
| SwatchPicker | mount | 1649 | 1646 | 5000 |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| AttachmentMinimalPerf.default | 94 | 76 | 1.24:1 |
| TreeWith60ListItems.default | 97 | 85 | 1.14:1 |
| AvatarMinimalPerf.default | 112 | 101 | 1.11:1 |
| ChatWithPopoverPerf.default | 201 | 183 | 1.1:1 |
| LoaderMinimalPerf.default | 199 | 181 | 1.1:1 |
| ReactionMinimalPerf.default | 222 | 205 | 1.08:1 |
| AccordionMinimalPerf.default | 90 | 84 | 1.07:1 |
| ButtonMinimalPerf.default | 91 | 85 | 1.07:1 |
| ProviderMinimalPerf.default | 212 | 199 | 1.07:1 |
| StatusMinimalPerf.default | 408 | 382 | 1.07:1 |
| ListNestedPerf.default | 332 | 312 | 1.06:1 |
| ChatDuplicateMessagesPerf.default | 165 | 157 | 1.05:1 |
| HeaderMinimalPerf.default | 213 | 203 | 1.05:1 |
| MenuMinimalPerf.default | 517 | 491 | 1.05:1 |
| SkeletonMinimalPerf.default | 205 | 195 | 1.05:1 |
| TooltipMinimalPerf.default | 1275 | 1218 | 1.05:1 |
| CardMinimalPerf.default | 328 | 314 | 1.04:1 |
| DialogMinimalPerf.default | 456 | 440 | 1.04:1 |
| FlexMinimalPerf.default | 159 | 153 | 1.04:1 |
| ListWith60ListItems.default | 376 | 362 | 1.04:1 |
| RefMinimalPerf.default | 115 | 111 | 1.04:1 |
| AlertMinimalPerf.default | 165 | 160 | 1.03:1 |
| CarouselMinimalPerf.default | 277 | 269 | 1.03:1 |
| CheckboxMinimalPerf.default | 1164 | 1132 | 1.03:1 |
| DropdownManyItemsPerf.default | 414 | 402 | 1.03:1 |
| ItemLayoutMinimalPerf.default | 719 | 700 | 1.03:1 |
| ButtonOverridesMissPerf.default | 675 | 661 | 1.02:1 |
| EmbedMinimalPerf.default | 1923 | 1883 | 1.02:1 |
| GridMinimalPerf.default | 191 | 188 | 1.02:1 |
| InputMinimalPerf.default | 561 | 549 | 1.02:1 |
| ListCommonPerf.default | 397 | 390 | 1.02:1 |
| SliderMinimalPerf.default | 755 | 740 | 1.02:1 |
| TextMinimalPerf.default | 191 | 187 | 1.02:1 |
| CustomToolbarPrototype.default | 1466 | 1440 | 1.02:1 |
| BoxMinimalPerf.default | 194 | 193 | 1.01:1 |
| DividerMinimalPerf.default | 206 | 203 | 1.01:1 |
| HeaderSlotsPerf.default | 467 | 461 | 1.01:1 |
| LabelMinimalPerf.default | 217 | 215 | 1.01:1 |
| MenuButtonMinimalPerf.default | 963 | 949 | 1.01:1 |
| PortalMinimalPerf.default | 85 | 84 | 1.01:1 |
| RadioGroupMinimalPerf.default | 274 | 270 | 1.01:1 |
| SegmentMinimalPerf.default | 195 | 194 | 1.01:1 |
| TreeMinimalPerf.default | 487 | 484 | 1.01:1 |
| AnimationMinimalPerf.default | 304 | 303 | 1:1 |
| DropdownMinimalPerf.default | 1466 | 1463 | 1:1 |
| FormMinimalPerf.default | 220 | 221 | 1:1 |
| ImageMinimalPerf.default | 227 | 227 | 1:1 |
| LayoutMinimalPerf.default | 201 | 202 | 1:1 |
| TextAreaMinimalPerf.default | 290 | 290 | 1:1 |
| DatepickerMinimalPerf.default | 3615 | 3642 | 0.99:1 |
| ListMinimalPerf.default | 311 | 315 | 0.99:1 |
| RosterPerf.default | 1570 | 1593 | 0.99:1 |
| ToolbarMinimalPerf.default | 546 | 550 | 0.99:1 |
| VideoMinimalPerf.default | 453 | 456 | 0.99:1 |
| AttachmentSlotsPerf.default | 648 | 662 | 0.98:1 |
| ButtonSlotsPerf.default | 304 | 310 | 0.98:1 |
| TableManyItemsPerf.default | 1123 | 1146 | 0.98:1 |
| PopupMinimalPerf.default | 346 | 358 | 0.97:1 |
| SplitButtonMinimalPerf.default | 2209 | 2269 | 0.97:1 |
| ChatMinimalPerf.default | 424 | 440 | 0.96:1 |
| ProviderMergeThemesPerf.default | 640 | 664 | 0.96:1 |
| IconMinimalPerf.default | 387 | 403 | 0.96:1 |
| TableMinimalPerf.default | 219 | 239 | 0.92:1 |
Perf Analysis (@fluentui/react)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 649 | 633 | 5000 | |
| Breadcrumb | mount | 1738 | 1722 | 1000 | |
| Checkbox | mount | 1763 | 1736 | 5000 | |
| CheckboxBase | mount | 1517 | 1486 | 5000 | |
| ChoiceGroup | mount | 2988 | 3026 | 5000 | |
| ComboBox | mount | 678 | 696 | 1000 | |
| CommandBar | mount | 6807 | 6797 | 1000 | |
| ContextualMenu | mount | 15990 | 15798 | 1000 | |
| DefaultButton | mount | 822 | 827 | 5000 | |
| DetailsRow | mount | 2269 | 2213 | 5000 | |
| DetailsRowFast | mount | 2219 | 2248 | 5000 | |
| DetailsRowNoStyles | mount | 2065 | 2054 | 5000 | |
| Dialog | mount | 2799 | 2873 | 1000 | |
| DocumentCardTitle | mount | 237 | 228 | 1000 | |
| Dropdown | mount | 2033 | 2038 | 5000 | |
| FocusTrapZone | mount | 1136 | 1167 | 5000 | |
| FocusZone | mount | 1105 | 1120 | 5000 | |
| GroupedList | mount | 43313 | 42988 | 2 | |
| GroupedList | virtual-rerender | 20578 | 20669 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 52992 | 52847 | 2 | |
| GroupedListV2 | mount | 234 | 243 | 2 | |
| GroupedListV2 | virtual-rerender | 226 | 229 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 244 | 243 | 2 | |
| IconButton | mount | 1155 | 1159 | 5000 | |
| Label | mount | 347 | 356 | 5000 | |
| Layer | mount | 2747 | 2756 | 5000 | |
| Link | mount | 418 | 407 | 5000 | |
| MenuButton | mount | 995 | 1021 | 5000 | |
| MessageBar | mount | 21548 | 21493 | 5000 | |
| Nav | mount | 2033 | 2027 | 1000 | |
| OverflowSet | mount | 802 | 798 | 5000 | |
| Panel | mount | 1852 | 1885 | 1000 | |
| Persona | mount | 754 | 776 | 1000 | |
| Pivot | mount | 936 | 924 | 1000 | |
| PrimaryButton | mount | 949 | 935 | 5000 | |
| Rating | mount | 4664 | 4735 | 5000 | |
| SearchBox | mount | 931 | 954 | 5000 | |
| Shimmer | mount | 1919 | 1920 | 5000 | |
| Slider | mount | 1355 | 1350 | 5000 | |
| SpinButton | mount | 3031 | 2981 | 5000 | |
| Spinner | mount | 399 | 398 | 5000 | |
| SplitButton | mount | 1936 | 1886 | 5000 | |
| Stack | mount | 424 | 413 | 5000 | |
| StackWithIntrinsicChildren | mount | 881 | 891 | 5000 | |
| StackWithTextChildren | mount | 2778 | 2801 | 5000 | |
| SwatchColorPicker | mount | 6466 | 6387 | 5000 | |
| TagPicker | mount | 1473 | 1458 | 5000 | |
| Text | mount | 393 | 388 | 5000 | |
| TextField | mount | 965 | 947 | 5000 | |
| ThemeProvider | mount | 857 | 849 | 5000 | |
| ThemeProvider | virtual-rerender | 581 | 591 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1308 | 1312 | 5000 | |
| Toggle | mount | 593 | 636 | 5000 | |
| buttonNative | mount | 201 | 196 | 5000 |
A high-level note is, both components should probably use ElementInternals to set role as image, If keyboard users are expected to be able to interact with the generated charts (as opposed to just having aria-label to describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.
A high-level note is, both components should probably use ElementInternals to set
roleasimage, If keyboard users are expected to be able to interact with the generated charts (as opposed to just havingaria-labelto describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.
Yes. We will plan to move to elementinternals in next iteration. For keyboard navigation, we are following the accessibility guidance shipped in our v8 controls. It is a combination of tab, arrow navigation functionality standards designed for our graph controls. See the current behavior here. https://aka.ms/fluentcharting
A high-level note is, both components should probably use ElementInternals to set
roleasimage, If keyboard users are expected to be able to interact with the generated charts (as opposed to just havingaria-labelto describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.Yes. We will plan to move to elementinternals in next iteration. For keyboard navigation, we are following the accessibility guidance shipped in our v8 controls. It is a combination of tab, arrow navigation functionality standards designed for our graph controls. See the current behavior here. https://aka.ms/fluentcharting
If this is in the same package as the "core" of Fluent, I think it needs to be aligned with the approach there - any deviation is going to cause confusion.
As noted above though, why is this in the "core" package? Fluent's current organization is that we have a core package and we have supplemental packages such as charting/contrib/etc.
Is there a reason this is going into the core bundle? I would expect this to be its own package.
Yes, we will move to our own web components package. The ground work for packaging is already underway in another PR. This PR is to standup the controls, get inputs and ensuring the desired functionalities are available.
Also we would prefer to be part of the same build release pipeline setup for the web component controls like we follow for v8 and upcoming v9 controls. Let me know your thoughts on this.
Is there a reason this is going into the core bundle? I would expect this to be its own package.
Yes, we will move to our own web components package. The ground work for packaging is already underway in another PR. This PR is to standup the controls, get inputs and ensuring the desired functionalities are available.
Also we would prefer to be part of the same build release pipeline setup for the web component controls like we follow for v8 and upcoming v9 controls. Let me know your thoughts on this.
With this in mind, should this then be a draft PR? I don't think we should be merging "in progress" work or work that won't stay in a package to the main branch. A feature branch and draft PR is a great use case for scenarios where we want/need feedback, etc.
Is there a reason this is going into the core bundle? I would expect this to be its own package.
Yes, we will move to our own web components package. The ground work for packaging is already underway in another PR. This PR is to standup the controls, get inputs and ensuring the desired functionalities are available. Also we would prefer to be part of the same build release pipeline setup for the web component controls like we follow for v8 and upcoming v9 controls. Let me know your thoughts on this.
With this in mind, should this then be a draft PR? I don't think we should be merging "in progress" work or work that won't stay in a package to the main branch. A feature branch and draft PR is a great use case for scenarios where we want/need feedback, etc.
To clarify, we won't be merging this PR in the current state. I have published this PR to notify the appropriate maintainers as we are not familiar with the process here. I will move it back to the draft state. Pls include anyone else who needs to participate in the review.
A high-level note is, both components should probably use ElementInternals to set
roleasimage, If keyboard users are expected to be able to interact with the generated charts (as opposed to just havingaria-labelto describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.Yes. We will plan to move to elementinternals in next iteration. For keyboard navigation, we are following the accessibility guidance shipped in our v8 controls. It is a combination of tab, arrow navigation functionality standards designed for our graph controls. See the current behavior here. https://aka.ms/fluentcharting
If this is in the same package as the "core" of Fluent, I think it needs to be aligned with the approach there - any deviation is going to cause confusion.
As noted above though, why is this in the "core" package? Fluent's current organization is that we have a core package and we have supplemental packages such as charting/contrib/etc.
Could you clarify the approach you are referring to. Is there a guidance published that should be followed.
A high-level note is, both components should probably use ElementInternals to set
roleasimage, If keyboard users are expected to be able to interact with the generated charts (as opposed to just havingaria-labelto describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.Yes. We will plan to move to elementinternals in next iteration. For keyboard navigation, we are following the accessibility guidance shipped in our v8 controls. It is a combination of tab, arrow navigation functionality standards designed for our graph controls. See the current behavior here. https://aka.ms/fluentcharting
If this is in the same package as the "core" of Fluent, I think it needs to be aligned with the approach there - any deviation is going to cause confusion. As noted above though, why is this in the "core" package? Fluent's current organization is that we have a core package and we have supplemental packages such as charting/contrib/etc.
Could you clarify the approach you are referring to. Is there a guidance published that should be followed.
I'm commenting specifically on aligning with the implementation decisions and the structure of the repo. So, using define vs. decorators, leveraging elementInternals, custom states, etc.
A high-level note is, both components should probably use ElementInternals to set
roleasimage, If keyboard users are expected to be able to interact with the generated charts (as opposed to just havingaria-labelto describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.Yes. We will plan to move to elementinternals in next iteration. For keyboard navigation, we are following the accessibility guidance shipped in our v8 controls. It is a combination of tab, arrow navigation functionality standards designed for our graph controls. See the current behavior here. https://aka.ms/fluentcharting
If this is in the same package as the "core" of Fluent, I think it needs to be aligned with the approach there - any deviation is going to cause confusion. As noted above though, why is this in the "core" package? Fluent's current organization is that we have a core package and we have supplemental packages such as charting/contrib/etc.
Could you clarify the approach you are referring to. Is there a guidance published that should be followed.
I'm commenting specifically on aligning with the implementation decisions and the structure of the repo. So, using
definevs. decorators, leveragingelementInternals, custom states, etc.
To conclude, yes we are following the published docs. Some adherence is in this PR, decorators are in progress. Things like elementinternals, using popover apis and breaking down the template will fast follow in further iterations in the next sprint. Thanks a lot for the inputs.
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react ExtendedPicker |
96.924 kB27.92 kB |
96.924 kB27.917 kB |
-3 B |
| react FloatingPicker |
242.44 kB69.088 kB |
242.44 kB69.089 kB |
1 B |
| react Fluent UI React (entire library) |
1.015 MB282.181 kB |
1.015 MB282.184 kB |
3 B |
| react SelectedItemsList |
232.95 kB67.977 kB |
232.95 kB67.979 kB |
2 B |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| global-context createContext |
510 B328 B |
| global-context createContextSelector |
537 B339 B |
| keyboard-key keyboard-key package |
3.746 kB1.928 kB |
| priority-overflow createOverflowManager |
4.457 kB1.856 kB |
| react ActivityItem |
71.236 kB23.357 kB |
| react Announced |
38.493 kB13.297 kB |
| react Autofill |
15.428 kB4.768 kB |
| react Breadcrumb |
202.406 kB60.482 kB |
| react Button |
195.858 kB56.697 kB |
| react ButtonGrid |
180.792 kB54.683 kB |
| react Calendar |
121.905 kB37.046 kB |
| react Callout |
84.33 kB27.648 kB |
| react Check |
53.204 kB17.848 kB |
| react Checkbox |
59.985 kB19.903 kB |
| react ChoiceGroup |
65.494 kB21.489 kB |
| react ChoiceGroupOption |
58.767 kB19.362 kB |
| react Coachmark |
93.151 kB29.428 kB |
| react Color |
7.789 kB3.127 kB |
| react ColorPicker |
135.359 kB42.257 kB |
| react ComboBox |
252.295 kB72.392 kB |
| react CommandBar |
203.447 kB60.224 kB |
| react ContextualMenu |
155.273 kB48.228 kB |
| react DatePicker |
184.333 kB56.194 kB |
| react DateTimeUtilities |
5.244 kB1.849 kB |
| react DetailsList |
230.107 kB65.952 kB |
| react Dialog |
211.784 kB63.237 kB |
| react Divider |
19.603 kB6.845 kB |
| react DocumentCard |
217.399 kB64.512 kB |
| react DragDrop |
8.343 kB2.724 kB |
| react DraggableZone |
34.305 kB11.509 kB |
| react Dropdown |
234.345 kB68.729 kB |
| react Fabric |
41.745 kB14.366 kB |
| react Facepile |
210.998 kB63.254 kB |
| react FocusTrapZone |
17.03 kB5.924 kB |
| react FocusZone |
55.182 kB17.503 kB |
| react Grid |
180.792 kB54.683 kB |
| react GroupedList |
135.178 kB40.798 kB |
| react GroupedListV2 |
122.767 kB37.881 kB |
| react HoverCard |
97.179 kB30.82 kB |
| react Icon |
51.885 kB17.272 kB |
| react Icons |
66.361 kB24.397 kB |
| react Image |
46.904 kB15.707 kB |
| react Keytip |
81.693 kB26.766 kB |
| react KeytipData |
14.039 kB4.588 kB |
| react KeytipLayer |
103.478 kB32.017 kB |
| react Keytips |
106.25 kB33.023 kB |
| react Label |
38.347 kB13.257 kB |
| react Layer |
48.099 kB16.367 kB |
| react Link |
39.682 kB13.67 kB |
| react List |
39.4 kB12.481 kB |
| react MarqueeSelection |
74.541 kB22.44 kB |
| react MessageBar |
190.922 kB57.155 kB |
| react Modal |
93.747 kB30.278 kB |
| react Nav |
188.398 kB56.575 kB |
| react OverflowSet |
33.393 kB11.329 kB |
| react Overlay |
40.902 kB14.095 kB |
| react Panel |
201.456 kB60.076 kB |
| react Persona |
114.967 kB36.546 kB |
| react PersonaCoin |
114.967 kB36.546 kB |
| react PersonaPresence |
58.074 kB19.384 kB |
| react Pickers |
294.462 kB82.501 kB |
| react Pivot |
189.29 kB57.329 kB |
| react Popup |
12.294 kB4.195 kB |
| react Positioning |
22.807 kB7.701 kB |
| react PositioningContainer |
73.85 kB23.765 kB |
| react ProgressIndicator |
39.504 kB13.554 kB |
| react Rating |
82.143 kB26.144 kB |
| react ResizeGroup |
13.338 kB4.377 kB |
| react ResponsiveMode |
8.13 kB2.966 kB |
| react ScrollablePane |
55.563 kB17.734 kB |
| react SearchBox |
189.171 kB56.737 kB |
| react SelectableOption |
724 B413 B |
| react Selection |
42.464 kB12.301 kB |
| react Separator |
35.384 kB12.146 kB |
| react Shimmer |
49.259 kB16.268 kB |
| react ShimmeredDetailsList |
240.889 kB68.7 kB |
| react Slider |
57.651 kB19.217 kB |
| react SpinButton |
192.874 kB57.835 kB |
| react Spinner |
41.777 kB14.478 kB |
| react Stack |
41.734 kB14.268 kB |
| react Sticky |
32.613 kB10.509 kB |
| react Styling |
46.033 kB15.135 kB |
| react SwatchColorPicker |
191.177 kB58.196 kB |
| react TeachingBubble |
206.173 kB61.106 kB |
| react Text |
36.908 kB12.822 kB |
| react TextField |
80.816 kB25.332 kB |
| react Theme |
43.501 kB14.183 kB |
| react ThemeGenerator |
12.392 kB4.126 kB |
| react TimePicker |
242.077 kB70.14 kB |
| react Toggle |
46.225 kB15.986 kB |
| react Tooltip |
87.456 kB28.268 kB |
| react Utilities |
82.931 kB25.148 kB |
| react Viewport |
23.888 kB7.656 kB |
| react WeeklyDayPicker |
102.058 kB31.861 kB |
| react WindowProvider |
1.059 kB541 B |
| react-accordion Accordion (including children components) |
106.728 kB32.718 kB |
| react-avatar Avatar |
49.303 kB15.815 kB |
| react-avatar AvatarGroup |
20.106 kB7.968 kB |
| react-avatar AvatarGroupItem |
63.447 kB20.034 kB |
| react-badge Badge |
25.954 kB8.595 kB |
| react-badge CounterBadge |
26.733 kB8.872 kB |
| react-badge PresenceBadge |
25.719 kB9.457 kB |
| react-breadcrumb @fluentui/react-breadcrumb - package |
114.291 kB31.695 kB |
| react-button Button |
37.174 kB10.803 kB |
| react-button CompoundButton |
43.588 kB12.101 kB |
| react-button MenuButton |
41.989 kB12.144 kB |
| react-button SplitButton |
50.006 kB13.716 kB |
| react-button ToggleButton |
53.107 kB12.561 kB |
| react-calendar-compat Calendar Compat |
150.095 kB40.026 kB |
| react-card Card - All |
101.77 kB28.772 kB |
| react-card Card |
94.544 kB26.951 kB |
| react-card CardFooter |
14.355 kB5.79 kB |
| react-card CardHeader |
16.888 kB6.669 kB |
| react-card CardPreview |
14.42 kB5.922 kB |
| react-checkbox Checkbox |
35.118 kB12.077 kB |
| react-combobox Combobox (including child components) |
104.383 kB34.197 kB |
| react-combobox Dropdown (including child components) |
104.996 kB34.122 kB |
| react-components react-components: Button, FluentProvider & webLightTheme |
69.21 kB20.174 kB |
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
220.616 kB63.902 kB |
| react-components react-components: FluentProvider & webLightTheme |
44.447 kB14.59 kB |
| react-components react-components: entire library |
1.16 MB290.619 kB |
| react-datepicker-compat DatePicker Compat |
224.165 kB63.423 kB |
| react-dialog Dialog (including children components) |
100.297 kB30.076 kB |
| react-divider Divider |
21.328 kB7.953 kB |
| react-field Field |
23.399 kB8.898 kB |
| react-image Image |
15.36 kB6.236 kB |
| react-input Input |
28.014 kB9.444 kB |
| react-jsx-runtime Classic Pragma |
1.057 kB530 B |
| react-jsx-runtime JSX Dev Runtime |
3.771 kB1.643 kB |
| react-jsx-runtime JSX Runtime |
4.367 kB1.874 kB |
| react-label Label |
14.671 kB5.99 kB |
| react-link Link |
17.326 kB7.032 kB |
| react-list-preview List |
89.148 kB26.597 kB |
| react-list-preview ListItem |
112.707 kB33.428 kB |
| react-menu Menu (including children components) |
152.661 kB46.116 kB |
| react-menu Menu (including selectable components) |
155.342 kB46.598 kB |
| react-message-bar MessageBar (all components) |
24.878 kB9.264 kB |
| react-motion @fluentui/react-motion - createMotionComponent() |
4.303 kB1.899 kB |
| react-motion @fluentui/react-motion - createPresenceComponent() |
5.038 kB2.229 kB |
| react-motion @fluentui/react-motion - PresenceGroup |
1.714 kB819 B |
| react-northstar Accordion |
85.38 kB26.519 kB |
| react-northstar Alert |
87.435 kB26.905 kB |
| react-northstar Animation |
55.331 kB17.83 kB |
| react-northstar Attachment |
86.829 kB26.7 kB |
| react-northstar Avatar |
80.264 kB24.633 kB |
| react-northstar Box |
75.233 kB23.813 kB |
| react-northstar Breadcrumb |
79.908 kB24.717 kB |
| react-northstar Button |
83.145 kB25.952 kB |
| react-northstar Card |
82.693 kB25.037 kB |
| react-northstar Carousel |
105.17 kB31.873 kB |
| react-northstar Chat |
154.072 kB46.878 kB |
| react-northstar Checkbox |
79.792 kB25.08 kB |
| react-northstar Datepicker |
186.639 kB56.99 kB |
| react-northstar Debug |
8.801 kB3.594 kB |
| react-northstar Design |
36.589 kB12.067 kB |
| react-northstar Dialog |
112.046 kB33.622 kB |
| react-northstar Divider |
76.604 kB24.135 kB |
| react-northstar Dropdown |
198.196 kB60.223 kB |
| react-northstar Embed |
81.465 kB25.425 kB |
| react-northstar Flex |
47.716 kB15.443 kB |
| react-northstar Form |
92.515 kB28.888 kB |
| react-northstar Grid |
70.569 kB22.283 kB |
| react-northstar Header |
74.741 kB23.465 kB |
| react-northstar Image |
73.576 kB23.333 kB |
| react-northstar Input |
88.334 kB27.781 kB |
| react-northstar ItemLayout |
78.213 kB24.457 kB |
| react-northstar Label |
77.905 kB24.414 kB |
| react-northstar Layout |
75.378 kB23.803 kB |
| react-northstar List |
88.475 kB27.555 kB |
| react-northstar Loader |
78.601 kB24.733 kB |
| react-northstar Menu |
128.587 kB40.738 kB |
| react-northstar MenuButton |
162.993 kB49.614 kB |
| react-northstar Pill |
83.707 kB26.069 kB |
| react-northstar Popup |
135.304 kB42.259 kB |
| react-northstar Portal |
58.326 kB18.851 kB |
| react-northstar Provider |
93.129 kB29.627 kB |
| react-northstar RadioGroup |
83.27 kB26.053 kB |
| react-northstar Reaction |
77.265 kB24.128 kB |
| react-northstar Segment |
76.194 kB23.896 kB |
| react-northstar Skeleton |
77.75 kB24.205 kB |
| react-northstar Slider |
84.258 kB26.757 kB |
| react-northstar SplitButton |
178.231 kB53.438 kB |
| react-northstar Status |
76.257 kB24.054 kB |
| react-northstar SvgIcon |
36.811 kB11.746 kB |
| react-northstar Table |
80.784 kB25.157 kB |
| react-northstar Text |
74.099 kB23.511 kB |
| react-northstar TextArea |
74.233 kB23.496 kB |
| react-northstar Toolbar |
175.042 kB52.844 kB |
| react-northstar Tooltip |
109.961 kB35.238 kB |
| react-northstar Tree |
87.84 kB27.223 kB |
| react-northstar Video |
75.399 kB23.796 kB |
| react-overflow hooks only |
12.808 kB4.819 kB |
| react-persona Persona |
56.194 kB17.695 kB |
| react-popover Popover |
128.904 kB40.314 kB |
| react-portal Portal |
14.563 kB5.118 kB |
| react-portal-compat PortalCompatProvider |
8.39 kB2.64 kB |
| react-positioning usePositioning |
27.057 kB9.698 kB |
| react-progress ProgressBar |
17.084 kB6.891 kB |
| react-provider FluentProvider |
24.623 kB8.893 kB |
| react-radio Radio |
32.672 kB10.343 kB |
| react-radio RadioGroup |
15.762 kB6.423 kB |
| react-select Select |
27.732 kB10.124 kB |
| react-slider Slider |
37.169 kB12.538 kB |
| react-spinbutton SpinButton |
36.06 kB11.815 kB |
| react-spinner Spinner |
25.245 kB8.539 kB |
| react-swatch-picker @fluentui/react-swatch-picker - package |
104.258 kB30.231 kB |
| react-switch Switch |
35.319 kB11.314 kB |
| react-table DataGrid |
161.034 kB45.71 kB |
| react-table Table (Primitives only) |
42.666 kB13.854 kB |
| react-table Table as DataGrid |
131.869 kB36.57 kB |
| react-table Table (Selection only) |
70.536 kB19.999 kB |
| react-table Table (Sort only) |
69.179 kB19.61 kB |
| react-tag-picker @fluentui/react-tag-picker - package |
184.091 kB55.425 kB |
| react-tags InteractionTag |
15.199 kB6.157 kB |
| react-tags Tag |
29.016 kB9.524 kB |
| react-tags TagGroup |
82.719 kB24.524 kB |
| react-text Text - Default |
17.061 kB6.723 kB |
| react-text Text - Wrappers |
20.242 kB7.048 kB |
| react-textarea Textarea |
26.572 kB9.755 kB |
| react-theme Single theme token import |
69 B89 B |
| react-theme Teams: all themes |
35.666 kB7.453 kB |
| react-theme Teams: Light theme |
19.642 kB5.549 kB |
| react-timepicker-compat TimePicker |
107.372 kB35.755 kB |
| react-toast Toast (including Toaster) |
98.338 kB29.591 kB |
| react-tooltip Tooltip |
55.517 kB19.515 kB |
| react-utilities SSRProvider |
180 B160 B |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
![azure-pipelines[bot] avatar](https://avatars.githubusercontent.com/in/9426?v=4 "Published by a pub.dev verified publisher"){kind=small}
A high-level note is, both components should probably use ElementInternals to set
roleasimage, If keyboard users are expected to be able to interact with the generated charts (as opposed to just havingaria-labelto describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.
We want the chart to be interactive rather than a single static image, as its individual elements contain valuable information. For keyboard accessibility, we’ll use Tabster to create focusable groups within the chart. This will allow users to navigate within groups using arrow keys, while keeping the tab sequence concise and efficient.
A high-level note is, both components should probably use ElementInternals to set
roleasimage, If keyboard users are expected to be able to interact with the generated charts (as opposed to just havingaria-labelto describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.We want the chart to be interactive rather than a single static image, as its individual elements contain valuable information. For keyboard accessibility, we’ll use Tabster to create focusable groups within the chart. This will allow users to navigate within groups using arrow keys, while keeping the tab sequence concise and efficient.
Generally, interactive controls need a role. Image is not an interactive element. In terms of focus ability - that’s fine, besides “convenience”, why is tabster a necessary dependency?
A high-level note is, both components should probably use ElementInternals to set
roleasimage, If keyboard users are expected to be able to interact with the generated charts (as opposed to just havingaria-labelto describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.We want the chart to be interactive rather than a single static image, as its individual elements contain valuable information. For keyboard accessibility, we’ll use Tabster to create focusable groups within the chart. This will allow users to navigate within groups using arrow keys, while keeping the tab sequence concise and efficient.
Generally, interactive controls need a role. Image is not an interactive element. In terms of focus ability - that’s fine, besides “convenience”, why is tabster a necessary dependency?
Ok, then we can add a region role to the charts.
We are using Tabster primarily for convenience, but we might need grid navigation in the future. Implementing this could become cumbersome if we add custom event handlers. Could you suggest a better alternative?
A high-level note is, both components should probably use ElementInternals to set
roleasimage, If keyboard users are expected to be able to interact with the generated charts (as opposed to just havingaria-labelto describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.We want the chart to be interactive rather than a single static image, as its individual elements contain valuable information. For keyboard accessibility, we’ll use Tabster to create focusable groups within the chart. This will allow users to navigate within groups using arrow keys, while keeping the tab sequence concise and efficient.
Generally, interactive controls need a role. Image is not an interactive element. In terms of focus ability - that’s fine, besides “convenience”, why is tabster a necessary dependency?
Tabster supports the following functionalities that are needed for chart controls to be interactive.
- 2D grid navigation using arrow keys is required to allow to navigate in a dense chart that has a lot of data points and multiple data series.
- Grouping - This is needed to allow the user to easily navigate in and out of a deep nested structure using Enter/Esc keys.
- Interactivity - As user interacts with the controls using legends, some elements become inaccessible to provide a natural filter to help user understand the visual. We need a way to dynamically update the focusable elements to support interactivity.
- Outlining - The focus border might behave erratically if the parent style has overflow set as hidden. Tabster provides an easy way to handles this. In short, most of the functionality provided by tabster are needed to provide accessible access to the chart controls. The tabster concepts are explained here. https://tabster.io/docs/concept
But, in our testing we identified that the required functionalities are not working as expected as tabster is not integrated with shadow dom. Tracked using this bug https://github.com/microsoft/tabster/issues/340.
We will investigate and work with the tabster team to address the gaps. Or evaluate if tabbable can serve the P0 requirements.
For now removing the dependency on tabster and relying on out of box tabindex behavior.
A high-level note is, both components should probably use ElementInternals to set
roleasimage, If keyboard users are expected to be able to interact with the generated charts (as opposed to just havingaria-labelto describe the entire chart), I'm not sure if having every element in the tab sequence is very accessible, because a visual impaired user could feel stuck inside the chart and hard to get out of it.We want the chart to be interactive rather than a single static image, as its individual elements contain valuable information. For keyboard accessibility, we’ll use Tabster to create focusable groups within the chart. This will allow users to navigate within groups using arrow keys, while keeping the tab sequence concise and efficient.
Generally, interactive controls need a role. Image is not an interactive element. In terms of focus ability - that’s fine, besides “convenience”, why is tabster a necessary dependency?
We have added element internal apis for accessibility support.
🕵 fluentui-web-components-v3 No visual regressions between this PR and main
Saw this request and fui-wc review, so I've added some initial comments. I think the main areas of concern for me are:
- Use of Tabster - this would increase our bundle size by 50~75%
- Render functions seem overloaded with DOM manipulation functions. Seems like some of that could be cleaned up and abstracted out to the template.
To summarize, tabster is not working as expected for web components. It has been removed. The dom manipulation functions have been moved to the template. Some SVG specific manipulations are still in typescript code because svg generated via template is not showing in the DOM. Details are added in this comment. https://github.com/microsoft/fluentui/pull/33084#discussion_r1819304133