fix(fcc): accessibility issue fix for disabled audio and video button. (#848)

Co-authored-by: parv_gour <parv_gour@PAGOUR-M-D8B2>

Author: pagour98

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,14 +64,21 @@ 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')}
         type={controlTypeToButtonType[type] || 'default'}
         size={48}
         isDisabled={isDisabled}
         onClick={action}
-        ariaLabel={text || tooltip}
+        ariaLabel={ariaLabelText || tooltip}
         pressed={isActive && type === 'TOGGLE'}
         tooltip={tooltip}
         autoFocus={autoFocus}

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';