Merge pull request #13217 from KDSBrowne/BBB-wcag-07

WCAG2.1 - Webcam and settings

bigbluebutton-html5/imports/ui/components/menu/component.jsx

@@ -9,6 +9,8 @@ import { Divider } from "@material-ui/core";
 import Icon from "/imports/ui/components/icon/component";
 import Button from "/imports/ui/components/button/component";
 
+import { ENTER, SPACE } from "/imports/utils/keyCodes";
+
 import { styles } from "./styles";
 
 const intlMessages = defineMessages({
@@ -106,6 +108,11 @@ class BBBMenu extends React.Component {
             this.opts.autoFocus = !(['mouse', 'touch'].includes(e.nativeEvent.pointerType));
             this.handleClick(e);
           }}
+          onKeyPress={(e) => {
+            e.persist();
+            if (e.which !== ENTER) return null;
+            this.handleClick(e);
+          }}
           accessKey={this.props?.accessKey}
         >
           {trigger}

bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx

@@ -126,12 +126,17 @@ const VirtualBgSelector = ({
 
     return (
       <div className={styles.virtualBackgroundRowThumbnail}>
-        <div className={styles.bgWrapper}>
+        <div
+          role="group"
+          aria-label={intl.formatMessage(intlMessages.virtualBackgroundSettingsLabel)}
+          className={styles.bgWrapper}
+        >
           <>
             <Button
               className={styles.bgNone}
               icon='close'
               label={intl.formatMessage(intlMessages.noneLabel)}
+              aria-pressed={currentVirtualBg?.name === undefined}
               aria-describedby={`vr-cam-btn-none`}
               hideLabel
               tabIndex={disabled ? -1 : 0}
@@ -152,6 +157,7 @@ const VirtualBgSelector = ({
               aria-describedby={`vr-cam-btn-blur`}
               tabIndex={disabled ? -1 : 0}
               hideLabel
+              aria-pressed={currentVirtualBg?.name?.includes('blur') || currentVirtualBg?.name?.includes('Blur')}
               disabled={disabled}
               ref={ref => { inputElementsRef.current[0] = ref; }}
               onClick={() => _virtualBgSelected(EFFECT_TYPES.BLUR_TYPE, 'Blur', 0)}
@@ -172,6 +178,7 @@ const VirtualBgSelector = ({
                   className={thumbnailStyles.join(' ')}
                   aria-label={capitalizeFirstLetter(imageName.split('.').shift())}
                   aria-describedby={`vr-cam-btn-${index}`}
+                  aria-pressed={currentVirtualBg?.name?.includes(imageName.split('.').shift())}
                   hideLabel
                   ref={ref => inputElementsRef.current[index + 1] = ref}
                   onClick={() => _virtualBgSelected(EFFECT_TYPES.IMAGE_TYPE, imageName, index + 1)}

bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx

@@ -245,7 +245,7 @@ class VideoListItem extends Component {
               {enableVideoMenu && availableActions.length >= 1
                 ? (
                   <BBBMenu
-                    trigger={<div className={styles.dropdownTrigger}><span>{name}</span></div>}
+                    trigger={<div tabIndex={0} className={styles.dropdownTrigger}>{name}</div>}
                     actions={this.getAvailableActions()}
                     opts={{
                       id: "default-dropdown-menu",