update virtual background image tooltip text

bigbluebutton-html5/imports/ui/components/video-preview/styles.scss

@@ -1,5 +1,9 @@
 @import "/imports/ui/stylesheets/variables/breakpoints";
 @import "/imports/ui/components/modal/simple/styles";
+@import '/imports/ui/stylesheets/mixins/focus';
+@import '/imports/ui/stylesheets/mixins/_indicators';
+@import '/imports/ui/components/loading-screen/styles';
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .warning {
   text-align: center;
@@ -20,41 +24,41 @@
 
 .actions {
   margin-left: auto;
-  margin-right: 3px;
+  margin-right: var(--border-size-large);
 
 
   [dir="rtl"] & {
     margin-right: auto;
-    margin-left: 3px;
+    margin-left: var(--border-size-large);
   }
 
   :first-child {
-    margin-right: 3px;
+    margin-right: var(--border-size-large);
     margin-left: inherit;
 
     [dir="rtl"] & {
       margin-right: inherit;
-      margin-left: 3px;
+      margin-left: var(--border-size-large);
     }
   }
 }
 
 .extraActions {
   margin-right: auto;
-  margin-left: 3px;
+  margin-left: var(--border-size-large);
 
   [dir="rtl"] & {
     margin-left: auto;
-    margin-right: 3px;
+    margin-right: var(--border-size-large);
   }
 
   :first-child {
-    margin-left: 3px;
+    margin-left: var(--border-size-large);
     margin-right: inherit;
 
     [dir="rtl"] & {
       margin-left: inherit;
-      margin-right: 3px;
+      margin-right: var(--border-size-large);
     }
   }
 }
@@ -151,14 +155,21 @@
 }
 
 .select {
-  margin-top: 0.4rem;
-  width: 100%;
-  height: 1.6rem;
-
-  color: var(--color-gray-label);
-  border-radius: 0.3rem;
+  @include elementFocus(var(--color-primary));
 
   background-color: var(--color-white);
+  border: var(--border-size) solid var(--color-white);
+  border-radius: var(--border-size);
+  border-bottom: 0.1rem solid var(--color-gray-lighter);
+  color: var(--color-gray-label);
+  width: 100%;
+  height: 1.75rem;
+  padding: 1px;
+
+  &:hover,
+  &:focus {
+    @extend %highContrastOutline;
+  }
 }
 
 .title {
@@ -170,7 +181,7 @@
 
 .browserWarning {
   padding: 0.5rem;
-  border-width: 3px;
+  border-width: var(--border-size-large);
   border-style: solid;
   border-radius: 0.25rem;
   margin: var(--line-height-computed);

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

@@ -10,7 +10,8 @@ import {
   IMAGE_NAMES,
   getVirtualBackgroundThumbnail,
   isVirtualBackgroundSupported,
-} from '/imports/ui/services/virtual-background/service'
+} from '/imports/ui/services/virtual-background/service';
+import { capitalizeFirstLetter } from '/imports/utils/string-utils';
 
 const propTypes = {
   intl: PropTypes.shape({
@@ -42,9 +43,9 @@ const intlMessages = defineMessages({
     id: 'app.video.virtualBackground.blur',
     description: 'Label for the blurred camera option',
   },
-  thumbnailLabel: {
-    id: 'app.video.virtualBackground.thumbnail',
-    description: 'Label for the image camera options',
+  camBgAriaDesc: {
+    id: 'app.video.virtualBackground.camBgAriaDesc',
+    description: 'Label for virtual background button aria',
   }
 });
 
@@ -61,21 +62,21 @@ const VirtualBgSelector = ({
 
   const inputElementsRef = useRef([]);
 
-  const _virtualBgSelected = (type, name, index) => {
-    handleVirtualBgSelected(type, name).then(switched => {
-      // Reset to the base NONE_TYPE effect if it failed because the expected
-      // behaviour from upstream's method is to actually stop/reset the effect
-      // service if it fails
-      if (!switched) {
-        return setCurrentVirtualBg({ type: EFFECT_TYPES.NONE_TYPE });
-      }
+  const _virtualBgSelected = (type, name, index) =>
+    handleVirtualBgSelected(type, name)
+      .then(switched => {
+        // Reset to the base NONE_TYPE effect if it failed because the expected
+        // behaviour from upstream's method is to actually stop/reset the effect
+        // service if it fails
+        if (!switched) {
+          return setCurrentVirtualBg({ type: EFFECT_TYPES.NONE_TYPE });
+        }
 
-      if (index >= 0) {
-        inputElementsRef.current[index].focus();
-      }
-      setCurrentVirtualBg({ type, name });
-    });
-  };
+        if (index >= 0) {
+          inputElementsRef.current[index].focus();
+        }
+        return setCurrentVirtualBg({ type, name });
+      });
 
   const renderDropdownSelector = () => {
     const disabled = locked || !isVirtualBackgroundSupported();
@@ -99,14 +100,17 @@ const VirtualBgSelector = ({
             {intl.formatMessage(intlMessages.blurLabel)}
           </option>
 
-          {IMAGE_NAMES.map((imageName, index) => (
-            <option key={`${imageName}-${index}`} value={JSON.stringify({
-              type: EFFECT_TYPES.IMAGE_TYPE,
-              name: imageName,
-            })}>
-            {imageName.split(".")[0]}
-          </option>
-          ))}
+          {IMAGE_NAMES.map((imageName, i) => {
+            const k = `${imageName}-${i}`;
+            return (
+              <option key={k} value={JSON.stringify({
+                type: EFFECT_TYPES.IMAGE_TYPE,
+                name: imageName,
+              })}>
+                {imageName.split(".")[0]}
+              </option>
+            );
+          })}
         </select>
       </div>
     );
@@ -118,47 +122,66 @@ const VirtualBgSelector = ({
     return (
       <div className={styles.virtualBackgroundRowThumbnail}>
         <div className={styles.bgWrapper}>
-          <Button
-            icon='close'
-            label={intl.formatMessage(intlMessages.noneLabel)}
-            hideLabel
-            disabled={disabled}
-            onClick={() => _virtualBgSelected(EFFECT_TYPES.NONE_TYPE)}
-          />
+          <>
+            <Button
+              className={styles.bgNone}
+              icon='close'
+              label={intl.formatMessage(intlMessages.noneLabel)}
+              aria-describedby={`vr-cam-btn-none`}
+              hideLabel
+              disabled={disabled}
+              onClick={() => _virtualBgSelected(EFFECT_TYPES.NONE_TYPE)}
+            />
+            <div aria-hidden className="sr-only" id={`vr-cam-btn-none`}>
+              {intl.formatMessage(intlMessages.camBgAriaDesc, { 0: EFFECT_TYPES.NONE_TYPE })}
+            </div>
+          </>
 
           <TooltipContainer title={intl.formatMessage(intlMessages.blurLabel)} key={`blur-0`}>
-            <input
-              type="image"
-              className={styles.virtualBackgroundItem}
-              alt="image-input"
-              aria-label={EFFECT_TYPES.BLUR_TYPE}
-              src={getVirtualBackgroundThumbnail(BLUR_FILENAME)}
-              disabled={disabled}
-              ref={ref => inputElementsRef.current[0] = ref}
-              onClick={() => _virtualBgSelected(EFFECT_TYPES.BLUR_TYPE, 'Blur', 0)}
-            />
+            <>
+              <div
+                role="button"
+                className={styles.virtualBackgroundItem}
+                aria-label={EFFECT_TYPES.BLUR_TYPE}
+                aria-describedby={`vr-cam-btn-blur`}
+                tabIndex={0}
+                disabled={disabled}
+                ref={ref => { inputElementsRef.current[0] = ref; }}
+                onClick={() => _virtualBgSelected(EFFECT_TYPES.BLUR_TYPE, 'Blur', 0)}
+              >
+                <img aria-hidden className={styles.bgImage} src={getVirtualBackgroundThumbnail(BLUR_FILENAME)} />
+              </div>
+              <div aria-hidden className="sr-only" id={`vr-cam-btn-blur`}>
+                {intl.formatMessage(intlMessages.camBgAriaDesc, { 0: EFFECT_TYPES.BLUR_TYPE })}
+              </div>
+            </>
           </TooltipContainer>
 
           {IMAGE_NAMES.map((imageName, index) => (
             <TooltipContainer
-              title={intl.formatMessage(
-                intlMessages.thumbnailLabel,
-                ({ 0: imageName }),
-              )}
+              title={capitalizeFirstLetter(imageName.split('.').shift())}
               key={`${imageName}-${index}`}
             >
-              <input
-                type="image"
-                className={styles.virtualBackgroundItem}
-                alt="image-input"
-                aria-label={imageName}
-                src={getVirtualBackgroundThumbnail(imageName)}
-                ref={ref => inputElementsRef.current[index + 1] = ref}
-                onClick={() => _virtualBgSelected(EFFECT_TYPES.IMAGE_TYPE, imageName, index + 1)}
-                disabled={disabled}
-              />
+              <>
+                <div
+                  tabIndex={0}
+                  role="button"
+                  className={styles.virtualBackgroundItem}
+                  aria-label={capitalizeFirstLetter(imageName.split('.').shift())}
+                  aria-describedby={`vr-cam-btn-${index}`}
+                  ref={ref => inputElementsRef.current[index + 1] = ref}
+                  onClick={() => _virtualBgSelected(EFFECT_TYPES.IMAGE_TYPE, imageName, index + 1)}
+                  disabled={disabled}
+                >
+                  <img aria-hidden className={styles.bgImage} src={getVirtualBackgroundThumbnail(imageName)} />
+                </div>
+                <div aria-hidden className="sr-only" id={`vr-cam-btn-${index}`}>
+                  {intl.formatMessage(intlMessages.camBgAriaDesc, { 0: capitalizeFirstLetter(imageName.split('.').shift()) })}
+                </div>
+            </>
             </TooltipContainer>
           ))}
+
         </div>
       </div>
     );

bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/styles.scss

@@ -31,8 +31,29 @@
   box-shadow: 0 0 0 var(--border-size) var(--btn-primary-border);
 }
 
+.virtualBackgroundItem {
+  outline: none;
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  border-radius: 3px;
+  cursor: pointer;
+  height: 48px;
+  width: 48px;
+}
+
 .bgWrapper {
   display: flex;
   justify-content: space-between;
-  overflow-x: auto;  
-}
+  overflow-x: auto;
+  margin: 3px;
+  padding: 3px;
+}
+
+.bgNone,
+.bgImage {
+  border-radius: 3px;
+  height: 46px;
+  width: 46px;
+}

bigbluebutton-html5/imports/utils/string-utils.js

@@ -0,0 +1,3 @@
+export const capitalizeFirstLetter = (s = '') => s.charAt(0).toUpperCase() + s.slice(1);
+
+export default { capitalizeFirstLetter };

bigbluebutton-html5/public/locales/en.json

@@ -730,8 +730,8 @@
     "app.video.clientDisconnected": "Webcam cannot be shared due to connection issues",
     "app.video.virtualBackground.none": "None",
     "app.video.virtualBackground.blur": "Blur",
-    "app.video.virtualBackground.thumbnail": "Thumbnail: {0}",
     "app.video.virtualBackground.genericError": "Failed to apply camera effect. Try again.",
+    "app.video.virtualBackground.camBgAriaDesc": "Sets webcam virtual background to {0}",
     "app.fullscreenButton.label": "Make {0} fullscreen",
     "app.fullscreenUndoButton.label": "Undo {0} fullscreen",
     "app.switchButton.expandLabel": "Expand screenshare video",