fix: Keytip passes through describedBy id if passed in (#33048)

change/@fluentui-react-21794519-d3e0-4ade-b5f2-47752f379f80.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Keytip passes through describedBy id if passed in",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx

@@ -86,6 +86,25 @@ describe('ContextualMenuButton', () => {
 
       renderMock.mockRestore();
     });
+
+    it('renders a description when ariaDescription is passed in', () => {
+      const component = mount(
+        <ContextualMenuButton
+          item={{ ...menuItem, ariaDescription: 'test' }}
+          classNames={menuClassNames}
+          index={0}
+          focusableElementIndex={0}
+          totalItemCount={1}
+          hasCheckmarks={true}
+        />,
+      );
+
+      const descriptionId = component.find('button').at(0).getDOMNode().getAttribute('aria-describedby');
+      expect(descriptionId).toBeTruthy();
+
+      const descriptionEl = component.find(`#${descriptionId}`).at(0);
+      expect(descriptionEl.text()).toEqual('test');
+    });
   });
 });
 

packages/react/src/components/KeytipData/useKeytipData.ts

@@ -51,7 +51,7 @@ export function useKeytipData(options: KeytipDataOptions): IKeytipData {
   }, []);
 
   let nativeKeytipProps: IKeytipData = {
-    ariaDescribedBy: undefined,
+    ariaDescribedBy: options.ariaDescribedBy,
     keytipId: undefined,
   };