[A11y Ezra] Fix visible names for pinning, camera and mic buttons (#5079)

* Fix visible names for pinning, camera and mic buttons

* Change files

* build API

change-beta/@azure-communication-react-adee31e2-62cb-4055-8a4d-851707056dc5.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y Ezra",
+  "comment": "Fix visible names for pinning, camera and mic buttons",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-adee31e2-62cb-4055-8a4d-851707056dc5.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y Ezra",
+  "comment": "Fix visible names for pinning, camera and mic buttons",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -1648,6 +1648,7 @@ export type CameraButtonSelector = (state: CallClientState, props: CallingBaseSe
 export interface CameraButtonStrings {
     cameraActionTurnedOffAnnouncement?: string;
     cameraActionTurnedOnAnnouncement?: string;
+    cameraButtonAriaDescription?: string;
     cameraButtonSplitRoleDescription?: string;
     cameraMenuTitle: string;
     cameraMenuTooltip: string;
@@ -3800,6 +3801,7 @@ export type MicrophoneButtonSelector = (state: CallClientState, props: CallingBa
 export interface MicrophoneButtonStrings {
     microphoneActionTurnedOffAnnouncement?: string;
     microphoneActionTurnedOnAnnouncement?: string;
+    microphoneAriaDescription?: string;
     microphoneButtonSplitRoleDescription?: string;
     microphoneMenuTitle?: string;
     microphoneMenuTooltip?: string;

packages/communication-react/review/stable/communication-react.api.md

@@ -1277,6 +1277,7 @@ export type CameraButtonSelector = (state: CallClientState, props: CallingBaseSe
 export interface CameraButtonStrings {
     cameraActionTurnedOffAnnouncement?: string;
     cameraActionTurnedOnAnnouncement?: string;
+    cameraButtonAriaDescription?: string;
     cameraButtonSplitRoleDescription?: string;
     cameraMenuTitle: string;
     cameraMenuTooltip: string;
@@ -3043,6 +3044,7 @@ export type MicrophoneButtonSelector = (state: CallClientState, props: CallingBa
 export interface MicrophoneButtonStrings {
     microphoneActionTurnedOffAnnouncement?: string;
     microphoneActionTurnedOnAnnouncement?: string;
+    microphoneAriaDescription?: string;
     microphoneButtonSplitRoleDescription?: string;
     microphoneMenuTitle?: string;
     microphoneMenuTooltip?: string;

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

@@ -81,11 +81,14 @@ export interface CameraButtonStrings {
    * Title for primary action section of split button
    */
   cameraPrimaryActionSplitButtonTitle?: string;
-
   /**
    * Title for video effects menu item
    */
   videoEffectsMenuItemTitle?: string;
+  /**
+   * Aria description for camera button
+   */
+  cameraButtonAriaDescription?: string;
 }
 
 /**
@@ -296,6 +299,7 @@ export const CameraButton = (props: CameraButtonProps): JSX.Element => {
         }
         menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}
         split={props.split ?? props.enableDeviceSelectionMenu}
+        aria-description={strings.cameraButtonAriaDescription}
         aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}
         splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}
         splitButtonMenuProps={splitButtonMenuProps}

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

@@ -80,6 +80,10 @@ export interface MicrophoneButtonStrings {
    * Title for primary action section of split button
    */
   microphonePrimaryActionSplitButtonTitle?: string;
+  /**
+   * Aria description for the microphone button
+   */
+  microphoneAriaDescription?: string;
 }
 
 /**
@@ -266,6 +270,7 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
         aria-roledescription={
           props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined
         }
+        aria-description={strings.microphoneAriaDescription}
         splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}
         disabled={disabled}
         primaryDisabled={primaryDisabled}

packages/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts

@@ -128,7 +128,7 @@ export const useVideoTileContextualMenuProps = (props: {
           },
           'data-ui-id': 'video-tile-pin-participant-button',
           disabled: disablePinMenuItem || isSpotlighted,
-          ariaLabel: pinActionString
+          ariaLabel: strings.pinParticipantForMe
         });
       }
     }

packages/react-components/src/localization/locales/en-US/strings.json

@@ -99,14 +99,15 @@
     "cameraMenuTitle": "Camera",
     "cameraMenuTooltip": "Choose camera",
     "cameraButtonSplitRoleDescription": "Split button",
-    "onSplitButtonAriaLabel": "Turn off camera and camera options",
-    "offSplitButtonAriaLabel": "Turn on camera and camera options",
+    "onSplitButtonAriaLabel": "Turn off camera",
+    "offSplitButtonAriaLabel": "Turn on camera",
     "cameraActionTurnedOnAnnouncement": "Your camera has been turned on",
     "cameraActionTurnedOffAnnouncement": "Your camera has been turned off",
     "onSplitButtonPrimaryActionCamera": "Turn off camera",
     "offSplitButtonPrimaryActionCamera": "Turn on camera",
     "cameraPrimaryActionSplitButtonTitle": "Use camera",
-    "videoEffectsMenuItemTitle": "Effects"
+    "videoEffectsMenuItemTitle": "Effects",
+    "cameraButtonAriaDescription": "camera options"
   },
   "microphoneButton": {
     "onLabel": "Mic",
@@ -119,13 +120,14 @@
     "speakerMenuTitle": "Speaker",
     "speakerMenuTooltip": "Choose speaker",
     "microphoneButtonSplitRoleDescription": "Split button",
-    "onSplitButtonAriaLabel": "Mute microphone and audio options",
-    "offSplitButtonAriaLabel": "Unmute microphone and audio options",
+    "onSplitButtonAriaLabel": "Mute mic",
+    "offSplitButtonAriaLabel": "Unmute mic",
     "microphoneActionTurnedOnAnnouncement": "Your microphone has been turned on",
     "microphoneActionTurnedOffAnnouncement": "Your microphone has been turned off",
-    "offSplitButtonMicrophonePrimaryAction": "Unmute microphone",
-    "onSplitButtonMicrophonePrimaryAction": "Mute microphone",
-    "microphonePrimaryActionSplitButtonTitle": "Use microphone"
+    "offSplitButtonMicrophonePrimaryAction": "Unmute mic",
+    "onSplitButtonMicrophonePrimaryAction": "Mute mic",
+    "microphonePrimaryActionSplitButtonTitle": "Use microphone",
+    "microphoneAriaDescription": "Audio options"
   },
   "devicesButton": {
     "label": "Devices",