Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Sep 17, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fa0439a
- add focus trap to the under menu
ahmadkadri Aug 27, 2024
fe99747
move debounce function to functions.any
ahmadkadri Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions react/features/settings/components/web/audio/AudioSettingsContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,7 @@ const AudioSettingsContent = ({

return (
<ContextMenu
activateFocusTrap = { true }
aria-labelledby = 'audio-settings-button'
className = { classes.contextMenu }
hidden = { false }
Expand Down
1 change: 1 addition & 0 deletions react/features/settings/components/web/video/VideoSettingsContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,7 @@ const VideoSettingsContent = ({

return (
<ContextMenu
activateFocusTrap = { true }
aria-labelledby = 'video-settings-button'
className = { classes.container }
hidden = { false }
Expand Down
28 changes: 24 additions & 4 deletions react/features/toolbox/components/web/DialogPortal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ 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;

/**
Expand Down Expand Up @@ -44,6 +44,24 @@ interface IProps {
targetSelector?: string;
}

/**
* Utility function to debounce the execution of a callback function.
Copy link
Contributor

@Calinteodor Calinteodor Sep 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ahmadkadri Can you move this helper into functions.any and export it from there?
This might be useful in other cases.

*
* @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.
*/
const debounce = (callback: (...args: any[]) => void, delay: number) => {
let timerId: any;

return (...args: any[]) => {
if (timerId) {
clearTimeout(timerId);
}
timerId = setTimeout(() => callback(...args), delay);
};
};

/**
* Component meant to render a drawer at the bottom of the screen,
* by creating a portal containing the component's children.
Expand Down Expand Up @@ -86,7 +104,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) {
Expand All @@ -97,8 +115,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) {
Expand Down