diff --git a/webapp/channels/src/components/menu/menu.tsx b/webapp/channels/src/components/menu/menu.tsx index aeea0fa1fb7..c520ea95642 100644 --- a/webapp/channels/src/components/menu/menu.tsx +++ b/webapp/channels/src/components/menu/menu.tsx @@ -192,6 +192,13 @@ export function Menu(props: Props) { } } + function handleMenuButtonKeyDown(event: KeyboardEvent) { + if (event.key === 'Enter' || event.key === ' ') { + // Prevent the event from bubbling up to a parent's keydown handler so that it can trigger a click event + event.stopPropagation(); + } + } + // We construct the menu button so we can set onClick correctly here to support both web and mobile view function renderMenuButton() { const MenuButtonComponent = props.menuButton?.as ?? 'button'; @@ -208,6 +215,7 @@ export function Menu(props: Props) { aria-describedby={props.menuButton?.['aria-describedby']} className={props.menuButton?.class ?? ''} onClick={handleMenuButtonClick} + onKeyDown={handleMenuButtonKeyDown} > {props.menuButton.children} diff --git a/webapp/channels/src/components/menu/menu_item.tsx b/webapp/channels/src/components/menu/menu_item.tsx index e720adc3004..ec90a416bd0 100644 --- a/webapp/channels/src/components/menu/menu_item.tsx +++ b/webapp/channels/src/components/menu/menu_item.tsx @@ -149,12 +149,12 @@ export function MenuItem(props: Props) { function handleClick(event: MouseEvent | KeyboardEvent) { if (isCorrectKeyPressedOnMenuItem(event)) { + event.stopPropagation(); + // If the menu item is a checkbox or radio button, we don't want to close the menu when it is clicked. // unless forceCloseOnSelect is set to true. // see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/ - if (isRoleCheckboxOrRadio(role) && !forceCloseOnSelect) { - event.stopPropagation(); - } else { + if (!isRoleCheckboxOrRadio(role) || forceCloseOnSelect) { // close submenu first if it is open if (subMenuContext.close) { subMenuContext.close(); diff --git a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx index aa7891def2c..84113a59837 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx +++ b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx @@ -131,12 +131,6 @@ function ThreadItem({ } } - // Don't select the thread when a menu is focused - if (e.target instanceof HTMLElement && - (e.target.hasAttribute('aria-haspopup') || e.target.role === 'menuitem')) { - return; - } - if (e.altKey) { const hasUnreads = thread ? Boolean(thread.unread_replies) : false; const lastViewedAt = hasUnreads ? Date.now() : unreadTimestamp;