From c94e224456a8cadeb160b726d531474e0258751a Mon Sep 17 00:00:00 2001
From: pagour98 <pagour@cisco.com>
Date: Tue, 3 Dec 2024 13:31:07 +0530
Subject: [PATCH] fix(fcc): accessibility issue fix for disabled audio and
 video button. (#848)

Co-authored-by: parv_gour <parv_gour@PAGOUR-M-D8B2>
---
 .../WebexMeetingControl.jsx                    | 18 ++++++++++++++++--
 src/constants.js                               |  2 ++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/WebexMeetingControl/WebexMeetingControl.jsx b/src/components/WebexMeetingControl/WebexMeetingControl.jsx
index ef7bd3545..17c1f6fd9 100644
--- a/src/components/WebexMeetingControl/WebexMeetingControl.jsx
+++ b/src/components/WebexMeetingControl/WebexMeetingControl.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {MeetingControlState} from '@webex/component-adapter-interfaces';
-
+import {MUTE_AUDIO_CONTROL, MUTE_VIDEO_CONTROL} from '../../adapters/MeetingsJSONAdapter';
 import webexComponentClasses from '../helpers';
 import {useMeetingControl} from '../hooks';
 import Button from '../generic/Button/Button';
 import Icon from '../generic/Icon/Icon';
 import Dropdown from '../inputs/Dropdown/Dropdown';
+import {NO_MIC_ARIA_LABEL_TEXT, NO_CAMERA_ARIA_LABEL_TEXT} from '../../constants';
 
 const controlTypeToButtonType = {
   JOIN: 'join',
@@ -39,6 +40,12 @@ function renderButton(sc, action, display, style, showText, asItem, autoFocus, t
   } = display;
   const isDisabled = display.state === MeetingControlState.DISABLED;
   const isActive = display.state === MeetingControlState.ACTIVE;
+  let ariaLabelText = text;
+
+  const NO_MIC_CAMERA_ARIA_LABEL = {
+    NO_MIC_ARIA_LABEL: 'No microphone',
+    NO_CAMERA_ARIA_LABEL: 'No camera',
+  };
 
   let output;
 
@@ -57,6 +64,13 @@ function renderButton(sc, action, display, style, showText, asItem, autoFocus, t
       </Button>
     );
   } else {
+    if (display.ID === MUTE_AUDIO_CONTROL && display.state === MeetingControlState.DISABLED
+      && text === NO_MIC_CAMERA_ARIA_LABEL.NO_MIC_ARIA_LABEL) {
+      ariaLabelText = NO_MIC_ARIA_LABEL_TEXT;
+    } else if (display.ID === MUTE_VIDEO_CONTROL && display.state === MeetingControlState.DISABLED
+      && text === NO_MIC_CAMERA_ARIA_LABEL.NO_CAMERA_ARIA_LABEL) {
+      ariaLabelText = NO_CAMERA_ARIA_LABEL_TEXT;
+    }
     output = (
       <Button
         className={sc('control-button')}
@@ -64,7 +78,7 @@ function renderButton(sc, action, display, style, showText, asItem, autoFocus, t
         size={48}
         isDisabled={isDisabled}
         onClick={action}
-        ariaLabel={text || tooltip}
+        ariaLabel={ariaLabelText || tooltip}
         pressed={isActive && type === 'TOGGLE'}
         tooltip={tooltip}
         autoFocus={autoFocus}
diff --git a/src/constants.js b/src/constants.js
index 0576fdfe9..58a7f7ef5 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,3 +1,5 @@
 // Note, this string must match the one from src/styles/variables.scss
 // eslint-disable-next-line import/prefer-default-export
 export const WEBEX_COMPONENTS_CLASS_PREFIX = 'wxc';
+export const NO_MIC_ARIA_LABEL_TEXT = 'No Microphone, disabled';
+export const NO_CAMERA_ARIA_LABEL_TEXT = 'No Camera, disabled';