fix: DetailsColumn tooltip shows on focus, is associated via aria-describedby

[smhigley]

Previous Behavior

We provided an out-of-the-box method to create a DetailsColumn tooltip, but that tooltip wasn't keyboard accessible or associated via aria-describedby (with the exception of icon columns using column.ariaLabel).

New Behavior

Now, when using onRenderColumnHeaderTooltip, the tooltip shows/hides on column header focus and blur, and is associated via aria-describedby unless the tooltip is already using the column.ariaLabel text since we don't want the same text as both label & description.

The reason to add onFocus and onBlur events to the columnheader node + call .show() and .dismiss() was to avoid needing to rearrange the DOM to make the TooltipHost the parent of the focusable columnheader.

Related Issue(s)

• Fixes 16455

[codesandbox-ci]

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

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 1082207b08959996cd736725735cadc01d0849b0}

[fabricteam]

🕵 fluentuiv8 No visual regressions between this PR and main

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-ShimmeredDetailsList	235.403 kB	235.694 kB	291 bytes
office-ui-fabric-react	fluentui-react-DetailsList	224.651 kB	224.942 kB	291 bytes

 Over Tolerance (1024 B)  Over Baseline  Below Baseline  New   Removed 1 kB = 1000 B

Baseline commit: 1082207b08959996cd736725735cadc01d0849b0 (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	613	628	5000
Breadcrumb	mount	1665	1684	1000
Checkbox	mount	1694	1684	5000
CheckboxBase	mount	1508	1470	5000
ChoiceGroup	mount	2941	2955	5000
ComboBox	mount	651	652	1000
CommandBar	mount	6118	6186	1000
ContextualMenu	mount	12495	12531	1000
DefaultButton	mount	744	733	5000
DetailsRow	mount	2183	2189	5000
DetailsRowFast	mount	2182	2145	5000
DetailsRowNoStyles	mount	2019	2012	5000
Dialog	mount	2635	2817	1000
DocumentCardTitle	mount	218	235	1000
Dropdown	mount	1949	1949	5000
FocusTrapZone	mount	1109	1152	5000
FocusZone	mount	1079	998	5000
GroupedList	mount	41124	41249	2
GroupedList	virtual-rerender	19598	19848	2
GroupedList	virtual-rerender-with-unmount	50912	50762	2
GroupedListV2	mount	226	221	2
GroupedListV2	virtual-rerender	215	213	2
GroupedListV2	virtual-rerender-with-unmount	228	226	2
IconButton	mount	1064	1088	5000
Label	mount	335	344	5000
Layer	mount	2697	2700	5000
Link	mount	384	390	5000
MenuButton	mount	942	940	5000
MessageBar	mount	21828	21258	5000
Nav	mount	1977	1952	1000
OverflowSet	mount	783	774	5000
Panel	mount	1771	1754	1000
Persona	mount	730	735	1000
Pivot	mount	835	865	1000
PrimaryButton	mount	861	843	5000
Rating	mount	4548	4593	5000
SearchBox	mount	907	918	5000
Shimmer	mount	1854	1831	5000
Slider	mount	1283	1304	5000
SpinButton	mount	2937	2855	5000
Spinner	mount	386	376	5000
SplitButton	mount	1840	1800	5000
Stack	mount	396	401	5000
StackWithIntrinsicChildren	mount	881	867	5000
StackWithTextChildren	mount	2665	2626	5000
SwatchColorPicker	mount	6116	5978	5000
TagPicker	mount	1463	1440	5000
Text	mount	379	369	5000
TextField	mount	950	948	5000
ThemeProvider	mount	832	840	5000
ThemeProvider	virtual-rerender	588	590	5000
ThemeProvider	virtual-rerender-with-unmount	1279	1291	5000
Toggle	mount	607	599	5000
buttonNative	mount	184	190	5000