Accessibility: keyboard navigation on the toolbar (Context menu) (#15060)

Accessibility: keyboard navigation on the toolbar (Context menu)

react/features/base/config/functions.any.ts

@@ -381,3 +381,21 @@ export function getLegalUrls(state: IReduxState) {
         terms: configLegalUrls?.terms || DEFAULT_TERMS_URL
     };
 }
+
+/**
+ * Utility function to debounce the execution of a callback function.
+ *
+ * @param {Function} callback - The callback to debounce.
+ * @param {number} delay - The debounce delay in milliseconds.
+ * @returns {Function} - A debounced function that delays the execution of the callback.
+ */
+export function debounce(callback: (...args: any[]) => void, delay: number) {
+    let timerId: any;
+
+    return (...args: any[]) => {
+        if (timerId) {
+            clearTimeout(timerId);
+        }
+        timerId = setTimeout(() => callback(...args), delay);
+    };
+}

react/features/settings/components/web/audio/AudioSettingsContent.tsx

@@ -281,6 +281,7 @@ const AudioSettingsContent = ({
 
     return (
         <ContextMenu
+            activateFocusTrap = { true }
             aria-labelledby = 'audio-settings-button'
             className = { classes.contextMenu }
             hidden = { false }

react/features/settings/components/web/video/VideoSettingsContent.tsx

@@ -301,6 +301,7 @@ const VideoSettingsContent = ({
 
     return (
         <ContextMenu
+            activateFocusTrap = { true }
             aria-labelledby = 'video-settings-button'
             className = { classes.container }
             hidden = { false }

react/features/toolbox/components/web/DialogPortal.ts

@@ -3,13 +3,14 @@ import ReactDOM from 'react-dom';
 import { useSelector } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
+import { debounce } from '../../../base/config/functions.any';
 import { ZINDEX_DIALOG_PORTAL } from '../../constants';
 
 interface IProps {
 
     /**
-     * The component(s) to be displayed within the drawer portal.
-     */
+    * The component(s) to be displayed within the drawer portal.
+    */
     children: ReactNode;
 
     /**
@@ -86,7 +87,7 @@ function DialogPortal({ children, className, style, getRef, setSize, targetSelec
             width: 1,
             height: 1
         };
-        const observer = new ResizeObserver(entries => {
+        const debouncedResizeCallback = debounce((entries: ResizeObserverEntry[]) => {
             const { contentRect } = entries[0];
 
             if (contentRect.width !== size.width || contentRect.height !== size.height) {
@@ -97,8 +98,10 @@ function DialogPortal({ children, className, style, getRef, setSize, targetSelec
                     onVisible?.();
                 }, 100);
             }
-        });
+        }, 20); // 20ms delay
 
+        // Create and observe ResizeObserver
+        const observer = new ResizeObserver(debouncedResizeCallback);
         const target = targetSelector ? portalTarget.querySelector(targetSelector) : portalTarget;
 
         if (document.body) {