fix aria role for draggable columns in DetailsList DetailsHeader

[imatiach-msft]

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 #

[codesandbox-ci[bot]]

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.

[spmonahan]

Looks good to me. @smhigley what do you think?

[imatiach-msft]

is there anything special I need to do to make these github actions run:

[spmonahan]

/azp run

[azure-pipelines[bot]]

Azure Pipelines successfully started running 4 pipeline(s).

[spmonahan]

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.

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react DetailsList	229.3 kB 65.63 kB	229.317 kB 65.63 kB	17 B
react Fluent UI React (entire library)	1.012 MB 281.033 kB	1.012 MB 281.033 kB	17 B
react ShimmeredDetailsList	240.075 kB 68.397 kB	240.092 kB 68.397 kB	17 B

Unchanged fixtures

| Package & Exports | Size (minified/GZIP) | | ----------------- | -------------------: | | react
ActivityItem | `71.019 kB`
`23.288 kB` | | react
Announced | `38.291 kB`
`13.239 kB` | | react
Autofill | `15.365 kB`
`4.743 kB` | | react
Breadcrumb | `200.619 kB`
`60.07 kB` | | react
Button | `194.573 kB`
`56.3 kB` | | react
ButtonGrid | `180.349 kB`
`54.518 kB` | | react
Calendar | `121.542 kB`
`36.943 kB` | | react
Callout | `84.108 kB`
`27.552 kB` | | react
Check | `52.963 kB`
`17.773 kB` | | react
Checkbox | `59.751 kB`
`19.806 kB` | | react
ChoiceGroup | `65.276 kB`
`21.438 kB` | | react
ChoiceGroupOption | `58.531 kB`
`19.309 kB` | | react
Coachmark | `92.937 kB`
`29.356 kB` | | react
Color | `7.737 kB`
`3.106 kB` | | react
ColorPicker | `132.985 kB`
`41.502 kB` | | react
ComboBox | `250.194 kB`
`71.86 kB` | | react
CommandBar | `201.843 kB`
`59.824 kB` | | react
ContextualMenu | `154.789 kB`
`48.068 kB` | | react
DatePicker | `183.939 kB`
`56.079 kB` | | react
DateTimeUtilities | `5.244 kB`
`1.849 kB` | | react
Dialog | `209.943 kB`
`62.812 kB` | | react
Divider | `19.399 kB`
`6.798 kB` | | react
DocumentCard | `215.628 kB`
`64.085 kB` | | react
DragDrop | `8.343 kB`
`2.724 kB` | | react
DraggableZone | `34.109 kB`
`11.448 kB` | | react
Dropdown | `232.588 kB`
`68.284 kB` | | react
ExtendedPicker | `96.565 kB`
`27.809 kB` | | react
Fabric | `41.537 kB`
`14.283 kB` | | react
Facepile | `210.48 kB`
`63.032 kB` | | react
FloatingPicker | `240.713 kB`
`68.651 kB` | | react
FocusTrapZone | `16.975 kB`
`5.917 kB` | | react
FocusZone | `54.844 kB`
`17.402 kB` | | react
Grid | `180.349 kB`
`54.518 kB` | | react
GroupedList | `134.634 kB`
`40.596 kB` | | react
GroupedListV2 | `122.251 kB`
`37.703 kB` | | react
HoverCard | `96.969 kB`
`30.741 kB` | | react
Icon | `51.644 kB`
`17.197 kB` | | react
Icons | `66.305 kB`
`24.379 kB` | | react
Image | `46.701 kB`
`15.646 kB` | | react
Keytip | `81.482 kB`
`26.712 kB` | | react
KeytipData | `13.969 kB`
`4.57 kB` | | react
KeytipLayer | `103.278 kB`
`31.961 kB` | | react
Keytips | `106.046 kB`
`32.966 kB` | | react
Label | `38.134 kB`
`13.207 kB` | | react
Layer | `47.887 kB`
`16.295 kB` | | react
Link | `39.488 kB`
`13.614 kB` | | react
List | `39.176 kB`
`12.384 kB` | | react
MarqueeSelection | `74.321 kB`
`22.385 kB` | | react
MessageBar | `189.134 kB`
`56.778 kB` | | react
Modal | `93.44 kB`
`30.18 kB` | | react
Nav | `187.931 kB`
`56.384 kB` | | react
OverflowSet | `33.191 kB`
`11.252 kB` | | react
Overlay | `40.694 kB`
`14.023 kB` | | react
Panel | `199.654 kB`
`59.727 kB` | | react
Persona | `114.617 kB`
`36.442 kB` | | react
PersonaCoin | `114.617 kB`
`36.442 kB` | | react
PersonaPresence | `57.833 kB`
`19.303 kB` | | react
Pickers | `292.399 kB`
`82.007 kB` | | react
Pivot | `188.845 kB`
`57.107 kB` | | react
Popup | `12.242 kB`
`4.181 kB` | | react
Positioning | `22.608 kB`
`7.63 kB` | | react
PositioningContainer | `73.643 kB`
`23.706 kB` | | react
ProgressIndicator | `39.286 kB`
`13.482 kB` | | react
Rating | `81.762 kB`
`26.057 kB` | | react
ResizeGroup | `13.286 kB`
`4.365 kB` | | react
ResponsiveMode | `8.078 kB`
`2.95 kB` | | react
ScrollablePane | `55.325 kB`
`17.669 kB` | | react
SearchBox | `187.409 kB`
`56.377 kB` | | react
SelectableOption | `724 B`
`413 B` | | react
SelectedItemsList | `231.169 kB`
`67.62 kB` | | react
Selection | `42.252 kB`
`12.203 kB` | | react
Separator | `35.183 kB`
`12.088 kB` | | react
Shimmer | `49.049 kB`
`16.206 kB` | | react
Slider | `57.449 kB`
`19.143 kB` | | react
SpinButton | `191.137 kB`
`57.503 kB` | | react
Spinner | `41.481 kB`
`14.412 kB` | | react
Stack | `41.547 kB`
`14.233 kB` | | react
Sticky | `32.541 kB`
`10.49 kB` | | react
Styling | `45.853 kB`
`15.082 kB` | | react
SwatchColorPicker | `190.675 kB`
`57.985 kB` | | react
TeachingBubble | `204.685 kB`
`60.713 kB` | | react
Text | `36.723 kB`
`12.763 kB` | | react
TextField | `80.555 kB`
`25.262 kB` | | react
Theme | `43.321 kB`
`14.129 kB` | | react
ThemeGenerator | `12.34 kB`
`4.106 kB` | | react
TimePicker | `239.998 kB`
`69.624 kB` | | react
Toggle | `46.02 kB`
`15.903 kB` | | react
Tooltip | `87.136 kB`
`28.164 kB` | | react
Utilities | `82.495 kB`
`25.047 kB` | | react
Viewport | `23.703 kB`
`7.589 kB` | | react
WeeklyDayPicker | `101.682 kB`
`31.738 kB` | | react
WindowProvider | `1.059 kB`
`541 B` |

_{🤖 This report was generated against cd78d70a00dbeae15585494c8853a5a2730a9f7d}

[fabricteam]

🕵 fluentuiv8 No visual regressions between this PR and main

[fabricteam]

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

[imatiach-msft]

@smhigley gentle ping on this PR, thank you!