Arial label for close button, cancel and confirm button for prompt component (#6014)

* Arial label for close button, cancel and confirm button for prompt component

* optional

* api

Author: carocao-msft

change/@azure-communication-react-17c6d3ce-5ac5-4669-a10f-7a1100e8eefc.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Prompt",
+  "comment": "Arial label for close button, cancel and confirm button for prompt component",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -851,6 +851,7 @@ export interface CallCompositeStrings {
     captionsSettingsSpokenLanguageDropdownLabel?: string;
     chatButtonLabel: string;
     close: string;
+    closeButtonLabel?: string;
     complianceBannerNowOnlyRecording: string;
     complianceBannerNowOnlyTranscription: string;
     complianceBannerRecordingAndTranscriptionSaved: string;

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

@@ -699,6 +699,7 @@ export interface CallCompositeStrings {
     captionsSettingsSpokenLanguageDropdownLabel?: string;
     chatButtonLabel: string;
     close: string;
+    closeButtonLabel?: string;
     complianceBannerNowOnlyRecording: string;
     complianceBannerNowOnlyTranscription: string;
     complianceBannerRecordingAndTranscriptionSaved: string;

packages/react-composites/src/composites/CallComposite/Strings.tsx

@@ -912,6 +912,10 @@ export interface CallCompositeStrings {
    * Label for mute all cancel button
    */
   muteAllCancelButtonLabel: string;
+  /**
+   * Aria label for close button in modal dialogs
+   */
+  closeButtonLabel?: string;
   /**
    * Label for join breakout room button
    */

packages/react-composites/src/composites/CallComposite/components/Prompt.tsx

@@ -55,8 +55,18 @@ export const Prompt = (props: PromptProps): JSX.Element => {
         <Text className={mergeStyles({ fontSize: '0.875rem' })}>{props.text}</Text>
       </Stack>
       <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: '0.5rem' }}>
-        <PrimaryButton styles={buttonTextStyles} text={props.confirmButtonLabel} onClick={props.onConfirm} />
-        <DefaultButton styles={buttonTextStyles} text={props.cancelButtonLabel} onClick={props.onCancel} />
+        <PrimaryButton
+          styles={buttonTextStyles}
+          text={props.confirmButtonLabel}
+          ariaLabel={props.confirmButtonLabel}
+          onClick={props.onConfirm}
+        />
+        <DefaultButton
+          styles={buttonTextStyles}
+          text={props.cancelButtonLabel}
+          ariaLabel={props.cancelButtonLabel}
+          onClick={props.onCancel}
+        />
       </Stack>
     </Modal>
   );

packages/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx

@@ -102,13 +102,15 @@ export const usePeoplePane = (props: {
       confirmButtonLabel: localeStrings.muteAllConfirmButtonLabel,
       heading: localeStrings.muteAllDialogTitle,
       text: localeStrings.muteAllDialogContent,
-      cancelButtonLabel: localeStrings.muteAllCancelButtonLabel
+      cancelButtonLabel: localeStrings.muteAllCancelButtonLabel,
+      closeButtonLabel: localeStrings.closeButtonLabel
     }),
     [
       localeStrings.muteAllConfirmButtonLabel,
       localeStrings.muteAllDialogTitle,
       localeStrings.muteAllDialogContent,
-      localeStrings.muteAllCancelButtonLabel
+      localeStrings.muteAllCancelButtonLabel,
+      localeStrings.closeButtonLabel
     ]
   );
 
@@ -577,6 +579,7 @@ export const usePeoplePane = (props: {
             text={localeStrings.forbidOthersAudioDialogContent}
             confirmButtonLabel={localeStrings.forbidOthersAudioConfirmButtonLabel}
             cancelButtonLabel={localeStrings.forbidOthersAudioCancelButtonLabel}
+            closeButtonLabel={localeStrings.closeButtonLabel}
             styles={{ main: { minWidth: '22.5rem', padding: '1.5rem' } }}
             onConfirm={() => onForbidAllAttendeesPromptConfirm()}
             isOpen={showForbidOthersAudioPrompt}
@@ -589,6 +592,7 @@ export const usePeoplePane = (props: {
             text={localeStrings.permitOthersAudioDialogContent}
             confirmButtonLabel={localeStrings.permitOthersAudioConfirmButtonLabel}
             cancelButtonLabel={localeStrings.permitOthersAudioCancelButtonLabel}
+            closeButtonLabel={localeStrings.closeButtonLabel}
             styles={{ main: { minWidth: '22.5rem', padding: '1.5rem' } }}
             onConfirm={() => onPermitAllAttendeesPromptConfirm()}
             isOpen={showPermitOthersAudioPrompt}
@@ -601,6 +605,7 @@ export const usePeoplePane = (props: {
             text={localeStrings.forbidOthersVideoDialogContent}
             confirmButtonLabel={localeStrings.forbidOthersVideoConfirmButtonLabel}
             cancelButtonLabel={localeStrings.forbidOthersVideoCancelButtonLabel}
+            closeButtonLabel={localeStrings.closeButtonLabel}
             styles={{ main: { minWidth: '22.5rem', padding: '1.5rem' } }}
             onConfirm={() => onForbidOthersVideoPromptConfirm()}
             isOpen={showForbidOthersVideoPrompt}
@@ -613,6 +618,7 @@ export const usePeoplePane = (props: {
             text={localeStrings.permitOthersVideoDialogContent}
             confirmButtonLabel={localeStrings.permitOthersVideoConfirmButtonLabel}
             cancelButtonLabel={localeStrings.permitOthersVideoCancelButtonLabel}
+            closeButtonLabel={localeStrings.closeButtonLabel}
             styles={{ main: { minWidth: '22.5rem', padding: '1.5rem' } }}
             onConfirm={() => onPermitOthersVideoPromptConfirm()}
             isOpen={showPermitOthersVideoPrompt}

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

@@ -371,6 +371,7 @@
     "muteAllDialogContent": "This will mute everyone in the meeting but you.",
     "muteAllConfirmButtonLabel": "Mute all",
     "muteAllCancelButtonLabel": "Cancel",
+    "closeButtonLabel": "Close",
     "joinBreakoutRoomButtonLabel": "Join breakout room",
     "returnFromBreakoutRoomButtonLabel": "Leave room",
     "leaveBreakoutRoomAndMeetingButtonLabel": "Leave meeting",