nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Ensure toolbar navigation pattern works in MessageActionBar (#31080)

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

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-10-27 12:34:17 +00:00
committed by GitHub
parent e528fefd4c
commit 8376e43a03
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/views/messages/MessageActionBar.tsx
View File

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