fix: Keytip passes through describedBy id if passed in

[smhigley]

Previous Behavior

In ContextualMenuItemAnchor and ContextualMenuItemButton, the item.ariaDescription's id was overridden and not correctly associated because the <KeytipData> component would ignore the ariaDescribedBy prop and return aria-describedby: undefined if no keytip data was passed in.

New Behavior

Keytip always returns the passed-in ariaDescribedBy id if present.

Related Issue(s)

• Fixes ADO bug

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react Breadcrumb	202.352 kB 60.468 kB	202.363 kB 60.471 kB	11 B 3 B
react Button	195.804 kB 56.69 kB	195.815 kB 56.692 kB	11 B 2 B
react ButtonGrid	180.738 kB 54.679 kB	180.749 kB 54.678 kB	11 B -1 B
react ComboBox	252.241 kB 72.386 kB	252.252 kB 72.387 kB	11 B 1 B
react CommandBar	203.393 kB 60.215 kB	203.404 kB 60.217 kB	11 B 2 B
react ContextualMenu	155.262 kB 48.229 kB	155.273 kB 48.228 kB	11 B -1 B
react Dialog	211.73 kB 63.231 kB	211.741 kB 63.231 kB	11 B
react DocumentCard	217.345 kB 64.51 kB	217.356 kB 64.51 kB	11 B
react Dropdown	234.291 kB 68.725 kB	234.302 kB 68.726 kB	11 B 1 B
react Facepile	210.944 kB 63.248 kB	210.955 kB 63.249 kB	11 B 1 B
react FloatingPicker	242.386 kB 69.079 kB	242.397 kB 69.083 kB	11 B 4 B
react Grid	180.738 kB 54.679 kB	180.749 kB 54.678 kB	11 B -1 B
react KeytipData	14.028 kB 4.587 kB	14.039 kB 4.588 kB	11 B 1 B
react Keytips	106.239 kB 33.023 kB	106.25 kB 33.023 kB	11 B
react MessageBar	190.868 kB 57.148 kB	190.879 kB 57.149 kB	11 B 1 B
react Nav	188.344 kB 56.572 kB	188.355 kB 56.574 kB	11 B 2 B
react Panel	201.402 kB 60.07 kB	201.413 kB 60.07 kB	11 B
react Pickers	294.408 kB 82.496 kB	294.419 kB 82.497 kB	11 B 1 B
react Pivot	189.236 kB 57.315 kB	189.247 kB 57.321 kB	11 B 6 B
react Fluent UI React (entire library)	1.015 MB 282.171 kB	1.015 MB 282.17 kB	11 B -1 B
react SearchBox	189.117 kB 56.732 kB	189.128 kB 56.732 kB	11 B
react SelectedItemsList	232.896 kB 67.972 kB	232.907 kB 67.972 kB	11 B
react SpinButton	192.82 kB 57.83 kB	192.831 kB 57.831 kB	11 B 1 B
react SwatchColorPicker	191.063 kB 58.182 kB	191.074 kB 58.182 kB	11 B
react TeachingBubble	206.119 kB 61.1 kB	206.13 kB 61.101 kB	11 B 1 B
react TimePicker	242.023 kB 70.134 kB	242.034 kB 70.135 kB	11 B 1 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react ActivityItem	71.236 kB 23.357 kB
react Announced	38.493 kB 13.297 kB
react Autofill	15.428 kB 4.768 kB
react Calendar	121.905 kB 37.046 kB
react Callout	84.33 kB 27.648 kB
react Check	53.204 kB 17.848 kB
react Checkbox	59.985 kB 19.903 kB
react ChoiceGroup	65.494 kB 21.489 kB
react ChoiceGroupOption	58.767 kB 19.362 kB
react Coachmark	93.151 kB 29.428 kB
react Color	7.789 kB 3.127 kB
react ColorPicker	135.359 kB 42.257 kB
react DatePicker	184.333 kB 56.194 kB
react DateTimeUtilities	5.244 kB 1.849 kB
react DetailsList	230.107 kB 65.952 kB
react Divider	19.603 kB 6.845 kB
react DragDrop	8.343 kB 2.724 kB
react DraggableZone	34.305 kB 11.509 kB
react ExtendedPicker	96.924 kB 27.92 kB
react Fabric	41.745 kB 14.366 kB
react FocusTrapZone	17.03 kB 5.924 kB
react FocusZone	55.182 kB 17.503 kB
react GroupedList	135.178 kB 40.798 kB
react GroupedListV2	122.767 kB 37.881 kB
react HoverCard	97.179 kB 30.82 kB
react Icon	51.885 kB 17.272 kB
react Icons	66.361 kB 24.397 kB
react Image	46.904 kB 15.707 kB
react Keytip	81.693 kB 26.766 kB
react KeytipLayer	103.478 kB 32.017 kB
react Label	38.347 kB 13.257 kB
react Layer	48.099 kB 16.367 kB
react Link	39.682 kB 13.67 kB
react List	39.4 kB 12.481 kB
react MarqueeSelection	74.541 kB 22.44 kB
react Modal	93.747 kB 30.278 kB
react OverflowSet	33.393 kB 11.329 kB
react Overlay	40.902 kB 14.095 kB
react Persona	114.967 kB 36.546 kB
react PersonaCoin	114.967 kB 36.546 kB
react PersonaPresence	58.074 kB 19.384 kB
react Popup	12.294 kB 4.195 kB
react Positioning	22.807 kB 7.701 kB
react PositioningContainer	73.85 kB 23.765 kB
react ProgressIndicator	39.504 kB 13.554 kB
react Rating	82.143 kB 26.144 kB
react ResizeGroup	13.338 kB 4.377 kB
react ResponsiveMode	8.13 kB 2.966 kB
react ScrollablePane	55.563 kB 17.734 kB
react SelectableOption	724 B 413 B
react Selection	42.464 kB 12.301 kB
react Separator	35.384 kB 12.146 kB
react Shimmer	49.259 kB 16.268 kB
react ShimmeredDetailsList	240.889 kB 68.7 kB
react Slider	57.651 kB 19.217 kB
react Spinner	41.777 kB 14.478 kB
react Stack	41.734 kB 14.268 kB
react Sticky	32.613 kB 10.509 kB
react Styling	46.033 kB 15.135 kB
react Text	36.908 kB 12.822 kB
react TextField	80.816 kB 25.332 kB
react Theme	43.501 kB 14.183 kB
react ThemeGenerator	12.392 kB 4.126 kB
react Toggle	46.225 kB 15.986 kB
react Tooltip	87.456 kB 28.268 kB
react Utilities	82.931 kB 25.148 kB
react Viewport	23.888 kB 7.656 kB
react WeeklyDayPicker	102.058 kB 31.861 kB
react WindowProvider	1.059 kB 541 B

