mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-09 04:31:15 +01:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 10 deletions
Show Stats 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,
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"