fluentui
fluentui copied to clipboard
microsoft
fix aria role for draggable columns in DetailsList DetailsHeader
Previous Behavior
Currently for draggable columns in the DetailsList DetailsHeader the aria-role or aria-hidden is not defined, which does not conform to accessibility standards.
New Behavior
For the DetailsHeader in the DetailsList, if draggable columns are defined and a dropHint is rendered, set the drop hint to have aria-hidden=true to avoid triggering accessibility issue in accessibility insights.
Related Issue(s)
See issue: https://github.com/microsoft/fluentui/issues/31213
- Fixes #
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.
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
is there anything special I need to do to make these github actions run:
![azure-pipelines[bot] avatar](https://avatars.githubusercontent.com/in/9426?v=4 "Published by a pub.dev verified publisher"){kind=small}
is there anything special I need to do to make these github actions run:
They have to be run by a core team member. I just kicked em off for you.
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react DetailsList |
229.3 kB65.63 kB |
229.317 kB65.63 kB |
17 B |
| react Fluent UI React (entire library) |
1.012 MB281.033 kB |
1.012 MB281.033 kB |
17 B |
| react ShimmeredDetailsList |
240.075 kB68.397 kB |
240.092 kB68.397 kB |
17 B |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| react ActivityItem |
71.019 kB23.288 kB |
| react Announced |
38.291 kB13.239 kB |
| react Autofill |
15.365 kB4.743 kB |
| react Breadcrumb |
200.619 kB60.07 kB |
| react Button |
194.573 kB56.3 kB |
| react ButtonGrid |
180.349 kB54.518 kB |
| react Calendar |
121.542 kB36.943 kB |
| react Callout |
84.108 kB27.552 kB |
| react Check |
52.963 kB17.773 kB |
| react Checkbox |
59.751 kB19.806 kB |
| react ChoiceGroup |
65.276 kB21.438 kB |
| react ChoiceGroupOption |
58.531 kB19.309 kB |
| react Coachmark |
92.937 kB29.356 kB |
| react Color |
7.737 kB3.106 kB |
| react ColorPicker |
132.985 kB41.502 kB |
| react ComboBox |
250.194 kB71.86 kB |
| react CommandBar |
201.843 kB59.824 kB |
| react ContextualMenu |
154.789 kB48.068 kB |
| react DatePicker |
183.939 kB56.079 kB |
| react DateTimeUtilities |
5.244 kB1.849 kB |
| react Dialog |
209.943 kB62.812 kB |
| react Divider |
19.399 kB6.798 kB |
| react DocumentCard |
215.628 kB64.085 kB |
| react DragDrop |
8.343 kB2.724 kB |
| react DraggableZone |
34.109 kB11.448 kB |
| react Dropdown |
232.588 kB68.284 kB |
| react ExtendedPicker |
96.565 kB27.809 kB |
| react Fabric |
41.537 kB14.283 kB |
| react Facepile |
210.48 kB63.032 kB |
| react FloatingPicker |
240.713 kB68.651 kB |
| react FocusTrapZone |
16.975 kB5.917 kB |
| react FocusZone |
54.844 kB17.402 kB |
| react Grid |
180.349 kB54.518 kB |
| react GroupedList |
134.634 kB40.596 kB |
| react GroupedListV2 |
122.251 kB37.703 kB |
| react HoverCard |
96.969 kB30.741 kB |
| react Icon |
51.644 kB17.197 kB |
| react Icons |
66.305 kB24.379 kB |
| react Image |
46.701 kB15.646 kB |
| react Keytip |
81.482 kB26.712 kB |
| react KeytipData |
13.969 kB4.57 kB |
| react KeytipLayer |
103.278 kB31.961 kB |
| react Keytips |
106.046 kB32.966 kB |
| react Label |
38.134 kB13.207 kB |
| react Layer |
47.887 kB16.295 kB |
| react Link |
39.488 kB13.614 kB |
| react List |
39.176 kB12.384 kB |
| react MarqueeSelection |
74.321 kB22.385 kB |
| react MessageBar |
189.134 kB56.778 kB |
| react Modal |
93.44 kB30.18 kB |
| react Nav |
187.931 kB56.384 kB |
| react OverflowSet |
33.191 kB11.252 kB |
| react Overlay |
40.694 kB14.023 kB |
| react Panel |
199.654 kB59.727 kB |
| react Persona |
114.617 kB36.442 kB |
| react PersonaCoin |
114.617 kB36.442 kB |
| react PersonaPresence |
57.833 kB19.303 kB |
| react Pickers |
292.399 kB82.007 kB |
| react Pivot |
188.845 kB57.107 kB |
| react Popup |
12.242 kB4.181 kB |
| react Positioning |
22.608 kB7.63 kB |
| react PositioningContainer |
73.643 kB23.706 kB |
| react ProgressIndicator |
39.286 kB13.482 kB |
| react Rating |
81.762 kB26.057 kB |
| react ResizeGroup |
13.286 kB4.365 kB |
| react ResponsiveMode |
8.078 kB2.95 kB |
| react ScrollablePane |
55.325 kB17.669 kB |
| react SearchBox |
187.409 kB56.377 kB |
| react SelectableOption |
724 B413 B |
| react SelectedItemsList |
231.169 kB67.62 kB |
| react Selection |
42.252 kB12.203 kB |
| react Separator |
35.183 kB12.088 kB |
| react Shimmer |
49.049 kB16.206 kB |
| react Slider |
57.449 kB19.143 kB |
| react SpinButton |
191.137 kB57.503 kB |
| react Spinner |
41.481 kB14.412 kB |
| react Stack |
41.547 kB14.233 kB |
| react Sticky |
32.541 kB10.49 kB |
| react Styling |
45.853 kB15.082 kB |
| react SwatchColorPicker |
190.675 kB57.985 kB |
| react TeachingBubble |
204.685 kB60.713 kB |
| react Text |
36.723 kB12.763 kB |
| react TextField |
80.555 kB25.262 kB |
| react Theme |
43.321 kB14.129 kB |
| react ThemeGenerator |
12.34 kB4.106 kB |
| react TimePicker |
239.998 kB69.624 kB |
| react Toggle |
46.02 kB15.903 kB |
| react Tooltip |
87.136 kB28.164 kB |
| react Utilities |
82.495 kB25.047 kB |
| react Viewport |
23.703 kB7.589 kB |
| react WeeklyDayPicker |
101.682 kB31.738 kB |
| react WindowProvider |
1.059 kB541 B |
Perf Analysis (@fluentui/react)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 656 | 653 | 5000 | |
| Breadcrumb | mount | 1756 | 1757 | 1000 | |
| Checkbox | mount | 1696 | 1728 | 5000 | |
| CheckboxBase | mount | 1503 | 1503 | 5000 | |
| ChoiceGroup | mount | 3028 | 3007 | 5000 | |
| ComboBox | mount | 662 | 679 | 1000 | |
| CommandBar | mount | 6881 | 6908 | 1000 | |
| ContextualMenu | mount | 16305 | 16115 | 1000 | |
| DefaultButton | mount | 795 | 805 | 5000 | |
| DetailsRow | mount | 2262 | 2266 | 5000 | |
| DetailsRowFast | mount | 2293 | 2284 | 5000 | |
| DetailsRowNoStyles | mount | 2065 | 2051 | 5000 | |
| Dialog | mount | 2809 | 2644 | 1000 | |
| DocumentCardTitle | mount | 239 | 229 | 1000 | |
| Dropdown | mount | 2050 | 2036 | 5000 | |
| FocusTrapZone | mount | 1186 | 1182 | 5000 | |
| FocusZone | mount | 1114 | 1083 | 5000 | |
| GroupedList | mount | 38330 | 43200 | 2 | |
| GroupedList | virtual-rerender | 20521 | 20705 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 50976 | 51730 | 2 | |
| GroupedListV2 | mount | 246 | 219 | 2 | |
| GroupedListV2 | virtual-rerender | 209 | 223 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 218 | 218 | 2 | |
| IconButton | mount | 1142 | 1132 | 5000 | |
| Label | mount | 345 | 335 | 5000 | |
| Layer | mount | 2790 | 2724 | 5000 | |
| Link | mount | 401 | 413 | 5000 | |
| MenuButton | mount | 998 | 991 | 5000 | |
| MessageBar | mount | 21791 | 21805 | 5000 | |
| Nav | mount | 2062 | 2051 | 1000 | |
| OverflowSet | mount | 793 | 787 | 5000 | |
| Panel | mount | 2078 | 1807 | 1000 | |
| Persona | mount | 766 | 745 | 1000 | |
| Pivot | mount | 898 | 911 | 1000 | |
| PrimaryButton | mount | 942 | 925 | 5000 | |
| Rating | mount | 4735 | 4710 | 5000 | |
| SearchBox | mount | 947 | 905 | 5000 | |
| Shimmer | mount | 1927 | 1889 | 5000 | |
| Slider | mount | 1376 | 1361 | 5000 | |
| SpinButton | mount | 3041 | 3023 | 5000 | |
| Spinner | mount | 408 | 388 | 5000 | |
| SplitButton | mount | 1916 | 1931 | 5000 | |
| Stack | mount | 406 | 408 | 5000 | |
| StackWithIntrinsicChildren | mount | 864 | 887 | 5000 | |
| StackWithTextChildren | mount | 2625 | 2650 | 5000 | |
| SwatchColorPicker | mount | 6492 | 6517 | 5000 | |
| TagPicker | mount | 1486 | 1447 | 5000 | |
| Text | mount | 385 | 375 | 5000 | |
| TextField | mount | 961 | 960 | 5000 | |
| ThemeProvider | mount | 874 | 859 | 5000 | |
| ThemeProvider | virtual-rerender | 593 | 585 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1326 | 1304 | 5000 | |
| Toggle | mount | 589 | 629 | 5000 | |
| buttonNative | mount | 200 | 204 | 5000 |