[a11y][bugfix] Add Close aria label for spotlight prompt (#5366)

* Add Close aria label for spotlight prompt * Change files * Update stable api files * Change files
Azure · Oct 28, 2024 · 36c8f34 · 36c8f34
1 parent f063458
commit 36c8f34
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 1 deletion.
diff --git a/change-beta/@azure-communication-react-3f2cb505-b6c4-4379-81fb-240ccd1eea31.json b/change-beta/@azure-communication-react-3f2cb505-b6c4-4379-81fb-240ccd1eea31.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Add Close aria label for spotlight prompt",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change-beta/@azure-communication-react-88f67533-e295-47ba-b755-11969a29471e.json b/change-beta/@azure-communication-react-88f67533-e295-47ba-b755-11969a29471e.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "fix",
+  "workstream": "a11y",
+  "comment": "Add Close aria label for spotlight prompt",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/communication-react/review/beta/communication-react.api.md b/packages/communication-react/review/beta/communication-react.api.md
@@ -4729,6 +4729,7 @@ export type SpotlightChangedListener = (args: {
 
 // @public
 export interface SpotlightPromptStrings {
+    closeSpotlightPromptButtonLabel: string;
     startSpotlightCancelButtonLabel: string;
     startSpotlightConfirmButtonLabel: string;
     startSpotlightHeading: string;

diff --git a/packages/communication-react/review/stable/communication-react.api.md b/packages/communication-react/review/stable/communication-react.api.md
@@ -4061,6 +4061,7 @@ export type SpotlightChangedListener = (args: {
 
 // @public
 export interface SpotlightPromptStrings {
+    closeSpotlightPromptButtonLabel: string;
     startSpotlightCancelButtonLabel: string;
     startSpotlightConfirmButtonLabel: string;
     startSpotlightHeading: string;

diff --git a/packages/react-composites/src/composites/CallComposite/components/Prompt.tsx b/packages/react-composites/src/composites/CallComposite/components/Prompt.tsx
@@ -139,4 +139,8 @@ export interface SpotlightPromptStrings {
    * Label for button to cancel stopping spotlight on participant(s) in prompt
    */
   stopSpotlightCancelButtonLabel: string;
+  /**
+   * Label for button to close prompt
+   */
+  closeSpotlightPromptButtonLabel: string;
 }
diff --git a/packages/react-composites/src/composites/CallComposite/utils/spotlightUtils.ts b/packages/react-composites/src/composites/CallComposite/utils/spotlightUtils.ts
@@ -50,6 +50,7 @@ const getStartLocalSpotlightWithPromptCallback = (
       text: strings.spotlightPrompt.startSpotlightOnSelfText,
       confirmButtonLabel: strings.spotlightPrompt.startSpotlightConfirmButtonLabel,
       cancelButtonLabel: strings.spotlightPrompt.startSpotlightCancelButtonLabel,
+      closeButtonLabel: strings.spotlightPrompt.closeSpotlightPromptButtonLabel,
       onConfirm: () => {
         onStartSpotlight();
         setIsPromptOpen(false);
@@ -129,6 +130,7 @@ const getStartRemoteSpotlightWithPromptCallback = (
       text: strings.spotlightPrompt.startSpotlightText,
       confirmButtonLabel: strings.spotlightPrompt.startSpotlightConfirmButtonLabel,
       cancelButtonLabel: strings.spotlightPrompt.startSpotlightCancelButtonLabel,
+      closeButtonLabel: strings.spotlightPrompt.closeSpotlightPromptButtonLabel,
       onConfirm: () => {
         onStartSpotlight(userIds);
         setIsPromptOpen(false);
@@ -155,6 +157,7 @@ const getStopRemoteSpotlightWithPromptCallback = (
       text: strings.spotlightPrompt.stopSpotlightText,
       confirmButtonLabel: strings.spotlightPrompt.stopSpotlightConfirmButtonLabel,
       cancelButtonLabel: strings.spotlightPrompt.stopSpotlightCancelButtonLabel,
+      closeButtonLabel: strings.spotlightPrompt.closeSpotlightPromptButtonLabel,
       onConfirm: () => {
         onStopSpotlight(userIds);
         setIsPromptOpen(false);
@@ -203,6 +206,7 @@ const getStopAllSpotlightCallbackWithPromptCallback = (
       text: strings.spotlightPrompt.stopAllSpotlightText,
       confirmButtonLabel: strings.spotlightPrompt.stopSpotlightConfirmButtonLabel,
       cancelButtonLabel: strings.spotlightPrompt.stopSpotlightCancelButtonLabel,
+      closeButtonLabel: strings.spotlightPrompt.closeSpotlightPromptButtonLabel,
       onConfirm: () => {
         stopAllSpotlight();
         setIsPromptOpen(false);

diff --git a/packages/react-composites/src/composites/localization/locales/en-US/strings.json b/packages/react-composites/src/composites/localization/locales/en-US/strings.json
@@ -327,7 +327,8 @@
       "stopAllSpotlightText": "The videos will no longer be highlighted for everyone in the meeting.",
       "stopSpotlightConfirmButtonLabel": "Stop spotlighting",
       "stopSpotlightOnSelfConfirmButtonLabel": "Exit spotlight",
-      "stopSpotlightCancelButtonLabel": "Cancel"
+      "stopSpotlightCancelButtonLabel": "Cancel",
+      "closeSpotlightPromptButtonLabel": "Close"
     },
     "exitSpotlightButtonLabel": "Exit spotlight",
     "exitSpotlightButtonTooltip": "Exit spotlight",