_{🤖 This report was generated against e587e1f15731ecbecf356192f0b3dac71b5806ef}

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	618	617	5000
Breadcrumb	mount	1740	1699	1000
Checkbox	mount	1690	1700	5000
CheckboxBase	mount	1470	1492	5000
ChoiceGroup	mount	2936	2980	5000
ComboBox	mount	687	681	1000
CommandBar	mount	6649	6476	1000
ContextualMenu	mount	12050	12001	1000
DefaultButton	mount	797	787	5000
DetailsRow	mount	2262	2233	5000
DetailsRowFast	mount	2227	2213	5000
DetailsRowNoStyles	mount	2019	2050	5000
Dialog	mount	2852	2830	1000
DocumentCardTitle	mount	239	233	1000
Dropdown	mount	1997	2020	5000
FocusTrapZone	mount	1149	1154	5000
FocusZone	mount	1102	1082	5000
GroupedList	mount	42026	42289	2
GroupedList	virtual-rerender	20290	20361	2
GroupedList	virtual-rerender-with-unmount	51334	51768	2
GroupedListV2	mount	225	217	2
GroupedListV2	virtual-rerender	218	212	2
GroupedListV2	virtual-rerender-with-unmount	225	230	2
IconButton	mount	1144	1145	5000
Label	mount	336	346	5000
Layer	mount	2734	2764	5000
Link	mount	398	387	5000
MenuButton	mount	983	1000	5000
MessageBar	mount	21566	21653	5000
Nav	mount	2040	2063	1000
OverflowSet	mount	792	776	5000
Panel	mount	1862	1817	1000
Persona	mount	730	750	1000
Pivot	mount	907	915	1000
PrimaryButton	mount	938	926	5000
Rating	mount	4608	4706	5000
SearchBox	mount	960	922	5000
Shimmer	mount	1870	1864	5000
Slider	mount	1348	1345	5000
SpinButton	mount	2955	2943	5000
Spinner	mount	397	402	5000
SplitButton	mount	1921	1853	5000
Stack	mount	418	431	5000
StackWithIntrinsicChildren	mount	886	879	5000
StackWithTextChildren	mount	2770	2796	5000
SwatchColorPicker	mount	6312	6384	5000
TagPicker	mount	1430	1443	5000
Text	mount	387	394	5000
TextField	mount	913	910	5000
ThemeProvider	mount	851	869	5000
ThemeProvider	virtual-rerender	584	582	5000
ThemeProvider	virtual-rerender-with-unmount	1285	1385	5000
Toggle	mount	599	622	5000
buttonNative	mount	196	185	5000