feat: enhance video background settings with accessibility improvements and focus management

Author: zskhan

apps/webapp/src/script/components/calling/FullscreenVideoCall.tsx

@@ -59,7 +59,7 @@ import {useToggleState} from 'src/script/hooks/useToggleState';
 import {CallViewTab} from 'src/script/view_model/CallingViewModel';
 import {useKoSubscribableChildren} from 'Util/componentUtil';
 import {isDetachedCallingFeatureEnabled} from 'Util/isDetachedCallingFeatureEnabled';
-import {handleKeyDown, KEY} from 'Util/keyboardUtil';
+import {handleKeyDown, isTabKey, KEY} from 'Util/keyboardUtil';
 import {t} from 'Util/localizerUtil';
 import {preventFocusOutside} from 'Util/util';
 
@@ -254,10 +254,14 @@ const FullscreenVideoCall = ({
         return;
       }
 
+      if (!isTabKey(event)) {
+        return;
+      }
+
       event.preventDefault();
       event.stopPropagation();
 
-      preventFocusOutside(event, 'video-calling', targetDocument);
+      preventFocusOutside(event, 'video-calling-wrapper', targetDocument);
     };
 
     targetDocument.addEventListener('keydown', onKeyDown);
@@ -301,6 +305,7 @@ const FullscreenVideoCall = ({
 
   return (
     <div
+      id="video-calling-wrapper"
       data-uie-name="fullscreen-video-call"
       className={cx('video-calling-wrapper', {
         'app--small-offset': hasOffset && isMiniMode,

apps/webapp/src/script/components/calling/VideoControls/VideoBackgroundSettings/VideoBackgroundSettings.styles.ts

@@ -79,6 +79,12 @@ export const sectionLabelStyles: CSSObject = {
   marginBottom: 8,
 };
 
+export const closeButtonStyles: CSSObject = {
+  '&:focus-visible': {
+    outlineOffset: '0.4rem',
+  },
+};
+
 /** 2-column grid for blur and virtual background tiles. */
 export const tileGridStyles: CSSObject = {
   display: 'grid',
@@ -97,6 +103,10 @@ export const tileButtonStyles: CSSObject = {
   padding: 0,
   textAlign: 'center',
 
+  '&:focus-visible': {
+    outline: 'none',
+  },
+
   '&:focus-visible .bg-tile__preview': {
     outline: '2px solid var(--accent-color-focus)',
     outlineOffset: 2,

apps/webapp/src/script/components/calling/VideoControls/VideoBackgroundSettings/VideoBackgroundSettings.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import {ChangeEvent, CSSProperties, ReactNode} from 'react';
+import {ChangeEvent, CSSProperties, ReactNode, useEffect, useId, useRef} from 'react';
 
 import {BlurHighIcon, BlurLowIcon, Checkbox, CheckboxLabel, CircleIcon} from '@wireapp/react-ui-kit';
 
@@ -31,6 +31,7 @@ import {
   backgroundSettingsScrollableContentStyles,
   backgroundSettingsTitleStyles,
   backgroundSettingsWrapperStyles,
+  closeButtonStyles,
   sectionLabelStyles,
   tileButtonStyles,
   tileGridStyles,
@@ -60,10 +61,26 @@ const isEffectSelected = (selected: BackgroundEffectSelection, candidate: Backgr
   return true;
 };
 
+const getBackgroundEffectLabel = (effect: BackgroundEffectSelection, backgrounds: BuiltinBackground[]): string => {
+  switch (effect.type) {
+    case 'none':
+      return t('videoCallBackgroundNoEffect');
+    case 'blur':
+      return effect.level === 'low' ? t('videoCallBackgroundBlurLow') : t('videoCallBackgroundBlurHigh');
+    case 'virtual': {
+      const background = backgrounds.find(({id}) => id === effect.backgroundId);
+      return background ? t(background.labelKey) : t('videoCallBackgroundVirtual');
+    }
+    default:
+      return t('videoCallBackgroundEffectsLabel');
+  }
+};
+
 interface BackgroundTileProps {
   effect: BackgroundEffectSelection;
   selectedEffect: BackgroundEffectSelection;
   onSelectEffect: (effect: BackgroundEffectSelection) => void;
+  ariaLabel: string;
   previewContent?: ReactNode;
   previewStyle?: CSSProperties;
 }
@@ -72,6 +89,7 @@ const BackgroundTile = ({
   effect,
   selectedEffect,
   onSelectEffect,
+  ariaLabel,
   previewContent,
   previewStyle,
 }: BackgroundTileProps) => {
@@ -81,7 +99,9 @@ const BackgroundTile = ({
       type="button"
       css={tileButtonStyles}
       data-selected={selected}
-      aria-pressed={selected}
+      role="radio"
+      aria-checked={selected}
+      aria-label={ariaLabel}
       onClick={() => onSelectEffect(effect)}
     >
       <div css={tilePreviewStyles} style={previewStyle} className="bg-tile__preview">
@@ -99,25 +119,54 @@ export const VideoBackgroundSettings = ({
   onEnableHighQualityBlur,
   onClose,
 }: VideoBackgroundSettingsProps) => {
+  const titleId = useId();
+  const blurSectionId = useId();
+  const virtualSectionId = useId();
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    closeButtonRef.current?.focus();
+  }, []);
+
   const handleEnableHighQualityBlur = (event: ChangeEvent<HTMLInputElement>) => {
     onEnableHighQualityBlur(event);
   };
 
+  const noneEffect: BackgroundEffectSelection = {type: 'none'};
+  const lowBlurEffect: BackgroundEffectSelection = {type: 'blur', level: 'low'};
+  const highBlurEffect: BackgroundEffectSelection = {type: 'blur', level: 'high'};
+
   return (
-    <div css={backgroundSettingsWrapperStyles} data-uie-name="video-background-settings">
+    <div
+      css={backgroundSettingsWrapperStyles}
+      data-uie-name="video-background-settings"
+      role="region"
+      aria-labelledby={titleId}
+    >
       <div css={backgroundSettingsHeaderStyles}>
-        <span css={backgroundSettingsTitleStyles}>{t('videoCallBackgroundEffectsLabel')}</span>
-        <button type="button" className="icon-button" onClick={onClose} title={t('modalCloseButton')}>
+        <h2 id={titleId} css={backgroundSettingsTitleStyles}>
+          {t('videoCallBackgroundEffectsLabel')}
+        </h2>
+        <button
+          ref={closeButtonRef}
+          type="button"
+          css={closeButtonStyles}
+          className="icon-button"
+          onClick={onClose}
+          aria-label={t('modalCloseButton')}
+          title={t('modalCloseButton')}
+        >
           <Icon.CloseIcon width={12} height={12} />
         </button>
       </div>
 
       <FadingScrollbar css={backgroundSettingsScrollableContentStyles}>
         {/* No background effect — full-width tile */}
         <BackgroundTile
-          effect={{type: 'none'}}
+          effect={noneEffect}
           selectedEffect={selectedEffect}
           onSelectEffect={onSelectEffect}
+          ariaLabel={getBackgroundEffectLabel(noneEffect, backgrounds)}
           previewContent={
             <div css={tilePreviewContentStyles}>
               <CircleIcon />
@@ -128,12 +177,15 @@ export const VideoBackgroundSettings = ({
 
         {/* Blur section */}
         <div>
-          <div css={sectionLabelStyles}>{t('videoCallBackgroundBlurSectionLabel')}</div>
-          <div css={tileGridStyles}>
+          <h3 id={blurSectionId} css={sectionLabelStyles}>
+            {t('videoCallBackgroundBlurSectionLabel')}
+          </h3>
+          <div css={tileGridStyles} role="group" aria-labelledby={blurSectionId}>
             <BackgroundTile
-              effect={{type: 'blur', level: 'low'}}
+              effect={lowBlurEffect}
               selectedEffect={selectedEffect}
               onSelectEffect={onSelectEffect}
+              ariaLabel={getBackgroundEffectLabel(lowBlurEffect, backgrounds)}
               previewContent={
                 <div css={tilePreviewContentStyles}>
                   <BlurLowIcon />
@@ -142,9 +194,10 @@ export const VideoBackgroundSettings = ({
               }
             />
             <BackgroundTile
-              effect={{type: 'blur', level: 'high'}}
+              effect={highBlurEffect}
               selectedEffect={selectedEffect}
               onSelectEffect={onSelectEffect}
+              ariaLabel={getBackgroundEffectLabel(highBlurEffect, backgrounds)}
               previewContent={
                 <div css={tilePreviewContentStyles}>
                   <BlurHighIcon />
@@ -171,19 +224,26 @@ export const VideoBackgroundSettings = ({
 
         {/* Virtual backgrounds section */}
         <div>
-          <div css={sectionLabelStyles}>{t('videoCallBackgroundVirtualSectionLabel')}</div>
-          <div css={tileGridStyles}>
-            {backgrounds.map(background => (
-              <BackgroundTile
-                key={background.id}
-                effect={{type: 'virtual', backgroundId: background.id}}
-                selectedEffect={selectedEffect}
-                onSelectEffect={onSelectEffect}
-                previewStyle={{
-                  backgroundImage: `url(${background.imageUrl}), ${background.previewGradient}`,
-                }}
-              />
-            ))}
+          <h3 id={virtualSectionId} css={sectionLabelStyles}>
+            {t('videoCallBackgroundVirtualSectionLabel')}
+          </h3>
+          <div css={tileGridStyles} role="group" aria-labelledby={virtualSectionId}>
+            {backgrounds.map(background => {
+              const virtualEffect: BackgroundEffectSelection = {type: 'virtual', backgroundId: background.id};
+
+              return (
+                <BackgroundTile
+                  key={background.id}
+                  effect={virtualEffect}
+                  selectedEffect={selectedEffect}
+                  onSelectEffect={onSelectEffect}
+                  ariaLabel={getBackgroundEffectLabel(virtualEffect, backgrounds)}
+                  previewStyle={{
+                    backgroundImage: `url(${background.imageUrl}), ${background.previewGradient}`,
+                  }}
+                />
+              );
+            })}
           </div>
         </div>
       </FadingScrollbar>