Fix accessibility and consistency of MessageComposerButtons (#7679)

res/css/views/rooms/_MessageComposer.scss

@@ -192,11 +192,14 @@ limitations under the License.
     line-height: var(--size);
     width: auto;
     padding-left: var(--size);
-    border-radius: 100%;
-    margin-right: 6px;
 
-    &:last-child {
+    &:not(.mx_CallContextMenu_item) {
-        margin-right: auto;
+        border-radius: 50%;
+        margin-right: 6px;
+
+        &:last-child {
+            margin-right: auto;
+        }
     }
 
     &::before {
@@ -407,6 +410,7 @@ limitations under the License.
     align-items: center;
     max-width: unset;
     width: 100%;
+    margin: 7px 7px 7px 16px; // space out the buttons
 }
 
 .mx_MessageComposer_Menu .mx_ContextualMenu {

src/components/structures/ContextMenu.tsx

@@ -453,7 +453,13 @@ export const alwaysAboveRightOf = (elementRect: DOMRect, chevronFace = ChevronFa
     return menuOptions;
 };
 
-type ContextMenuTuple<T> = [boolean, RefObject<T>, () => void, () => void, (val: boolean) => void];
+type ContextMenuTuple<T> = [
+    boolean,
+    RefObject<T>,
+    (ev?: SyntheticEvent) => void,
+    (ev?: SyntheticEvent) => void,
+    (val: boolean) => void,
+];
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 export const useContextMenu = <T extends any = HTMLElement>(): ContextMenuTuple<T> => {
     const button = useRef<T>(null);

src/components/views/location/LocationButton.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactElement, useContext } from 'react';
+import React, { ReactElement, SyntheticEvent, useContext } from 'react';
 import classNames from 'classnames';
 import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
 import { logger } from "matrix-js-sdk/src/logger";
@@ -23,25 +23,29 @@ import { makeLocationContent } from "matrix-js-sdk/src/content-helpers";
 
 import { _t } from '../../../languageHandler';
 import LocationPicker from './LocationPicker';
-import { CollapsibleButton, ICollapsibleButtonProps } from '../rooms/CollapsibleButton';
+import { CollapsibleButton } from '../rooms/CollapsibleButton';
 import ContextMenu, { aboveLeftOf, useContextMenu, AboveLeftOf } from "../../structures/ContextMenu";
 import Modal from '../../../Modal';
 import QuestionDialog from '../dialogs/QuestionDialog';
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import { OverflowMenuContext } from "../rooms/MessageComposerButtons";
 
-interface IProps extends Pick<ICollapsibleButtonProps, "narrowMode"> {
+interface IProps {
     roomId: string;
     sender: RoomMember;
     menuPosition: AboveLeftOf;
-    narrowMode: boolean;
 }
 
-export const LocationButton: React.FC<IProps> = (
+export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition }) => {
-    { roomId, sender, menuPosition, narrowMode },
+    const overflowMenuCloser = useContext(OverflowMenuContext);
-) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
     const matrixClient = useContext(MatrixClientContext);
 
+    const _onFinished = (ev?: SyntheticEvent) => {
+        closeMenu(ev);
+        overflowMenuCloser?.();
+    };
+
     let contextMenu: ReactElement;
     if (menuDisplayed) {
         const position = menuPosition ?? aboveLeftOf(
@@ -49,13 +53,13 @@ export const LocationButton: React.FC<IProps> = (
 
         contextMenu = <ContextMenu
             {...position}
-            onFinished={closeMenu}
+            onFinished={_onFinished}
             managed={false}
         >
             <LocationPicker
                 sender={sender}
                 onChoose={shareLocation(matrixClient, roomId, openMenu)}
-                onFinished={closeMenu}
+                onFinished={_onFinished}
             />
         </ContextMenu>;
     }
@@ -74,7 +78,6 @@ export const LocationButton: React.FC<IProps> = (
         <CollapsibleButton
             className={className}
             onClick={openMenu}
-            narrowMode={narrowMode}
             title={_t("Share location")}
         />
 

src/components/views/rooms/CollapsibleButton.tsx

@@ -14,23 +14,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps } from 'react';
+import React, { ComponentProps, useContext } from 'react';
+import classNames from 'classnames';
 
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { MenuItem } from "../../structures/ContextMenu";
+import { OverflowMenuContext } from './MessageComposerButtons';
 
-export interface ICollapsibleButtonProps
+interface ICollapsibleButtonProps extends ComponentProps<typeof MenuItem> {
-    extends ComponentProps<typeof AccessibleTooltipButton>
-{
-    narrowMode: boolean;
     title: string;
 }
 
-export const CollapsibleButton = ({ narrowMode, title, ...props }: ICollapsibleButtonProps) => {
+export const CollapsibleButton = ({ title, className, ...props }: ICollapsibleButtonProps) => {
-    return <AccessibleTooltipButton
+    const inOverflowMenu = !!useContext(OverflowMenuContext);
-        {...props}
+    if (inOverflowMenu) {
-        title={narrowMode ? undefined : title}
+        return <MenuItem
-        label={narrowMode ? title : undefined}
+            {...props}
-    />;
+            className={classNames("mx_CallContextMenu_item", className)}
+        >
+            { title }
+        </MenuItem>;
+    }
+
+    return <AccessibleTooltipButton {...props} title={title} className={className} />;
 };
 
 export default CollapsibleButton;

src/components/views/rooms/MessageComposer.tsx

@@ -330,7 +330,10 @@ export default class MessageComposer extends React.Component<IProps, IState> {
     };
 
     private setStickerPickerOpen = (isStickerPickerOpen: boolean) => {
-        this.setState({ isStickerPickerOpen });
+        this.setState({
+            isStickerPickerOpen,
+            isMenuOpen: false,
+        });
     };
 
     private toggleButtonMenu = (): void => {
@@ -453,7 +456,12 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                             menuPosition={menuPosition}
                             narrowMode={this.state.narrowMode}
                             relation={this.props.relation}
-                            onRecordStartEndClick={() => this.voiceRecordingButton.current?.onRecordStartEndClick()}
+                            onRecordStartEndClick={() => {
+                                this.voiceRecordingButton.current?.onRecordStartEndClick();
+                                if (this.state.narrowMode) {
+                                    this.toggleButtonMenu();
+                                }
+                            }}
                             setStickerPickerOpen={this.setStickerPickerOpen}
                             showLocationButton={this.state.showLocationButton}
                             showStickersButton={this.state.showStickersButton}

src/components/views/rooms/MessageComposerButtons.tsx

@@ -17,14 +17,14 @@ limitations under the License.
 import classNames from 'classnames';
 import { IEventRelation } from "matrix-js-sdk/src/models/event";
 import { M_POLL_START } from "matrix-events-sdk";
-import React, { ReactElement, useContext } from 'react';
+import React, { createContext, ReactElement, useContext } from 'react';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 
 import { _t } from '../../../languageHandler';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import { CollapsibleButton, ICollapsibleButtonProps } from './CollapsibleButton';
+import { CollapsibleButton } from './CollapsibleButton';
-import ContextMenu, { aboveLeftOf, AboveLeftOf, MenuItem, useContextMenu } from '../../structures/ContextMenu';
+import ContextMenu, { aboveLeftOf, AboveLeftOf, useContextMenu } from '../../structures/ContextMenu';
 import dis from '../../../dispatcher/dispatcher';
 import EmojiPicker from '../emojipicker/EmojiPicker';
 import ErrorDialog from "../dialogs/ErrorDialog";
@@ -52,6 +52,9 @@ interface IProps {
     toggleButtonMenu: () => void;
 }
 
+type OverflowMenuCloser = () => void;
+export const OverflowMenuContext = createContext<OverflowMenuCloser | null>(null);
+
 const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
     const matrixClient: MatrixClient = useContext(MatrixClientContext);
     const { room, roomId } = useContext(RoomContext);
@@ -107,7 +110,6 @@ function narrowMode(
             className={moreOptionsClasses}
             onClick={props.toggleButtonMenu}
             title={_t("More options")}
-            tooltip={false}
         />
         { props.isMenuOpen && (
             <ContextMenu
@@ -115,15 +117,9 @@ function narrowMode(
                 {...props.menuPosition}
                 wrapperClassName="mx_MessageComposer_Menu"
             >
-                { moreButtons.map((button, index) => (
+                <OverflowMenuContext.Provider value={props.toggleButtonMenu}>
-                    <MenuItem
+                    { moreButtons }
-                        className="mx_CallContextMenu_item"
+                </OverflowMenuContext.Provider>
-                        key={index}
-                        onClick={props.toggleButtonMenu}
-                    >
-                        { button }
-                    </MenuItem>
-                )) }
             </ContextMenu>
         ) }
     </>;
@@ -134,18 +130,16 @@ function emojiButton(props: IProps): ReactElement {
         key="emoji_button"
         addEmoji={props.addEmoji}
         menuPosition={props.menuPosition}
-        narrowMode={props.narrowMode}
     />;
 }
 
-interface IEmojiButtonProps extends Pick<ICollapsibleButtonProps, "narrowMode"> {
+interface IEmojiButtonProps {
     addEmoji: (unicode: string) => boolean;
     menuPosition: AboveLeftOf;
 }
 
-const EmojiButton: React.FC<IEmojiButtonProps> = (
+const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition }) => {
-    { addEmoji, menuPosition, narrowMode },
+    const overflowMenuCloser = useContext(OverflowMenuContext);
-) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
 
     let contextMenu: React.ReactElement | null = null;
@@ -156,7 +150,10 @@ const EmojiButton: React.FC<IEmojiButtonProps> = (
 
         contextMenu = <ContextMenu
             {...position}
-            onFinished={closeMenu}
+            onFinished={() => {
+                closeMenu();
+                overflowMenuCloser?.();
+            }}
             managed={false}
         >
             <EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
@@ -177,7 +174,6 @@ const EmojiButton: React.FC<IEmojiButtonProps> = (
         <CollapsibleButton
             className={className}
             onClick={openMenu}
-            narrowMode={narrowMode}
             title={_t("Add emoji")}
         />
 
@@ -274,19 +270,18 @@ class UploadButton extends React.Component<IUploadButtonProps> {
 function showStickersButton(props: IProps): ReactElement {
     return (
         props.showStickersButton
-            ? <AccessibleTooltipButton
+            ? <CollapsibleButton
                 id='stickersButton'
                 key="controls_stickers"
                 className="mx_MessageComposer_button mx_MessageComposer_stickers"
                 onClick={() => props.setStickerPickerOpen(!props.isStickerPickerOpen)}
                 title={
                     props.narrowMode
-                        ? null
+                        ? _t("Send a sticker")
                         : props.isStickerPickerOpen
                             ? _t("Hide Stickers")
                             : _t("Show Stickers")
                 }
-                label={props.narrowMode ? _t("Send a sticker") : null}
             />
             : null
     );
@@ -302,25 +297,23 @@ function voiceRecordingButton(props: IProps): ReactElement {
                 className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
                 onClick={props.onRecordStartEndClick}
                 title={_t("Send voice message")}
-                narrowMode={props.narrowMode}
             />
     );
 }
 
 function pollButton(props: IProps, room: Room): ReactElement {
-    return <PollButton
+    return <PollButton key="polls" room={room} />;
-        key="polls"
-        room={room}
-        narrowMode={props.narrowMode}
-    />;
 }
 
-interface IPollButtonProps extends Pick<ICollapsibleButtonProps, "narrowMode"> {
+interface IPollButtonProps {
     room: Room;
 }
 
 class PollButton extends React.PureComponent<IPollButtonProps> {
+    static contextType = OverflowMenuContext;
+
     private onCreateClick = () => {
+        this.context?.(); // close overflow menu
         const canSend = this.props.room.currentState.maySendEvent(
             M_POLL_START.name,
             MatrixClientPeg.get().getUserId(),
@@ -357,7 +350,6 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
             <CollapsibleButton
                 className="mx_MessageComposer_button mx_MessageComposer_poll"
                 onClick={this.onCreateClick}
-                narrowMode={this.props.narrowMode}
                 title={_t("Create poll")}
             />
         );
@@ -377,7 +369,6 @@ function showLocationButton(
                 roomId={roomId}
                 sender={room.getMember(matrixClient.getUserId())}
                 menuPosition={props.menuPosition}
-                narrowMode={props.narrowMode}
             />
             : null
     );

src/i18n/strings/en_EN.json

@@ -1696,9 +1696,9 @@
     "Send voice message": "Send voice message",
     "Add emoji": "Add emoji",
     "Upload file": "Upload file",
+    "Send a sticker": "Send a sticker",
     "Hide Stickers": "Hide Stickers",
     "Show Stickers": "Show Stickers",
-    "Send a sticker": "Send a sticker",
     "You do not have permission to start polls in this room.": "You do not have permission to start polls in this room.",
     "Create poll": "Create poll",
     "Bold": "Bold",

test/components/views/rooms/MessageComposerButtons-test.tsx

@@ -77,6 +77,7 @@ describe("MessageComposerButtons", () => {
                 narrowMode={true}
                 showLocationButton={true}
                 showStickersButton={true}
+                toggleButtonMenu={() => {}}
             />,
         );
 
@@ -159,28 +160,28 @@ function createRoomState(room: Room): IRoomState {
 
 function buttonLabels(buttons: ReactWrapper): any[] {
     // Note: Depends on the fact that the mini buttons use aria-label
-    // and the labels under More options use label
+    // and the labels under More options use textContent
     const mainButtons = (
         buttons
-            .find('div')
+            .find('div.mx_MessageComposer_button[aria-label]')
-            .map((button: ReactWrapper) => button.prop("aria-label"))
+            .map((button: ReactWrapper) => button.prop("aria-label") as string)
             .filter(x => x)
     );
 
-    let extraButtons = (
+    const extraButtons = (
         buttons
-            .find('div')
+            .find('.mx_MessageComposer_Menu div.mx_AccessibleButton[role="menuitem"]')
-            .map((button: ReactWrapper) => button.prop("label"))
+            .map((button: ReactWrapper) => button.text())
             .filter(x => x)
     );
-    if (extraButtons.length === 0) {
+
-        extraButtons = [];
+    const list: any[] = [
-    } else {
+        ...mainButtons,
-        extraButtons = [extraButtons];
+    ];
+
+    if (extraButtons.length > 0) {
+        list.push(extraButtons);
     }
 
-    return [
+    return list;
-        ...mainButtons,
-        ...extraButtons,
-    ];
 }