Ensure elements with an ARIA role that require child roles contain them (#6011)

Signed-off-by: carocao-msft <96077406+carocao-msft@users.noreply.github.com>

Author: carocao-msft

change/@azure-communication-react-f3d44eb1-3728-4cee-a1a2-47b9f9bf4d2a.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Accessibility",
+  "comment": " Ensure elements with an ARIA role that require child roles contain them ",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/MicrophoneButton.tsx

@@ -262,9 +262,11 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
   if (props.showNoiseSuppressionButton) {
     splitButtonMenuItems.push({
       key: 'microphoneDNSToggle',
+      role: 'menuitem',
       onRender: () => {
         return (
           <Stack
+            role="menuitem"
             onClick={async () => {
               await props.onClickNoiseSuppression?.();
               setAnnouncerString(
@@ -295,7 +297,8 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
     iconProps: {
       iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',
       styles: { root: { lineHeight: 0 } }
-    }
+    },
+    role: 'menuitem'
   });
 
   /**