From be3bd85bcacace242f29561d802f2e1f21d997f2 Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Tue, 14 Sep 2021 01:50:24 +0000
Subject: [PATCH 1/2] add group role | aria-label to virtual bg list | cam
 dropdown activate via keyboard

---
 .../imports/ui/components/menu/component.jsx               | 7 +++++++
 .../video-preview/virtual-background/component.jsx         | 6 +++++-
 .../video-list/video-list-item/component.jsx               | 2 +-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/menu/component.jsx b/bigbluebutton-html5/imports/ui/components/menu/component.jsx
index edc1b22927..207334db15 100644
--- a/bigbluebutton-html5/imports/ui/components/menu/component.jsx
+++ b/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}
diff --git a/bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx b/bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx
index 01c82fbfd5..7e1234a7cd 100644
--- a/bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx
@@ -126,7 +126,11 @@ 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}
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx
index 28a4202e60..cf526077fe 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx
+++ b/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",

From eef95165a6655ba5f864aada2014cfbbd4ad39f9 Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Tue, 14 Sep 2021 13:56:59 +0000
Subject: [PATCH 2/2] add aria-pressed to background thumbnails

---
 .../components/video-preview/virtual-background/component.jsx  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx b/bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx
index 7e1234a7cd..c1d8d28d7d 100644
--- a/bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx
@@ -136,6 +136,7 @@ const VirtualBgSelector = ({
               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}
@@ -156,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)}
@@ -176,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)}