From de5c8672a21389055c45b5725b6ba55b0da8ca30 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 24 Oct 2025 11:47:26 +0100
Subject: [PATCH] Ensure toolbar navigation pattern works in MessageActionBar

This requires all buttons within to be roving by using the ref callback given by useRovingTabIndex

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/messages/MessageActionBar.tsx       | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index eb109028d95..aa3a5efe56d 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -80,8 +80,8 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
     onFocusChange,
     getRelationsForEvent,
 }) => {
-    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
-    const [onFocus, isActive] = useRovingTabIndex(button);
+    const [onFocus, isActive, buttonRefCallback, buttonRef] = useRovingTabIndex();
+    const [menuDisplayed, , openMenu, closeMenu] = useContextMenu(buttonRef);
     useEffect(() => {
         onFocusChange(menuDisplayed);
     }, [onFocusChange, menuDisplayed]);
@@ -101,11 +101,11 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
     );
 
     let contextMenu: ReactElement | undefined;
-    if (menuDisplayed && button.current) {
+    if (menuDisplayed && buttonRef.current) {
         const tile = getTile?.();
         const replyChain = getReplyChain();
 
-        const buttonRect = button.current.getBoundingClientRect();
+        const buttonRect = buttonRef.current.getBoundingClientRect();
         contextMenu = (
             <MessageContextMenu
                 {...aboveLeftOf(buttonRect)}
@@ -127,7 +127,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
                 onClick={onOptionsClick}
                 onContextMenu={onOptionsClick}
                 isExpanded={menuDisplayed}
-                ref={button}
+                ref={buttonRefCallback}
                 onFocus={onFocus}
                 tabIndex={isActive ? 0 : -1}
                 placement="left"
@@ -146,15 +146,15 @@ interface IReactButtonProps {
 }
 
 const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusChange }) => {
-    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
-    const [onFocus, isActive] = useRovingTabIndex(button);
+    const [onFocus, isActive, buttonRefCallback, buttonRef] = useRovingTabIndex();
+    const [menuDisplayed, , openMenu, closeMenu] = useContextMenu(buttonRef);
     useEffect(() => {
         onFocusChange(menuDisplayed);
     }, [onFocusChange, menuDisplayed]);
 
     let contextMenu: JSX.Element | undefined;
-    if (menuDisplayed && button.current) {
-        const buttonRect = button.current.getBoundingClientRect();
+    if (menuDisplayed && buttonRef.current) {
+        const buttonRect = buttonRef.current.getBoundingClientRect();
         contextMenu = (
             <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
                 <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
@@ -185,7 +185,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
                 onClick={onClick}
                 onContextMenu={onClick}
                 isExpanded={menuDisplayed}
-                ref={button}
+                ref={buttonRefCallback}
                 onFocus={onFocus}
                 tabIndex={isActive ? 0 : -1}
                 placement="left"