Merge branch 'develop' into gsouquet/threaded-messaging-2349

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React, { ChangeEvent, createRef, FormEvent, MouseEvent } from 'react';
 import classNames from 'classnames';
 import { MatrixClient } from "matrix-js-sdk/src/client";
+import { AuthType, IAuthDict, IInputs, IStageStatus } from 'matrix-js-sdk/src/interactive-auth';
 
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -74,33 +75,6 @@ import CaptchaForm from "./CaptchaForm";
  *    focus: set the input focus appropriately in the form.
  */
 
-enum AuthType {
-    Password = "m.login.password",
-    Recaptcha = "m.login.recaptcha",
-    Terms = "m.login.terms",
-    Email = "m.login.email.identity",
-    Msisdn = "m.login.msisdn",
-    Sso = "m.login.sso",
-    SsoUnstable = "org.matrix.login.sso",
-}
-
-/* eslint-disable camelcase */
-interface IAuthDict {
-    type?: AuthType;
-    // TODO: Remove `user` once servers support proper UIA
-    // See https://github.com/vector-im/element-web/issues/10312
-    user?: string;
-    identifier?: any;
-    password?: string;
-    response?: string;
-    // TODO: Remove `threepid_creds` once servers support proper UIA
-    // See https://github.com/vector-im/element-web/issues/10312
-    // See https://github.com/matrix-org/matrix-doc/issues/2220
-    threepid_creds?: any;
-    threepidCreds?: any;
-}
-/* eslint-enable camelcase */
-
 export const DEFAULT_PHASE = 0;
 
 interface IAuthEntryProps {
@@ -835,7 +809,26 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
     }
 }
 
-export default function getEntryComponentForLoginType(loginType: AuthType): typeof React.Component {
+export interface IStageComponentProps extends IAuthEntryProps {
+    clientSecret?: string;
+    stageParams?: Record<string, any>;
+    inputs?: IInputs;
+    stageState?: IStageStatus;
+    showContinue?: boolean;
+    continueText?: string;
+    continueKind?: string;
+    fail?(e: Error): void;
+    setEmailSid?(sid: string): void;
+    onCancel?(): void;
+}
+
+export interface IStageComponent extends React.ComponentClass<React.PropsWithRef<IStageComponentProps>> {
+    tryContinue?(): void;
+    attemptFailed?(): void;
+    focus?(): void;
+}
+
+export default function getEntryComponentForLoginType(loginType: AuthType): IStageComponent {
     switch (loginType) {
         case AuthType.Password:
             return PasswordAuthEntry;

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import AccessibleButton from "../elements/AccessibleButton";
+import * as React from "react";
+import { createRef } from "react";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import { ContextMenu, IProps as IContextMenuProps } from '../../structures/ContextMenu';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import Field from "../elements/Field";
@@ -32,6 +33,8 @@ interface IState {
 
 @replaceableComponent("views.context_menus.DialpadContextMenu")
 export default class DialpadContextMenu extends React.Component<IProps, IState> {
+    private numberEntryFieldRef: React.RefObject<Field> = createRef();
+
     constructor(props) {
         super(props);
 
@@ -40,9 +43,16 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
         };
     }
 
-    onDigitPress = (digit) => {
+    onDigitPress = (digit: string, ev: ButtonEvent) => {
         this.props.call.sendDtmfDigit(digit);
         this.setState({ value: this.state.value + digit });
+
+        // Keep the number field focused so that keyboard entry is still available
+        // However, don't focus if this wasn't the result of directly clicking on the button,
+        // i.e someone using keyboard navigation.
+        if (ev.type === "click") {
+            this.numberEntryFieldRef.current?.focus();
+        }
     };
 
     onCancelClick = () => {
@@ -68,6 +78,7 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
                 </div>
                 <div className="mx_DialPadContextMenu_header">
                     <Field
+                        ref={this.numberEntryFieldRef}
                         className="mx_DialPadContextMenu_dialled"
                         value={this.state.value}
                         autoFocus={true}

src/components/views/context_menus/TagTileContextMenu.js

@@ -24,6 +24,8 @@ import { MenuItem } from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
+import { createSpaceFromCommunity } from "../../../utils/space";
+import GroupStore from "../../../stores/GroupStore";
 
 @replaceableComponent("views.context_menus.TagTileContextMenu")
 export default class TagTileContextMenu extends React.Component {
@@ -49,6 +51,11 @@ export default class TagTileContextMenu extends React.Component {
         this.props.onFinished();
     };
 
+    _onCreateSpaceClick = () => {
+        createSpaceFromCommunity(this.context, this.props.tag);
+        this.props.onFinished();
+    };
+
     _onMoveUp = () => {
         dis.dispatch(TagOrderActions.moveTag(this.context, this.props.tag, this.props.index - 1));
         this.props.onFinished();
@@ -77,6 +84,16 @@ export default class TagTileContextMenu extends React.Component {
             );
         }
 
+        let createSpaceOption;
+        if (GroupStore.isUserPrivileged(this.props.tag)) {
+            createSpaceOption = <>
+                <hr className="mx_TagTileContextMenu_separator" role="separator" />
+                <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_createSpace" onClick={this._onCreateSpaceClick}>
+                    { _t("Create Space") }
+                </MenuItem>
+            </>;
+        }
+
         return <div>
             <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_viewCommunity" onClick={this._onViewCommunityClick}>
                 { _t('View Community') }
@@ -88,6 +105,7 @@ export default class TagTileContextMenu extends React.Component {
             <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_hideCommunity" onClick={this._onRemoveClick}>
                 { _t("Unpin") }
             </MenuItem>
+            { createSpaceOption }
         </div>;
     }
 }

src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx

@@ -0,0 +1,340 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useEffect, useRef, useState } from "react";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { _t } from '../../../languageHandler';
+import BaseDialog from "./BaseDialog";
+import AccessibleButton from "../elements/AccessibleButton";
+import { createSpace, SpaceCreateForm } from "../spaces/SpaceCreateMenu";
+import JoinRuleDropdown from "../elements/JoinRuleDropdown";
+import Field from "../elements/Field";
+import RoomAliasField from "../elements/RoomAliasField";
+import { GroupMember } from "../right_panel/UserInfo";
+import { parseMembersResponse, parseRoomsResponse } from "../../../stores/GroupStore";
+import { calculateRoomVia, makeRoomPermalink } from "../../../utils/permalinks/Permalinks";
+import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
+import Spinner from "../elements/Spinner";
+import { mediaFromMxc } from "../../../customisations/Media";
+import SpaceStore from "../../../stores/SpaceStore";
+import Modal from "../../../Modal";
+import InfoDialog from "./InfoDialog";
+import dis from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import { UserTab } from "./UserSettingsDialog";
+import TagOrderActions from "../../../actions/TagOrderActions";
+
+interface IProps {
+    matrixClient: MatrixClient;
+    groupId: string;
+    onFinished(spaceId?: string): void;
+}
+
+export const CreateEventField = "io.element.migrated_from_community";
+
+interface IGroupRoom {
+    displayname: string;
+    name?: string;
+    roomId: string;
+    canonicalAlias?: string;
+    avatarUrl?: string;
+    topic?: string;
+    numJoinedMembers?: number;
+    worldReadable?: boolean;
+    guestCanJoin?: boolean;
+    isPublic?: boolean;
+}
+
+/* eslint-disable camelcase */
+export interface IGroupSummary {
+    profile: {
+        avatar_url?: string;
+        is_openly_joinable?: boolean;
+        is_public?: boolean;
+        long_description: string;
+        name: string;
+        short_description: string;
+    };
+    rooms_section: {
+        rooms: unknown[];
+        categories: Record<string, unknown>;
+        total_room_count_estimate: number;
+    };
+    user: {
+        is_privileged: boolean;
+        is_public: boolean;
+        is_publicised: boolean;
+        membership: string;
+    };
+    users_section: {
+        users: unknown[];
+        roles: Record<string, unknown>;
+        total_user_count_estimate: number;
+    };
+}
+/* eslint-enable camelcase */
+
+const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, groupId, onFinished }) => {
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string>(null);
+    const [busy, setBusy] = useState(false);
+
+    const [avatar, setAvatar] = useState<File>(null); // undefined means to remove avatar
+    const [name, setName] = useState("");
+    const spaceNameField = useRef<Field>();
+    const [alias, setAlias] = useState("#" + groupId.substring(1, groupId.indexOf(":")) + ":" + cli.getDomain());
+    const spaceAliasField = useRef<RoomAliasField>();
+    const [topic, setTopic] = useState("");
+    const [joinRule, setJoinRule] = useState<JoinRule>(JoinRule.Public);
+
+    const groupSummary = useAsyncMemo<IGroupSummary>(() => cli.getGroupSummary(groupId), [groupId]);
+    useEffect(() => {
+        if (groupSummary) {
+            setName(groupSummary.profile.name || "");
+            setTopic(groupSummary.profile.short_description || "");
+            setJoinRule(groupSummary.profile.is_openly_joinable ? JoinRule.Public : JoinRule.Invite);
+            setLoading(false);
+        }
+    }, [groupSummary]);
+
+    if (loading) {
+        return <Spinner />;
+    }
+
+    const onCreateSpaceClick = async (e) => {
+        e.preventDefault();
+        if (busy) return;
+
+        setError(null);
+        setBusy(true);
+
+        // require & validate the space name field
+        if (!await spaceNameField.current.validate({ allowEmpty: false })) {
+            setBusy(false);
+            spaceNameField.current.focus();
+            spaceNameField.current.validate({ allowEmpty: false, focused: true });
+            return;
+        }
+        // validate the space name alias field but do not require it
+        if (joinRule === JoinRule.Public && !await spaceAliasField.current.validate({ allowEmpty: true })) {
+            setBusy(false);
+            spaceAliasField.current.focus();
+            spaceAliasField.current.validate({ allowEmpty: true, focused: true });
+            return;
+        }
+
+        try {
+            const [rooms, members, invitedMembers] = await Promise.all([
+                cli.getGroupRooms(groupId).then(parseRoomsResponse) as Promise<IGroupRoom[]>,
+                cli.getGroupUsers(groupId).then(parseMembersResponse) as Promise<GroupMember[]>,
+                cli.getGroupInvitedUsers(groupId).then(parseMembersResponse) as Promise<GroupMember[]>,
+            ]);
+
+            const viaMap = new Map<string, string[]>();
+            for (const { roomId, canonicalAlias } of rooms) {
+                const room = cli.getRoom(roomId);
+                if (room) {
+                    viaMap.set(roomId, calculateRoomVia(room));
+                } else if (canonicalAlias) {
+                    try {
+                        const { servers } = await cli.getRoomIdForAlias(canonicalAlias);
+                        viaMap.set(roomId, servers);
+                    } catch (e) {
+                        console.warn("Failed to resolve alias during community migration", e);
+                    }
+                }
+
+                if (!viaMap.get(roomId)?.length) {
+                    // XXX: lets guess the via, this might end up being incorrect.
+                    const str = canonicalAlias || roomId;
+                    viaMap.set(roomId, [str.substring(1, str.indexOf(":"))]);
+                }
+            }
+
+            const spaceAvatar = avatar !== undefined ? avatar : groupSummary.profile.avatar_url;
+            const roomId = await createSpace(name, joinRule === JoinRule.Public, alias, topic, spaceAvatar, {
+                creation_content: {
+                    [CreateEventField]: groupId,
+                },
+                initial_state: rooms.map(({ roomId }) => ({
+                    type: EventType.SpaceChild,
+                    state_key: roomId,
+                    content: {
+                        via: viaMap.get(roomId) || [],
+                    },
+                })),
+                invite: [...members, ...invitedMembers].map(m => m.userId).filter(m => m !== cli.getUserId()),
+            }, {
+                andView: false,
+            });
+
+            // eagerly remove it from the community panel
+            dis.dispatch(TagOrderActions.removeTag(cli, groupId));
+
+            // don't bother awaiting this, as we don't hugely care if it fails
+            cli.setGroupProfile(groupId, {
+                ...groupSummary.profile,
+                long_description: `<a href="${makeRoomPermalink(roomId)}"><h1>` +
+                    _t("This community has been upgraded into a Space") + `</h1></a><br />`
+                    + groupSummary.profile.long_description,
+            } as IGroupSummary["profile"]).catch(e => {
+                console.warn("Failed to update community profile during migration", e);
+            });
+
+            onFinished(roomId);
+
+            const onSpaceClick = () => {
+                dis.dispatch({
+                    action: "view_room",
+                    room_id: roomId,
+                });
+            };
+
+            const onPreferencesClick = () => {
+                dis.dispatch({
+                    action: Action.ViewUserSettings,
+                    initialTabId: UserTab.Preferences,
+                });
+            };
+
+            let spacesDisabledCopy;
+            if (!SpaceStore.spacesEnabled) {
+                spacesDisabledCopy = _t("To view Spaces, hide communities in <a>Preferences</a>", {}, {
+                    a: sub => <AccessibleButton onClick={onPreferencesClick} kind="link">{ sub }</AccessibleButton>,
+                });
+            }
+
+            Modal.createDialog(InfoDialog, {
+                title: _t("Space created"),
+                description: <>
+                    <div className="mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog_checkmark" />
+                    <p>
+                        { _t("<SpaceName/> has been made and everyone who was a part of the community has " +
+                            "been invited to it.", {}, {
+                            SpaceName: () => <AccessibleButton onClick={onSpaceClick} kind="link">
+                                { name }
+                            </AccessibleButton>,
+                        }) }
+                        &nbsp;
+                        { spacesDisabledCopy }
+                    </p>
+                    <p>
+                        { _t("To create a Space from another community, just pick the community in Preferences.") }
+                    </p>
+                </>,
+                button: _t("Preferences"),
+                onFinished: (openPreferences: boolean) => {
+                    if (openPreferences) {
+                        onPreferencesClick();
+                    }
+                },
+            }, "mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog");
+        } catch (e) {
+            console.error(e);
+            setError(e);
+        }
+
+        setBusy(false);
+    };
+
+    let footer;
+    if (error) {
+        footer = <>
+            <img src={require("../../../../res/img/element-icons/warning-badge.svg")} height="24" width="24" alt="" />
+
+            <span className="mx_CreateSpaceFromCommunityDialog_error">
+                <div className="mx_CreateSpaceFromCommunityDialog_errorHeading">{ _t("Failed to migrate community") }</div>
+                <div className="mx_CreateSpaceFromCommunityDialog_errorCaption">{ _t("Try again") }</div>
+            </span>
+
+            <AccessibleButton className="mx_CreateSpaceFromCommunityDialog_retryButton" onClick={onCreateSpaceClick}>
+                { _t("Retry") }
+            </AccessibleButton>
+        </>;
+    } else {
+        footer = <>
+            <AccessibleButton kind="primary_outline" disabled={busy} onClick={() => onFinished()}>
+                { _t("Cancel") }
+            </AccessibleButton>
+            <AccessibleButton kind="primary" disabled={busy} onClick={onCreateSpaceClick}>
+                { busy ? _t("Creating...") : _t("Create Space") }
+            </AccessibleButton>
+        </>;
+    }
+
+    return <BaseDialog
+        title={_t("Create Space from community")}
+        className="mx_CreateSpaceFromCommunityDialog"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <div className="mx_CreateSpaceFromCommunityDialog_content">
+            <p>
+                { _t("A link to the Space will be put in your community description.") }
+                &nbsp;
+                { _t("All rooms will be added and all community members will be invited.") }
+            </p>
+            <p className="mx_CreateSpaceFromCommunityDialog_flairNotice">
+                { _t("Flair won't be available in Spaces for the foreseeable future.") }
+            </p>
+
+            <SpaceCreateForm
+                busy={busy}
+                onSubmit={onCreateSpaceClick}
+                avatarUrl={groupSummary.profile.avatar_url
+                    ? mediaFromMxc(groupSummary.profile.avatar_url).getThumbnailOfSourceHttp(80, 80, "crop")
+                    : undefined
+                }
+                setAvatar={setAvatar}
+                name={name}
+                setName={setName}
+                nameFieldRef={spaceNameField}
+                topic={topic}
+                setTopic={setTopic}
+                alias={alias}
+                setAlias={setAlias}
+                showAliasField={joinRule === JoinRule.Public}
+                aliasFieldRef={spaceAliasField}
+            >
+                <p>{ _t("This description will be shown to people when they view your space") }</p>
+                <JoinRuleDropdown
+                    label={_t("Space visibility")}
+                    labelInvite={_t("Private space (invite only)")}
+                    labelPublic={_t("Public space")}
+                    value={joinRule}
+                    onChange={setJoinRule}
+                />
+                <p>{ joinRule === JoinRule.Public
+                    ? _t("Open space for anyone, best for communities")
+                    : _t("Invite only, best for yourself or teams")
+                }</p>
+                { joinRule !== JoinRule.Public &&
+                    <div className="mx_CreateSpaceFromCommunityDialog_nonPublicSpacer" />
+                }
+            </SpaceCreateForm>
+        </div>
+
+        <div className="mx_CreateSpaceFromCommunityDialog_footer">
+            { footer }
+        </div>
+    </BaseDialog>;
+};
+
+export default CreateSpaceFromCommunityDialog;
+

src/components/views/dialogs/CreateSubspaceDialog.tsx

@@ -16,8 +16,7 @@ limitations under the License.
 
 import React, { useRef, useState } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { JoinRule, Preset } from "matrix-js-sdk/src/@types/partials";
-import { RoomType } from "matrix-js-sdk/src/@types/event";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
 
 import { _t } from '../../../languageHandler';
 import BaseDialog from "./BaseDialog";
@@ -27,8 +26,7 @@ import { BetaPill } from "../beta/BetaCard";
 import Field from "../elements/Field";
 import RoomAliasField from "../elements/RoomAliasField";
 import SpaceStore from "../../../stores/SpaceStore";
-import { SpaceCreateForm } from "../spaces/SpaceCreateMenu";
-import createRoom from "../../../createRoom";
+import { createSpace, SpaceCreateForm } from "../spaces/SpaceCreateMenu";
 import { SubspaceSelector } from "./AddExistingToSpaceDialog";
 import JoinRuleDropdown from "../elements/JoinRuleDropdown";
 
@@ -81,28 +79,7 @@ const CreateSubspaceDialog: React.FC<IProps> = ({ space, onAddExistingSpaceClick
         }
 
         try {
-            await createRoom({
-                createOpts: {
-                    preset: joinRule === JoinRule.Public ? Preset.PublicChat : Preset.PrivateChat,
-                    name,
-                    power_level_content_override: {
-                        // Only allow Admins to write to the timeline to prevent hidden sync spam
-                        events_default: 100,
-                        ...joinRule === JoinRule.Public ? { invite: 0 } : {},
-                    },
-                    room_alias_name: joinRule === JoinRule.Public && alias
-                        ? alias.substr(1, alias.indexOf(":") - 1)
-                        : undefined,
-                    topic,
-                },
-                avatar,
-                roomType: RoomType.Space,
-                parentSpace,
-                spinner: false,
-                encryption: false,
-                andView: true,
-                inlineErrors: true,
-            });
+            await createSpace(name, joinRule === JoinRule.Public, alias, topic, avatar, {}, { parentSpace });
 
             onFinished(true);
         } catch (e) {

src/components/views/dialogs/DeactivateAccountDialog.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import { AuthType, IAuthData } from 'matrix-js-sdk/src/interactive-auth';
 
 import Analytics from '../../../Analytics';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -65,7 +66,7 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
         this.initAuth(/* shouldErase= */false);
     }
 
-    private onStagePhaseChange = (stage: string, phase: string): void => {
+    private onStagePhaseChange = (stage: AuthType, phase: string): void => {
         const dialogAesthetics = {
             [SSOAuthEntry.PHASE_PREAUTH]: {
                 body: _t("Confirm your account deactivation by using Single Sign On to prove your identity."),
@@ -115,7 +116,10 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
         this.setState({ errStr: _t("There was a problem communicating with the server. Please try again.") });
     };
 
-    private onUIAuthComplete = (auth: any): void => {
+    private onUIAuthComplete = (auth: IAuthData): void => {
+        // XXX: this should be returning a promise to maintain the state inside the state machine correct
+        // but given that a deactivation is followed by a local logout and all object instances being thrown away
+        // this isn't done.
         MatrixClientPeg.get().deactivateAccount(auth, this.state.shouldErase).then(r => {
             // Deactivation worked - logout & close this dialog
             Analytics.trackEvent('Account', 'Deactivate Account');
@@ -180,7 +184,9 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
                     <InteractiveAuth
                         matrixClient={MatrixClientPeg.get()}
                         authData={this.state.authData}
-                        makeRequest={this.onUIAuthComplete}
+                        // XXX: onUIAuthComplete breaches the expected method contract, it gets away with it because it
+                        // knows the entire app is about to die as a result of the account deactivation.
+                        makeRequest={this.onUIAuthComplete as any}
                         onAuthFinished={this.onUIAuthFinished}
                         onStagePhaseChange={this.onStagePhaseChange}
                         continueText={this.state.continueText}

src/components/views/dialogs/InviteDialog.tsx

@@ -55,7 +55,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { getAddressType } from "../../../UserAddress";
 import BaseAvatar from '../avatars/BaseAvatar';
-import AccessibleButton from '../elements/AccessibleButton';
+import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton';
 import { compare } from '../../../utils/strings';
 import { IInvite3PID } from "matrix-js-sdk/src/@types/requests";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
@@ -394,6 +394,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     private closeCopiedTooltip: () => void;
     private debounceTimer: number = null; // actually number because we're in the browser
     private editorRef = createRef<HTMLInputElement>();
+    private numberEntryFieldRef: React.RefObject<Field> = createRef();
     private unmounted = false;
 
     constructor(props) {
@@ -1283,13 +1284,27 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         this.setState({ dialPadValue: ev.currentTarget.value });
     };
 
-    private onDigitPress = digit => {
+    private onDigitPress = (digit: string, ev: ButtonEvent) => {
         this.setState({ dialPadValue: this.state.dialPadValue + digit });
+
+        // Keep the number field focused so that keyboard entry is still available
+        // However, don't focus if this wasn't the result of directly clicking on the button,
+        // i.e someone using keyboard navigation.
+        if (ev.type === "click") {
+            this.numberEntryFieldRef.current?.focus();
+        }
     };
 
-    private onDeletePress = () => {
+    private onDeletePress = (ev: ButtonEvent) => {
         if (this.state.dialPadValue.length === 0) return;
         this.setState({ dialPadValue: this.state.dialPadValue.slice(0, -1) });
+
+        // Keep the number field focused so that keyboard entry is still available
+        // However, don't focus if this wasn't the result of directly clicking on the button,
+        // i.e someone using keyboard navigation.
+        if (ev.type === "click") {
+            this.numberEntryFieldRef.current?.focus();
+        }
     };
 
     private onTabChange = (tabId: TabId) => {
@@ -1543,6 +1558,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             let dialPadField;
             if (this.state.dialPadValue.length !== 0) {
                 dialPadField = <Field
+                    ref={this.numberEntryFieldRef}
                     className="mx_InviteDialog_dialPadField"
                     id="dialpad_number"
                     value={this.state.dialPadValue}
@@ -1552,6 +1568,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 />;
             } else {
                 dialPadField = <Field
+                    ref={this.numberEntryFieldRef}
                     className="mx_InviteDialog_dialPadField"
                     id="dialpad_number"
                     value={this.state.dialPadValue}

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -114,7 +114,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
             UserTab.Preferences,
             _td("Preferences"),
             "mx_UserSettingsDialog_preferencesIcon",
-            <PreferencesUserSettingsTab />,
+            <PreferencesUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
 
         if (SettingsStore.getValue(UIFeature.Voip)) {

src/components/views/elements/AccessibleButton.tsx

@@ -67,7 +67,9 @@ export default function AccessibleButton({
     ...restProps
 }: IProps) {
     const newProps: IAccessibleButtonProps = restProps;
-    if (!disabled) {
+    if (disabled) {
+        newProps["aria-disabled"] = true;
+    } else {
         newProps.onClick = onClick;
         // We need to consume enter onKeyDown and space onKeyUp
         // otherwise we are risking also activating other keyboard focusable elements
@@ -118,7 +120,7 @@ export default function AccessibleButton({
     );
 
     // React.createElement expects InputHTMLAttributes
-    return React.createElement(element, restProps, children);
+    return React.createElement(element, newProps, children);
 }
 
 AccessibleButton.defaultProps = {

src/components/views/elements/DialPadBackspaceButton.tsx

@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import * as React from "react";
-import AccessibleButton from "./AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
 
 interface IProps {
     // Callback for when the button is pressed
-    onBackspacePress: () => void;
+    onBackspacePress: (ev: ButtonEvent) => void;
 }
 
 export default class DialPadBackspaceButton extends React.PureComponent<IProps> {

src/components/views/elements/Dropdown.tsx

@@ -18,7 +18,7 @@ limitations under the License.
 import React, { ChangeEvent, createRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import classnames from 'classnames';
 
-import AccessibleButton from './AccessibleButton';
+import AccessibleButton, { ButtonEvent } from './AccessibleButton';
 import { _t } from '../../../languageHandler';
 import { Key } from "../../../Keyboard";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
@@ -178,7 +178,7 @@ export default class Dropdown extends React.Component<IProps, IState> {
         this.ignoreEvent = ev;
     };
 
-    private onInputClick = (ev: React.MouseEvent) => {
+    private onAccessibleButtonClick = (ev: ButtonEvent) => {
         if (this.props.disabled) return;
 
         if (!this.state.expanded) {
@@ -186,6 +186,10 @@ export default class Dropdown extends React.Component<IProps, IState> {
                 expanded: true,
             });
             ev.preventDefault();
+        } else if ((ev as React.KeyboardEvent).key === Key.ENTER) {
+            // the accessible button consumes enter onKeyDown for firing onClick, so handle it here
+            this.props.onOptionChange(this.state.highlightedOption);
+            this.close();
         }
     };
 
@@ -204,7 +208,7 @@ export default class Dropdown extends React.Component<IProps, IState> {
         this.props.onOptionChange(dropdownKey);
     };
 
-    private onInputKeyDown = (e: React.KeyboardEvent) => {
+    private onKeyDown = (e: React.KeyboardEvent) => {
         let handled = true;
 
         // These keys don't generate keypress events and so needs to be on keyup
@@ -269,7 +273,7 @@ export default class Dropdown extends React.Component<IProps, IState> {
     private prevOption(optionKey: string): string {
         const keys = Object.keys(this.childrenByKey);
         const index = keys.indexOf(optionKey);
-        return keys[(index - 1) % keys.length];
+        return keys[index <= 0 ? keys.length - 1 : (index - 1) % keys.length];
     }
 
     private scrollIntoView(node: Element) {
@@ -320,7 +324,6 @@ export default class Dropdown extends React.Component<IProps, IState> {
                         type="text"
                         autoFocus={true}
                         className="mx_Dropdown_option"
-                        onKeyDown={this.onInputKeyDown}
                         onChange={this.onInputChange}
                         value={this.state.searchQuery}
                         role="combobox"
@@ -329,6 +332,7 @@ export default class Dropdown extends React.Component<IProps, IState> {
                         aria-owns={`${this.props.id}_listbox`}
                         aria-disabled={this.props.disabled}
                         aria-label={this.props.label}
+                        onKeyDown={this.onKeyDown}
                     />
                 );
             }
@@ -361,13 +365,14 @@ export default class Dropdown extends React.Component<IProps, IState> {
         return <div className={classnames(dropdownClasses)} ref={this.collectRoot}>
             <AccessibleButton
                 className="mx_Dropdown_input mx_no_textinput"
-                onClick={this.onInputClick}
+                onClick={this.onAccessibleButtonClick}
                 aria-haspopup="listbox"
                 aria-expanded={this.state.expanded}
                 disabled={this.props.disabled}
                 inputRef={this.buttonRef}
                 aria-label={this.props.label}
                 aria-describedby={`${this.props.id}_value`}
+                onKeyDown={this.onKeyDown}
             >
                 { currentValue }
                 <span className="mx_Dropdown_arrow" />

src/components/views/messages/CallEvent.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { createRef } from 'react';
 
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t, _td } from '../../../languageHandler';
@@ -27,6 +27,8 @@ import classNames from 'classnames';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import { formatCallTime } from "../../../DateUtils";
 
+const MAX_NON_NARROW_WIDTH = 400 / 70 * 100;
+
 interface IProps {
     mxEvent: MatrixEvent;
     callEventGrouper: CallEventGrouper;
@@ -35,6 +37,7 @@ interface IProps {
 interface IState {
     callState: CallState | CustomCallState;
     silenced: boolean;
+    narrow: boolean;
 }
 
 const TEXTUAL_STATES: Map<CallState | CustomCallState, string> = new Map([
@@ -42,26 +45,42 @@ const TEXTUAL_STATES: Map<CallState | CustomCallState, string> = new Map([
     [CallState.Connecting, _td("Connecting")],
 ]);
 
-export default class CallEvent extends React.Component<IProps, IState> {
+export default class CallEvent extends React.PureComponent<IProps, IState> {
+    private wrapperElement = createRef<HTMLDivElement>();
+    private resizeObserver: ResizeObserver;
+
     constructor(props: IProps) {
         super(props);
 
         this.state = {
             callState: this.props.callEventGrouper.state,
             silenced: false,
+            narrow: false,
         };
     }
 
     componentDidMount() {
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
+
+        this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
+        this.resizeObserver.observe(this.wrapperElement.current);
     }
 
     componentWillUnmount() {
         this.props.callEventGrouper.removeListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
         this.props.callEventGrouper.removeListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
+
+        this.resizeObserver.disconnect();
     }
 
+    private resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {
+        const wrapperElementEntry = entries.find((entry) => entry.target === this.wrapperElement.current);
+        if (!wrapperElementEntry) return;
+
+        this.setState({ narrow: wrapperElementEntry.contentRect.width < MAX_NON_NARROW_WIDTH });
+    };
+
     private onSilencedChanged = (newState) => {
         this.setState({ silenced: newState });
     };
@@ -82,21 +101,32 @@ export default class CallEvent extends React.Component<IProps, IState> {
         );
     }
 
+    private renderSilenceIcon(): JSX.Element {
+        const silenceClass = classNames({
+            "mx_CallEvent_iconButton": true,
+            "mx_CallEvent_unSilence": this.state.silenced,
+            "mx_CallEvent_silence": !this.state.silenced,
+        });
+
+        return (
+            <AccessibleTooltipButton
+                className={silenceClass}
+                onClick={this.props.callEventGrouper.toggleSilenced}
+                title={this.state.silenced ? _t("Sound on") : _t("Silence call")}
+            />
+        );
+    }
+
     private renderContent(state: CallState | CustomCallState): JSX.Element {
         if (state === CallState.Ringing) {
-            const silenceClass = classNames({
-                "mx_CallEvent_iconButton": true,
-                "mx_CallEvent_unSilence": this.state.silenced,
-                "mx_CallEvent_silence": !this.state.silenced,
-            });
+            let silenceIcon;
+            if (!this.state.narrow) {
+                silenceIcon = this.renderSilenceIcon();
+            }
 
             return (
                 <div className="mx_CallEvent_content">
-                    <AccessibleTooltipButton
-                        className={silenceClass}
-                        onClick={this.props.callEventGrouper.toggleSilenced}
-                        title={this.state.silenced ? _t("Sound on"): _t("Silence call")}
-                    />
+                    { silenceIcon }
                     <AccessibleButton
                         className="mx_CallEvent_content_button mx_CallEvent_content_button_reject"
                         onClick={this.props.callEventGrouper.rejectCall}
@@ -145,7 +175,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
             } else if (hangupReason === CallErrorCode.InviteTimeout) {
                 return (
                     <div className="mx_CallEvent_content">
-                        { _t("Missed call") }
+                        { _t("No answer") }
                         { this.renderCallBackButton(_t("Call back")) }
                     </div>
                 );
@@ -169,7 +199,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
             } else if (hangupReason === CallErrorCode.UserBusy) {
                 reason = _t("The user you called is busy.");
             } else {
-                reason = _t('Unknown failure: %(reason)s)', { reason: hangupReason });
+                reason = _t('Unknown failure: %(reason)s', { reason: hangupReason });
             }
 
             return (
@@ -215,35 +245,41 @@ export default class CallEvent extends React.Component<IProps, IState> {
         const callState = this.state.callState;
         const hangupReason = this.props.callEventGrouper.hangupReason;
         const content = this.renderContent(callState);
-        const className = classNames({
-            mx_CallEvent: true,
+        const className = classNames("mx_CallEvent", {
             mx_CallEvent_voice: isVoice,
             mx_CallEvent_video: !isVoice,
-            mx_CallEvent_missed: (
-                callState === CustomCallState.Missed ||
-                (callState === CallState.Ended && hangupReason === CallErrorCode.InviteTimeout)
-            ),
+            mx_CallEvent_narrow: this.state.narrow,
+            mx_CallEvent_missed: callState === CustomCallState.Missed,
+            mx_CallEvent_noAnswer: callState === CallState.Ended && hangupReason === CallErrorCode.InviteTimeout,
+            mx_CallEvent_rejected: callState === CallState.Ended && this.props.callEventGrouper.gotRejected,
         });
+        let silenceIcon;
+        if (this.state.narrow && this.state.callState === CallState.Ringing) {
+            silenceIcon = this.renderSilenceIcon();
+        }
 
         return (
-            <div className={className}>
-                <div className="mx_CallEvent_info">
-                    <MemberAvatar
-                        member={event.sender}
-                        width={32}
-                        height={32}
-                    />
-                    <div className="mx_CallEvent_info_basic">
-                        <div className="mx_CallEvent_sender">
-                            { sender }
-                        </div>
-                        <div className="mx_CallEvent_type">
-                            <div className="mx_CallEvent_type_icon" />
-                            { callType }
+            <div className="mx_CallEvent_wrapper" ref={this.wrapperElement}>
+                <div className={className}>
+                    { silenceIcon }
+                    <div className="mx_CallEvent_info">
+                        <MemberAvatar
+                            member={event.sender}
+                            width={32}
+                            height={32}
+                        />
+                        <div className="mx_CallEvent_info_basic">
+                            <div className="mx_CallEvent_sender">
+                                { sender }
+                            </div>
+                            <div className="mx_CallEvent_type">
+                                <div className="mx_CallEvent_type_icon" />
+                                { callType }
+                            </div>
                         </div>
                     </div>
+                    { content }
                 </div>
-                { content }
             </div>
         );
     }

src/components/views/messages/MImageBody.tsx

@@ -25,12 +25,14 @@ import SettingsStore from "../../../settings/SettingsStore";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import InlineSpinner from '../elements/InlineSpinner';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { mediaFromContent } from "../../../customisations/Media";
+import { Media, mediaFromContent } from "../../../customisations/Media";
 import { BLURHASH_FIELD } from "../../../ContentMessages";
 import { IMediaEventContent } from '../../../customisations/models/IMediaEventContent';
 import ImageView from '../elements/ImageView';
 import { SyncState } from 'matrix-js-sdk/src/sync.api';
 import { IBodyProps } from "./IBodyProps";
+import classNames from 'classnames';
+import { CSSTransition, SwitchTransition } from 'react-transition-group';
 
 interface IState {
     decryptedUrl?: string;
@@ -157,19 +159,21 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             // this is only used as a fallback in case content.info.w/h is missing
             loadedImageDimensions = { naturalWidth, naturalHeight };
         }
-
         this.setState({ imgLoaded: true, loadedImageDimensions });
     };
 
     protected getContentUrl(): string {
-        const media = mediaFromContent(this.props.mxEvent.getContent());
-        if (media.isEncrypted) {
+        if (this.media.isEncrypted) {
             return this.state.decryptedUrl;
         } else {
-            return media.srcHttp;
+            return this.media.srcHttp;
         }
     }
 
+    private get media(): Media {
+        return mediaFromContent(this.props.mxEvent.getContent());
+    }
+
     protected getThumbUrl(): string {
         // FIXME: we let images grow as wide as you like, rather than capped to 800x600.
         // So either we need to support custom timeline widths here, or reimpose the cap, otherwise the
@@ -225,7 +229,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                     info.w > thumbWidth ||
                     info.h > thumbHeight
                 );
-                const isLargeFileSize = info.size > 1*1024*1024; // 1mb
+                const isLargeFileSize = info.size > 1 * 1024 * 1024; // 1mb
 
                 if (isLargeFileSize && isLargerThanThumbnail) {
                     // image is too large physically and bytewise to clutter our timeline so
@@ -347,12 +351,21 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                     className="mx_MImageBody_thumbnail"
                     src={thumbUrl}
                     ref={this.image}
-                    style={{ maxWidth: `min(100%, ${maxWidth}px)` }}
+                    // Force the image to be the full size of the container, even if the
+                    // pixel size is smaller. The problem here is that we don't know what
+                    // thumbnail size the HS is going to give us, but we have to commit to
+                    // a container size immediately and not change it when the image loads
+                    // or we'll get a scroll jump (or have to leave blank space).
+                    // This will obviously result in an upscaled image which will be a bit
+                    // blurry. The best fix would be for the HS to advertise what size thumbnails
+                    // it guarantees to produce.
+                    style={{ height: '100%' }}
                     alt={content.body}
                     onError={this.onImageError}
                     onLoad={this.onImageLoad}
                     onMouseEnter={this.onImageEnter}
-                    onMouseLeave={this.onImageLeave} />
+                    onMouseLeave={this.onImageLeave}
+                />
             );
         }
 
@@ -365,21 +378,41 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             gifLabel = <p className="mx_MImageBody_gifLabel">GIF</p>;
         }
 
+        const classes = classNames({
+            'mx_MImageBody_thumbnail': true,
+            'mx_MImageBody_thumbnail--blurhash': this.props.mxEvent.getContent().info[BLURHASH_FIELD],
+        });
+
+        // This has incredibly broken types.
+        const C = CSSTransition as any;
         const thumbnail = (
             <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight, maxWidth: maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}>
-                { showPlaceholder &&
-                    <div
-                        className="mx_MImageBody_thumbnail"
-                        style={{
-                            // Constrain width here so that spinner appears central to the loaded thumbnail
-                            maxWidth: `min(100%, ${infoWidth}px)`,
-                        }}
+                <SwitchTransition mode="out-in">
+                    <C
+                        classNames="mx_rtg--fade"
+                        key={`img-${showPlaceholder}`}
+                        timeout={300}
                     >
-                        { placeholder }
-                    </div>
-                }
+                        { /* This weirdly looking div is necessary here, otherwise SwitchTransition fails */ }
+                        <div>
+                            { showPlaceholder && <div
+                                className={classes}
+                                style={{
+                                    // Constrain width here so that spinner appears central to the loaded thumbnail
+                                    maxWidth: `min(100%, ${infoWidth}px)`,
+                                    maxHeight: maxHeight,
+                                    aspectRatio: `${infoWidth}/${infoHeight}`,
+                                }}
+                            >
+                                { placeholder }
+                            </div> }
+                        </div>
+                    </C>
+                </SwitchTransition>
 
-                <div style={{ display: !showPlaceholder ? undefined : 'none' }}>
+                <div style={{
+                    height: '100%',
+                }}>
                     { img }
                     { gifLabel }
                 </div>
@@ -401,7 +434,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     // Overidden by MStickerBody
     protected getPlaceholder(width: number, height: number): JSX.Element {
         const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
-        if (blurhash) return <Blurhash hash={blurhash} width={width} height={height} />;
+        if (blurhash) return <Blurhash className="mx_Blurhash" hash={blurhash} width={width} height={height} />;
         return (
             <InlineSpinner w={32} h={32} />
         );
@@ -443,10 +476,12 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         const thumbnail = this.messageContent(contentUrl, thumbUrl, content);
         const fileBody = this.getFileBody();
 
-        return <div className="mx_MImageBody">
-            { thumbnail }
-            { fileBody }
-        </div>;
+        return (
+            <div className="mx_MImageBody">
+                { thumbnail }
+                { fileBody }
+            </div>
+        );
     }
 }
 

src/components/views/right_panel/UserInfo.tsx

@@ -851,7 +851,7 @@ const RoomAdminToolsContainer: React.FC<IBaseRoomProps> = ({
     return <div />;
 };
 
-interface GroupMember {
+export interface GroupMember {
     userId: string;
     displayname?: string; // XXX: GroupMember objects are inconsistent :((
     avatarUrl?: string;

src/components/views/rooms/Autocomplete.tsx

@@ -25,7 +25,6 @@ import SettingsStore from "../../../settings/SettingsStore";
 import Autocompleter from '../../../autocomplete/Autocompleter';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-const COMPOSER_SELECTED = 0;
 const MAX_PROVIDER_MATCHES = 20;
 
 export const generateCompletionDomId = (number) => `mx_Autocomplete_Completion_${number}`;
@@ -34,9 +33,9 @@ interface IProps {
     // the query string for which to show autocomplete suggestions
     query: string;
     // method invoked with range and text content when completion is confirmed
-    onConfirm: (ICompletion) => void;
+    onConfirm: (completion: ICompletion) => void;
     // method invoked when selected (if any) completion changes
-    onSelectionChange?: (ICompletion, number) => void;
+    onSelectionChange?: (partIndex: number) => void;
     selection: ISelectionRange;
     // The room in which we're autocompleting
     room: Room;
@@ -71,7 +70,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
             completionList: [],
 
             // how far down the completion list we are (THIS IS 1-INDEXED!)
-            selectionOffset: COMPOSER_SELECTED,
+            selectionOffset: 1,
 
             // whether we should show completions if they're available
             shouldShowCompletions: true,
@@ -86,7 +85,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         this.applyNewProps();
     }
 
-    private applyNewProps(oldQuery?: string, oldRoom?: Room) {
+    private applyNewProps(oldQuery?: string, oldRoom?: Room): void {
         if (oldRoom && this.props.room.roomId !== oldRoom.roomId) {
             this.autocompleter.destroy();
             this.autocompleter = new Autocompleter(this.props.room);
@@ -104,7 +103,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         this.autocompleter.destroy();
     }
 
-    complete(query: string, selection: ISelectionRange) {
+    private complete(query: string, selection: ISelectionRange): Promise<void> {
         this.queryRequested = query;
         if (this.debounceCompletionsRequest) {
             clearTimeout(this.debounceCompletionsRequest);
@@ -115,7 +114,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
                 completions: [],
                 completionList: [],
                 // Reset selected completion
-                selectionOffset: COMPOSER_SELECTED,
+                selectionOffset: 1,
                 // Hide the autocomplete box
                 hide: true,
             });
@@ -135,7 +134,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         });
     }
 
-    processQuery(query: string, selection: ISelectionRange) {
+    private processQuery(query: string, selection: ISelectionRange): Promise<void> {
         return this.autocompleter.getCompletions(
             query, selection, this.state.forceComplete, MAX_PROVIDER_MATCHES,
         ).then((completions) => {
@@ -147,30 +146,35 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         });
     }
 
-    processCompletions(completions: IProviderCompletions[]) {
+    private processCompletions(completions: IProviderCompletions[]): void {
         const completionList = flatMap(completions, (provider) => provider.completions);
 
         // Reset selection when completion list becomes empty.
-        let selectionOffset = COMPOSER_SELECTED;
+        let selectionOffset = 1;
         if (completionList.length > 0) {
             /* If the currently selected completion is still in the completion list,
              try to find it and jump to it. If not, select composer.
              */
-            const currentSelection = this.state.selectionOffset === 0 ? null :
+            const currentSelection = this.state.selectionOffset <= 1 ? null :
                 this.state.completionList[this.state.selectionOffset - 1].completion;
             selectionOffset = completionList.findIndex(
                 (completion) => completion.completion === currentSelection);
             if (selectionOffset === -1) {
-                selectionOffset = COMPOSER_SELECTED;
+                selectionOffset = 1;
             } else {
                 selectionOffset++; // selectionOffset is 1-indexed!
             }
         }
 
-        let hide = this.state.hide;
+        let hide = true;
         // If `completion.command.command` is truthy, then a provider has matched with the query
         const anyMatches = completions.some((completion) => !!completion.command.command);
-        hide = !anyMatches;
+        if (anyMatches) {
+            hide = false;
+            if (this.props.onSelectionChange) {
+                this.props.onSelectionChange(selectionOffset - 1);
+            }
+        }
 
         this.setState({
             completions,
@@ -182,25 +186,25 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         });
     }
 
-    hasSelection(): boolean {
+    public hasSelection(): boolean {
         return this.countCompletions() > 0 && this.state.selectionOffset !== 0;
     }
 
-    countCompletions(): number {
+    public countCompletions(): number {
         return this.state.completionList.length;
     }
 
     // called from MessageComposerInput
-    moveSelection(delta: number) {
+    public moveSelection(delta: number): void {
         const completionCount = this.countCompletions();
         if (completionCount === 0) return; // there are no items to move the selection through
 
         // Note: selectionOffset 0 represents the unsubstituted text, while 1 means first pill selected
-        const index = (this.state.selectionOffset + delta + completionCount + 1) % (completionCount + 1);
-        this.setSelection(index);
+        const index = (this.state.selectionOffset + delta + completionCount - 1) % completionCount;
+        this.setSelection(1 + index);
     }
 
-    onEscape(e: KeyboardEvent): boolean {
+    public onEscape(e: KeyboardEvent): boolean {
         const completionCount = this.countCompletions();
         if (completionCount === 0) {
             // autocomplete is already empty, so don't preventDefault
@@ -213,16 +217,16 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         this.hide();
     }
 
-    hide = () => {
+    private hide = (): void => {
         this.setState({
             hide: true,
-            selectionOffset: 0,
+            selectionOffset: 1,
             completions: [],
             completionList: [],
         });
     };
 
-    forceComplete() {
+    public forceComplete(): Promise<number> {
         return new Promise((resolve) => {
             this.setState({
                 forceComplete: true,
@@ -235,8 +239,13 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         });
     }
 
-    onCompletionClicked = (selectionOffset: number): boolean => {
-        if (this.countCompletions() === 0 || selectionOffset === COMPOSER_SELECTED) {
+    public onConfirmCompletion = (): void => {
+        this.onCompletionClicked(this.state.selectionOffset);
+    };
+
+    private onCompletionClicked = (selectionOffset: number): boolean => {
+        const count = this.countCompletions();
+        if (count === 0 || selectionOffset < 1 || selectionOffset > count) {
             return false;
         }
 
@@ -246,10 +255,10 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         return true;
     };
 
-    setSelection(selectionOffset: number) {
+    private setSelection(selectionOffset: number): void {
         this.setState({ selectionOffset, hide: false });
         if (this.props.onSelectionChange) {
-            this.props.onSelectionChange(this.state.completionList[selectionOffset - 1], selectionOffset - 1);
+            this.props.onSelectionChange(selectionOffset - 1);
         }
     }
 
@@ -292,7 +301,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
             });
 
             return completions.length > 0 ? (
-                <div key={i} className="mx_Autocomplete_ProviderSection">
+                <div key={i} className="mx_Autocomplete_ProviderSection" role="presentation">
                     <div className="mx_Autocomplete_provider_name">{ completionResult.provider.getName() }</div>
                     { completionResult.provider.renderCompletions(completions) }
                 </div>
@@ -300,7 +309,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         }).filter((completion) => !!completion);
 
         return !this.state.hide && renderedCompletions.length > 0 ? (
-            <div className="mx_Autocomplete" ref={this.containerRef}>
+            <div id="mx_Autocomplete" className="mx_Autocomplete" ref={this.containerRef} role="listbox">
                 { renderedCompletions }
             </div>
         ) : null;

src/components/views/rooms/BasicMessageComposer.tsx

@@ -31,7 +31,7 @@ import {
 } from '../../../editor/operations';
 import { getCaretOffsetAndText, getRangeForSelection } from '../../../editor/dom';
 import Autocomplete, { generateCompletionDomId } from '../rooms/Autocomplete';
-import { getAutoCompleteCreator } from '../../../editor/parts';
+import { getAutoCompleteCreator, Type } from '../../../editor/parts';
 import { parseEvent, parsePlainTextMessage } from '../../../editor/deserialize';
 import { renderModel } from '../../../editor/render';
 import TypingStore from "../../../stores/TypingStore";
@@ -133,6 +133,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         this.state = {
             showPillAvatar: SettingsStore.getValue("Pill.shouldShowPillAvatar"),
             surroundWith: SettingsStore.getValue("MessageComposerInput.surroundWith"),
+            showVisualBell: false,
         };
 
         this.emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null,
@@ -169,7 +170,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         range.expandBackwardsWhile((index, offset) => {
             const part = model.parts[index];
             n -= 1;
-            return n >= 0 && (part.type === "plain" || part.type === "pill-candidate");
+            return n >= 0 && (part.type === Type.Plain || part.type === Type.PillCandidate);
         });
         const emoticonMatch = REGEX_EMOTICON_WHITESPACE.exec(range.text);
         if (emoticonMatch) {
@@ -215,7 +216,11 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         if (isEmpty) {
             this.formatBarRef.current.hide();
         }
-        this.setState({ autoComplete: this.props.model.autoComplete });
+        this.setState({
+            autoComplete: this.props.model.autoComplete,
+            // if a change is happening then clear the showVisualBell
+            showVisualBell: diff ? false : this.state.showVisualBell,
+        });
         this.historyManager.tryPush(this.props.model, selection, inputType, diff);
 
         let isTyping = !this.props.model.isEmpty;
@@ -435,7 +440,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         const model = this.props.model;
         let handled = false;
 
-        if (this.state.surroundWith && document.getSelection().type != "Caret") {
+        if (this.state.surroundWith && document.getSelection().type !== "Caret") {
             // This surrounds the selected text with a character. This is
             // intentionally left out of the keybinding manager as the keybinds
             // here shouldn't be changeable
@@ -456,6 +461,44 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             }
         }
 
+        const autocompleteAction = getKeyBindingsManager().getAutocompleteAction(event);
+        if (model.autoComplete?.hasCompletions()) {
+            const autoComplete = model.autoComplete;
+            switch (autocompleteAction) {
+                case AutocompleteAction.ForceComplete:
+                case AutocompleteAction.Complete:
+                    autoComplete.confirmCompletion();
+                    handled = true;
+                    break;
+                case AutocompleteAction.PrevSelection:
+                    autoComplete.selectPreviousSelection();
+                    handled = true;
+                    break;
+                case AutocompleteAction.NextSelection:
+                    autoComplete.selectNextSelection();
+                    handled = true;
+                    break;
+                case AutocompleteAction.Cancel:
+                    autoComplete.onEscape(event);
+                    handled = true;
+                    break;
+                default:
+                    return; // don't preventDefault on anything else
+            }
+        } else if (autocompleteAction === AutocompleteAction.ForceComplete && !this.state.showVisualBell) {
+            // there is no current autocomplete window, try to open it
+            this.tabCompleteName();
+            handled = true;
+        } else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
+            this.formatBarRef.current.hide();
+        }
+
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+
         const action = getKeyBindingsManager().getMessageComposerAction(event);
         switch (action) {
             case MessageComposerAction.FormatBold:
@@ -507,42 +550,6 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 handled = true;
                 break;
         }
-        if (handled) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-
-        const autocompleteAction = getKeyBindingsManager().getAutocompleteAction(event);
-        if (model.autoComplete && model.autoComplete.hasCompletions()) {
-            const autoComplete = model.autoComplete;
-            switch (autocompleteAction) {
-                case AutocompleteAction.CompleteOrPrevSelection:
-                case AutocompleteAction.PrevSelection:
-                    autoComplete.selectPreviousSelection();
-                    handled = true;
-                    break;
-                case AutocompleteAction.CompleteOrNextSelection:
-                case AutocompleteAction.NextSelection:
-                    autoComplete.selectNextSelection();
-                    handled = true;
-                    break;
-                case AutocompleteAction.Cancel:
-                    autoComplete.onEscape(event);
-                    handled = true;
-                    break;
-                default:
-                    return; // don't preventDefault on anything else
-            }
-        } else if (autocompleteAction === AutocompleteAction.CompleteOrPrevSelection
-            || autocompleteAction === AutocompleteAction.CompleteOrNextSelection) {
-            // there is no current autocomplete window, try to open it
-            this.tabCompleteName();
-            handled = true;
-        } else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
-            this.formatBarRef.current.hide();
-        }
-
         if (handled) {
             event.preventDefault();
             event.stopPropagation();
@@ -558,9 +565,9 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             const range = model.startRange(position);
             range.expandBackwardsWhile((index, offset, part) => {
                 return part.text[offset] !== " " && part.text[offset] !== "+" && (
-                    part.type === "plain" ||
-                    part.type === "pill-candidate" ||
-                    part.type === "command"
+                    part.type === Type.Plain ||
+                    part.type === Type.PillCandidate ||
+                    part.type === Type.Command
                 );
             });
             const { partCreator } = model;
@@ -577,6 +584,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                     this.setState({ showVisualBell: true });
                     model.autoComplete.close();
                 }
+            } else {
+                this.setState({ showVisualBell: true });
             }
         } catch (err) {
             console.error(err);
@@ -592,9 +601,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         this.props.model.autoComplete.onComponentConfirm(completion);
     };
 
-    private onAutoCompleteSelectionChange = (completion: ICompletion, completionIndex: number): void => {
+    private onAutoCompleteSelectionChange = (completionIndex: number): void => {
         this.modifiedFlag = true;
-        this.props.model.autoComplete.onComponentSelectionChange(completion);
         this.setState({ completionIndex });
     };
 
@@ -718,6 +726,11 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         };
 
         const { completionIndex } = this.state;
+        const hasAutocomplete = Boolean(this.state.autoComplete);
+        let activeDescendant;
+        if (hasAutocomplete && completionIndex >= 0) {
+            activeDescendant = generateCompletionDomId(completionIndex);
+        }
 
         return (<div className={wrapperClasses}>
             { autoComplete }
@@ -736,10 +749,11 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 aria-label={this.props.label}
                 role="textbox"
                 aria-multiline="true"
-                aria-autocomplete="both"
+                aria-autocomplete="list"
                 aria-haspopup="listbox"
-                aria-expanded={Boolean(this.state.autoComplete)}
-                aria-activedescendant={completionIndex >= 0 ? generateCompletionDomId(completionIndex) : undefined}
+                aria-expanded={hasAutocomplete}
+                aria-owns="mx_Autocomplete"
+                aria-activedescendant={activeDescendant}
                 dir="auto"
                 aria-disabled={this.props.disabled}
             />

src/components/views/rooms/EditMessageComposer.tsx

@@ -25,7 +25,7 @@ import { getCaretOffsetAndText } from '../../../editor/dom';
 import { htmlSerializeIfNeeded, textSerialize, containsEmote, stripEmoteCommand } from '../../../editor/serialize';
 import { findEditableEvent } from '../../../utils/EventUtils';
 import { parseEvent } from '../../../editor/deserialize';
-import { CommandPartCreator, Part, PartCreator } from '../../../editor/parts';
+import { CommandPartCreator, Part, PartCreator, Type } from '../../../editor/parts';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
 import BasicMessageComposer from "./BasicMessageComposer";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -242,12 +242,12 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
         const parts = this.model.parts;
         const firstPart = parts[0];
         if (firstPart) {
-            if (firstPart.type === "command" && firstPart.text.startsWith("/") && !firstPart.text.startsWith("//")) {
+            if (firstPart.type === Type.Command && firstPart.text.startsWith("/") && !firstPart.text.startsWith("//")) {
                 return true;
             }
 
             if (firstPart.text.startsWith("/") && !firstPart.text.startsWith("//")
-                && (firstPart.type === "plain" || firstPart.type === "pill-candidate")) {
+                && (firstPart.type === Type.Plain || firstPart.type === Type.PillCandidate)) {
                 return true;
             }
         }
@@ -268,7 +268,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
     private getSlashCommand(): [Command, string, string] {
         const commandText = this.model.parts.reduce((text, part) => {
             // use mxid to textify user pills in a command
-            if (part.type === "user-pill") {
+            if (part.type === Type.UserPill) {
                 return text + part.resourceId;
             }
             return text + part.text;

src/components/views/rooms/EventTile.tsx

@@ -969,8 +969,11 @@ export default class EventTile extends React.Component<IProps, IState> {
         } else if (this.props.layout == Layout.IRC) {
             avatarSize = 14;
             needsSenderProfile = true;
-        } else if (this.props.continuation && this.props.tileShape !== TileShape.FileGrid) {
-            // no avatar or sender profile for continuation messages
+        } else if (
+            (this.props.continuation && this.props.tileShape !== TileShape.FileGrid) ||
+            this.props.mxEvent.getType() === EventType.CallInvite
+        ) {
+            // no avatar or sender profile for continuation messages and call tiles
             avatarSize = 0;
             needsSenderProfile = false;
         } else {

src/components/views/rooms/SendMessageComposer.tsx

@@ -31,7 +31,7 @@ import {
     textSerialize,
     unescapeMessage,
 } from '../../../editor/serialize';
-import { CommandPartCreator, Part, PartCreator, SerializedPart } from '../../../editor/parts';
+import { CommandPartCreator, Part, PartCreator, SerializedPart, Type } from '../../../editor/parts';
 import BasicMessageComposer from "./BasicMessageComposer";
 import ReplyThread from "../elements/ReplyThread";
 import { findEditableEvent } from '../../../utils/EventUtils';
@@ -240,14 +240,14 @@ export default class SendMessageComposer extends React.Component<IProps> {
         const parts = this.model.parts;
         const firstPart = parts[0];
         if (firstPart) {
-            if (firstPart.type === "command" && firstPart.text.startsWith("/") && !firstPart.text.startsWith("//")) {
+            if (firstPart.type === Type.Command && firstPart.text.startsWith("/") && !firstPart.text.startsWith("//")) {
                 return true;
             }
             // be extra resilient when somehow the AutocompleteWrapperModel or
             // CommandPartCreator fails to insert a command part, so we don't send
             // a command as a message
             if (firstPart.text.startsWith("/") && !firstPart.text.startsWith("//")
-                && (firstPart.type === "plain" || firstPart.type === "pill-candidate")) {
+                && (firstPart.type === Type.Plain || firstPart.type === Type.PillCandidate)) {
                 return true;
             }
         }

src/components/views/settings/CrossSigningPanel.tsx

@@ -24,36 +24,39 @@ import Spinner from '../elements/Spinner';
 import InteractiveAuthDialog from '../dialogs/InteractiveAuthDialog';
 import ConfirmDestroyCrossSigningDialog from '../dialogs/security/ConfirmDestroyCrossSigningDialog';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MatrixEvent } from 'matrix-js-sdk/src';
+
+interface IState {
+    error?: Error;
+    crossSigningPublicKeysOnDevice?: boolean;
+    crossSigningPrivateKeysInStorage?: boolean;
+    masterPrivateKeyCached?: boolean;
+    selfSigningPrivateKeyCached?: boolean;
+    userSigningPrivateKeyCached?: boolean;
+    homeserverSupportsCrossSigning?: boolean;
+    crossSigningReady?: boolean;
+}
 
 @replaceableComponent("views.settings.CrossSigningPanel")
-export default class CrossSigningPanel extends React.PureComponent {
+export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
+    private unmounted = false;
+
     constructor(props) {
         super(props);
 
-        this._unmounted = false;
-
-        this.state = {
-            error: null,
-            crossSigningPublicKeysOnDevice: null,
-            crossSigningPrivateKeysInStorage: null,
-            masterPrivateKeyCached: null,
-            selfSigningPrivateKeyCached: null,
-            userSigningPrivateKeyCached: null,
-            homeserverSupportsCrossSigning: null,
-            crossSigningReady: null,
-        };
+        this.state = {};
     }
 
-    componentDidMount() {
+    public componentDidMount() {
         const cli = MatrixClientPeg.get();
         cli.on("accountData", this.onAccountData);
         cli.on("userTrustStatusChanged", this.onStatusChanged);
         cli.on("crossSigning.keysChanged", this.onStatusChanged);
-        this._getUpdatedStatus();
+        this.getUpdatedStatus();
     }
 
-    componentWillUnmount() {
-        this._unmounted = true;
+    public componentWillUnmount() {
+        this.unmounted = true;
         const cli = MatrixClientPeg.get();
         if (!cli) return;
         cli.removeListener("accountData", this.onAccountData);
@@ -61,28 +64,28 @@ export default class CrossSigningPanel extends React.PureComponent {
         cli.removeListener("crossSigning.keysChanged", this.onStatusChanged);
     }
 
-    onAccountData = (event) => {
+    private onAccountData = (event: MatrixEvent): void => {
         const type = event.getType();
         if (type.startsWith("m.cross_signing") || type.startsWith("m.secret_storage")) {
-            this._getUpdatedStatus();
+            this.getUpdatedStatus();
         }
     };
 
-    _onBootstrapClick = () => {
-        this._bootstrapCrossSigning({ forceReset: false });
+    private onBootstrapClick = () => {
+        this.bootstrapCrossSigning({ forceReset: false });
     };
 
-    onStatusChanged = () => {
-        this._getUpdatedStatus();
+    private onStatusChanged = () => {
+        this.getUpdatedStatus();
     };
 
-    async _getUpdatedStatus() {
+    private async getUpdatedStatus(): Promise<void> {
         const cli = MatrixClientPeg.get();
         const pkCache = cli.getCrossSigningCacheCallbacks();
         const crossSigning = cli.crypto.crossSigningInfo;
         const secretStorage = cli.crypto.secretStorage;
-        const crossSigningPublicKeysOnDevice = crossSigning.getId();
-        const crossSigningPrivateKeysInStorage = await crossSigning.isStoredInSecretStorage(secretStorage);
+        const crossSigningPublicKeysOnDevice = Boolean(crossSigning.getId());
+        const crossSigningPrivateKeysInStorage = Boolean(await crossSigning.isStoredInSecretStorage(secretStorage));
         const masterPrivateKeyCached = !!(pkCache && await pkCache.getCrossSigningKeyCache("master"));
         const selfSigningPrivateKeyCached = !!(pkCache && await pkCache.getCrossSigningKeyCache("self_signing"));
         const userSigningPrivateKeyCached = !!(pkCache && await pkCache.getCrossSigningKeyCache("user_signing"));
@@ -110,8 +113,8 @@ export default class CrossSigningPanel extends React.PureComponent {
      * 3. All keys are loaded and there's nothing to do.
      * @param {bool} [forceReset] Bootstrap again even if keys already present
      */
-    _bootstrapCrossSigning = async ({ forceReset = false }) => {
-        this.setState({ error: null });
+    private bootstrapCrossSigning = async ({ forceReset = false }): Promise<void> => {
+        this.setState({ error: undefined });
         try {
             const cli = MatrixClientPeg.get();
             await cli.bootstrapCrossSigning({
@@ -135,20 +138,20 @@ export default class CrossSigningPanel extends React.PureComponent {
             this.setState({ error: e });
             console.error("Error bootstrapping cross-signing", e);
         }
-        if (this._unmounted) return;
-        this._getUpdatedStatus();
-    }
+        if (this.unmounted) return;
+        this.getUpdatedStatus();
+    };
 
-    _resetCrossSigning = () => {
+    private resetCrossSigning = (): void => {
         Modal.createDialog(ConfirmDestroyCrossSigningDialog, {
             onFinished: (act) => {
                 if (!act) return;
-                this._bootstrapCrossSigning({ forceReset: true });
+                this.bootstrapCrossSigning({ forceReset: true });
             },
         });
-    }
+    };
 
-    render() {
+    public render() {
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
         const {
             error,
@@ -208,7 +211,7 @@ export default class CrossSigningPanel extends React.PureComponent {
         // TODO: determine how better to expose this to users in addition to prompts at login/toast
         if (!keysExistEverywhere && homeserverSupportsCrossSigning) {
             actions.push(
-                <AccessibleButton key="setup" kind="primary" onClick={this._onBootstrapClick}>
+                <AccessibleButton key="setup" kind="primary" onClick={this.onBootstrapClick}>
                     { _t("Set up") }
                 </AccessibleButton>,
             );
@@ -216,7 +219,7 @@ export default class CrossSigningPanel extends React.PureComponent {
 
         if (keysExistAnywhere) {
             actions.push(
-                <AccessibleButton key="reset" kind="danger" onClick={this._resetCrossSigning}>
+                <AccessibleButton key="reset" kind="danger" onClick={this.resetCrossSigning}>
                     { _t("Reset") }
                 </AccessibleButton>,
             );

src/components/views/settings/tabs/user/LabsUserSettingsTab.js

@@ -79,7 +79,7 @@ export default class LabsUserSettingsTab extends React.Component {
             let hiddenReadReceipts;
             if (this.state.showHiddenReadReceipts) {
                 hiddenReadReceipts = (
-                    <SettingsFlag name="feature_hidden_read_receipts" level={SettingLevel.ACCOUNT} />
+                    <SettingsFlag name="feature_hidden_read_receipts" level={SettingLevel.DEVICE} />
                 );
             }
 

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -15,7 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+
 import { _t } from "../../../../../languageHandler";
 import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -27,6 +29,18 @@ import SettingsFlag from '../../../elements/SettingsFlag';
 import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import SpaceStore from "../../../../../stores/SpaceStore";
+import GroupAvatar from "../../../avatars/GroupAvatar";
+import dis from "../../../../../dispatcher/dispatcher";
+import GroupActions from "../../../../../actions/GroupActions";
+import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
+import { useDispatcher } from "../../../../../hooks/useDispatcher";
+import { CreateEventField, IGroupSummary } from "../../../dialogs/CreateSpaceFromCommunityDialog";
+import { createSpaceFromCommunity } from "../../../../../utils/space";
+import Spinner from "../../../elements/Spinner";
+
+interface IProps {
+    closeSettingsFn(success: boolean): void;
+}
 
 interface IState {
     autoLaunch: boolean;
@@ -42,8 +56,86 @@ interface IState {
     readMarkerOutOfViewThresholdMs: string;
 }
 
+type Community = IGroupSummary & {
+    groupId: string;
+    spaceId?: string;
+};
+
+const CommunityMigrator = ({ onFinished }) => {
+    const cli = useContext(MatrixClientContext);
+    const [communities, setCommunities] = useState<Community[]>(null);
+    useEffect(() => {
+        dis.dispatch(GroupActions.fetchJoinedGroups(cli));
+    }, [cli]);
+    useDispatcher(dis, async payload => {
+        if (payload.action === "GroupActions.fetchJoinedGroups.success") {
+            const communities: Community[] = [];
+
+            const migratedSpaceMap = new Map(cli.getRooms().map(room => {
+                const createContent = room.currentState.getStateEvents(EventType.RoomCreate, "")?.getContent();
+                if (createContent?.[CreateEventField]) {
+                    return [createContent[CreateEventField], room.roomId] as [string, string];
+                }
+            }).filter(Boolean));
+
+            for (const groupId of payload.result.groups) {
+                const summary = await cli.getGroupSummary(groupId) as IGroupSummary;
+                if (summary.user.is_privileged) {
+                    communities.push({
+                        ...summary,
+                        groupId,
+                        spaceId: migratedSpaceMap.get(groupId),
+                    });
+                }
+            }
+
+            setCommunities(communities);
+        }
+    });
+
+    if (!communities) {
+        return <Spinner />;
+    }
+
+    return <div className="mx_PreferencesUserSettingsTab_CommunityMigrator">
+        { communities.map(community => (
+            <div key={community.groupId}>
+                <GroupAvatar
+                    groupId={community.groupId}
+                    groupAvatarUrl={community.profile.avatar_url}
+                    groupName={community.profile.name}
+                    width={32}
+                    height={32}
+                />
+                { community.profile.name }
+                <AccessibleButton
+                    kind="primary_outline"
+                    onClick={() => {
+                        if (community.spaceId) {
+                            dis.dispatch({
+                                action: "view_room",
+                                room_id: community.spaceId,
+                            });
+                            onFinished();
+                        } else {
+                            createSpaceFromCommunity(cli, community.groupId).then(([spaceId]) => {
+                                if (spaceId) {
+                                    community.spaceId = spaceId;
+                                    setCommunities([...communities]); // force component re-render
+                                }
+                            });
+                        }
+                    }}
+                >
+                    { community.spaceId ? _t("Open Space") : _t("Create Space") }
+                </AccessibleButton>
+            </div>
+        )) }
+    </div>;
+};
+
 @replaceableComponent("views.settings.tabs.user.PreferencesUserSettingsTab")
-export default class PreferencesUserSettingsTab extends React.Component<{}, IState> {
+export default class PreferencesUserSettingsTab extends React.Component<IProps, IState> {
     static ROOM_LIST_SETTINGS = [
         'breadcrumbs',
     ];
@@ -52,6 +144,10 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
         "Spaces.allRoomsInHome",
     ];
 
+    static COMMUNITIES_SETTINGS = [
+        // TODO: part of delabsing move the toggle here - https://github.com/vector-im/element-web/issues/18088
+    ];
+
     static KEYBINDINGS_SETTINGS = [
         'ctrlFForSearch',
     ];
@@ -242,6 +338,19 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
                     { this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS) }
                 </div> }
 
+                <div className="mx_SettingsTab_section">
+                    <span className="mx_SettingsTab_subheading">{ _t("Communities") }</span>
+                    <p>{ _t("Communities have been archived to make way for Spaces but you can convert your " +
+                        "communities into Spaces below. Converting will ensure your conversations get the latest " +
+                        "features.") }</p>
+                    <details>
+                        <summary>{ _t("Show my Communities") }</summary>
+                        <p>{ _t("If a community isn't shown you may not have permission to convert it.") }</p>
+                        <CommunityMigrator onFinished={this.props.closeSettingsFn} />
+                    </details>
+                    { this.renderGroup(PreferencesUserSettingsTab.COMMUNITIES_SETTINGS) }
+                </div>
+
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{ _t("Keyboard shortcuts") }</span>
                     <AccessibleButton className="mx_SettingsFlag" onClick={KeyboardShortcuts.toggleDialog}>

src/components/views/spaces/SpaceBasicSettings.tsx

@@ -65,6 +65,7 @@ export const SpaceAvatar = ({
                     }}
                     kind="link"
                     className="mx_SpaceBasicSettings_avatar_remove"
+                    aria-label={_t("Delete avatar")}
                 >
                     { _t("Delete") }
                 </AccessibleButton>
@@ -72,7 +73,11 @@ export const SpaceAvatar = ({
         } else {
             avatarSection = <React.Fragment>
                 <div className="mx_SpaceBasicSettings_avatar" onClick={() => avatarUploadRef.current?.click()} />
-                <AccessibleButton onClick={() => avatarUploadRef.current?.click()} kind="link">
+                <AccessibleButton
+                    onClick={() => avatarUploadRef.current?.click()}
+                    kind="link"
+                    aria-label={_t("Upload avatar")}
+                >
                     { _t("Upload") }
                 </AccessibleButton>
             </React.Fragment>;

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -18,22 +18,59 @@ import React, { ComponentProps, RefObject, SyntheticEvent, useContext, useRef, u
 import classNames from "classnames";
 import { RoomType } from "matrix-js-sdk/src/@types/event";
 import FocusLock from "react-focus-lock";
+import { HistoryVisibility, Preset } from "matrix-js-sdk/src/@types/partials";
+import { ICreateRoomOpts } from "matrix-js-sdk/src/@types/requests";
 
 import { _t } from "../../../languageHandler";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { ChevronFace, ContextMenu } from "../../structures/ContextMenu";
-import createRoom from "../../../createRoom";
+import createRoom, { IOpts as ICreateOpts } from "../../../createRoom";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import SpaceBasicSettings, { SpaceAvatar } from "./SpaceBasicSettings";
 import AccessibleButton from "../elements/AccessibleButton";
 import Field from "../elements/Field";
 import withValidation from "../elements/Validation";
-import { HistoryVisibility, Preset } from "matrix-js-sdk/src/@types/partials";
 import RoomAliasField from "../elements/RoomAliasField";
 import SdkConfig from "../../../SdkConfig";
 import Modal from "../../../Modal";
 import GenericFeatureFeedbackDialog from "../dialogs/GenericFeatureFeedbackDialog";
 import SettingsStore from "../../../settings/SettingsStore";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import { UserTab } from "../dialogs/UserSettingsDialog";
+
+export const createSpace = async (
+    name: string,
+    isPublic: boolean,
+    alias?: string,
+    topic?: string,
+    avatar?: string | File,
+    createOpts: Partial<ICreateRoomOpts> = {},
+    otherOpts: Partial<Omit<ICreateOpts, "createOpts">> = {},
+) => {
+    return createRoom({
+        createOpts: {
+            name,
+            preset: isPublic ? Preset.PublicChat : Preset.PrivateChat,
+            power_level_content_override: {
+                // Only allow Admins to write to the timeline to prevent hidden sync spam
+                events_default: 100,
+                ...isPublic ? { invite: 0 } : {},
+            },
+            room_alias_name: isPublic && alias ? alias.substr(1, alias.indexOf(":") - 1) : undefined,
+            topic,
+            ...createOpts,
+        },
+        avatar,
+        roomType: RoomType.Space,
+        historyVisibility: isPublic ? HistoryVisibility.WorldReadable : HistoryVisibility.Invited,
+        spinner: false,
+        encryption: false,
+        andView: true,
+        inlineErrors: true,
+        ...otherOpts,
+    });
+};
 
 const SpaceCreateMenuType = ({ title, description, className, onClick }) => {
     return (
@@ -92,7 +129,7 @@ export const SpaceFeedbackPrompt = ({ onClick }: { onClick?: () => void }) => {
     </div>;
 };
 
-type BProps = Pick<ComponentProps<typeof SpaceBasicSettings>, "setAvatar" | "name" | "setName" | "topic" | "setTopic">;
+type BProps = Omit<ComponentProps<typeof SpaceBasicSettings>, "nameDisabled" | "topicDisabled" | "avatarDisabled">;
 interface ISpaceCreateFormProps extends BProps {
     busy: boolean;
     alias: string;
@@ -106,6 +143,7 @@ interface ISpaceCreateFormProps extends BProps {
 export const SpaceCreateForm: React.FC<ISpaceCreateFormProps> = ({
     busy,
     onSubmit,
+    avatarUrl,
     setAvatar,
     name,
     setName,
@@ -122,7 +160,7 @@ export const SpaceCreateForm: React.FC<ISpaceCreateFormProps> = ({
     const domain = cli.getDomain();
 
     return <form className="mx_SpaceBasicSettings" onSubmit={onSubmit}>
-        <SpaceAvatar setAvatar={setAvatar} avatarDisabled={busy} />
+        <SpaceAvatar avatarUrl={avatarUrl} setAvatar={setAvatar} avatarDisabled={busy} />
 
         <Field
             name="spaceName"
@@ -200,30 +238,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
         }
 
         try {
-            await createRoom({
-                createOpts: {
-                    preset: visibility === Visibility.Public ? Preset.PublicChat : Preset.PrivateChat,
-                    name,
-                    power_level_content_override: {
-                        // Only allow Admins to write to the timeline to prevent hidden sync spam
-                        events_default: 100,
-                        ...visibility === Visibility.Public ? { invite: 0 } : {},
-                    },
-                    room_alias_name: visibility === Visibility.Public && alias
-                        ? alias.substr(1, alias.indexOf(":") - 1)
-                        : undefined,
-                    topic,
-                },
-                avatar,
-                roomType: RoomType.Space,
-                historyVisibility: visibility === Visibility.Public
-                    ? HistoryVisibility.WorldReadable
-                    : HistoryVisibility.Invited,
-                spinner: false,
-                encryption: false,
-                andView: true,
-                inlineErrors: true,
-            });
+            await createSpace(name, visibility === Visibility.Public, alias, topic, avatar);
 
             onFinished();
         } catch (e) {
@@ -233,10 +248,23 @@ const SpaceCreateMenu = ({ onFinished }) => {
 
     let body;
     if (visibility === null) {
+        const onCreateSpaceFromCommunityClick = () => {
+            defaultDispatcher.dispatch({
+                action: Action.ViewUserSettings,
+                initialTabId: UserTab.Preferences,
+            });
+            onFinished();
+        };
+
         body = <React.Fragment>
             <h2>{ _t("Create a space") }</h2>
-            <p>{ _t("Spaces are a new way to group rooms and people. " +
-                "To join an existing space you'll need an invite.") }</p>
+            <p>
+                { _t("Spaces are a new way to group rooms and people.") }
+                &nbsp;
+                { _t("What kind of Space do you want to create?") }
+                &nbsp;
+                { _t("You can change this later.") }
+            </p>
 
             <SpaceCreateMenuType
                 title={_t("Public")}
@@ -251,7 +279,15 @@ const SpaceCreateMenu = ({ onFinished }) => {
                 onClick={() => setVisibility(Visibility.Private)}
             />
 
-            <p>{ _t("You can change this later") }</p>
+            <p>
+                { _t("You can also create a Space from a <a>community</a>.", {}, {
+                    a: sub => <AccessibleButton kind="link" onClick={onCreateSpaceFromCommunityClick}>
+                        { sub }
+                    </AccessibleButton>,
+                }) }
+                <br />
+                { _t("To join an existing space you'll need an invite.") }
+            </p>
 
             <SpaceFeedbackPrompt onClick={onFinished} />
         </React.Fragment>;

src/components/views/spaces/SpacePanel.tsx

@@ -100,9 +100,12 @@ const HomeButton = ({ selected, isPanelCollapsed }: IHomeButtonProps) => {
         return SpaceStore.instance.allRoomsInHome;
     });
 
-    return <li className={classNames("mx_SpaceItem", {
-        "collapsed": isPanelCollapsed,
-    })}>
+    return <li
+        className={classNames("mx_SpaceItem", {
+            "collapsed": isPanelCollapsed,
+        })}
+        role="treeitem"
+    >
         <SpaceButton
             className="mx_SpaceButton_home"
             onClick={() => SpaceStore.instance.setActiveSpace(null)}
@@ -142,9 +145,12 @@ const CreateSpaceButton = ({
         openMenu();
     };
 
-    return <li className={classNames("mx_SpaceItem", {
-        "collapsed": isPanelCollapsed,
-    })}>
+    return <li
+        className={classNames("mx_SpaceItem", {
+            "collapsed": isPanelCollapsed,
+        })}
+        role="treeitem"
+    >
         <SpaceButton
             className={classNames("mx_SpaceButton_new", {
                 mx_SpaceButton_newCancel: menuDisplayed,
@@ -272,6 +278,8 @@ const SpacePanel = () => {
                     <ul
                         className={classNames("mx_SpacePanel", { collapsed: isPanelCollapsed })}
                         onKeyDown={onKeyDownHandler}
+                        role="tree"
+                        aria-label={_t("Spaces")}
                     >
                         <Droppable droppableId="top-level-spaces">
                             { (provided, snapshot) => (

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -77,11 +77,17 @@ export const SpaceButton: React.FC<IButtonProps> = ({
 
     let notifBadge;
     if (notificationState) {
+        let ariaLabel = _t("Jump to first unread room.");
+        if (space?.getMyMembership() === "invite") {
+            ariaLabel = _t("Jump to first invite.");
+        }
+
         notifBadge = <div className="mx_SpacePanel_badgeContainer">
             <NotificationBadge
                 onClick={() => SpaceStore.instance.setActiveRoomInSpace(space || null)}
                 forceCount={false}
                 notification={notificationState}
+                aria-label={ariaLabel}
             />
         </div>;
     }
@@ -107,7 +113,6 @@ export const SpaceButton: React.FC<IButtonProps> = ({
             onClick={onClick}
             onContextMenu={openMenu}
             forceHide={!isNarrow || menuDisplayed}
-            role="treeitem"
             inputRef={handle}
         >
             { children }
@@ -284,7 +289,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             /> : null;
 
         return (
-            <li {...otherProps} className={itemClasses} ref={innerRef}>
+            <li {...otherProps} className={itemClasses} ref={innerRef} aria-expanded={!collapsed} role="treeitem">
                 <SpaceButton
                     space={space}
                     className={isInvite ? "mx_SpaceButton_invite" : undefined}
@@ -296,9 +301,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                     avatarSize={isNested ? 24 : 32}
                     onClick={this.onClick}
                     onKeyDown={this.onKeyDown}
-                    aria-expanded={!collapsed}
-                    ContextMenuComponent={this.props.space.getMyMembership() === "join"
-                        ? SpaceContextMenu : undefined}
+                    ContextMenuComponent={this.props.space.getMyMembership() === "join" ? SpaceContextMenu : undefined}
                 >
                     { toggleCollapseButton }
                 </SpaceButton>
@@ -322,7 +325,7 @@ const SpaceTreeLevel: React.FC<ITreeLevelProps> = ({
     isNested,
     parents,
 }) => {
-    return <ul className="mx_SpaceTreeLevel">
+    return <ul className="mx_SpaceTreeLevel" role="group">
         { spaces.map(s => {
             return (<SpaceItem
                 key={s.roomId}

src/components/views/voip/CallView.tsx

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
 Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -27,15 +27,7 @@ import { CallEvent, CallState, CallType, MatrixCall } from 'matrix-js-sdk/src/we
 import classNames from 'classnames';
 import AccessibleButton from '../elements/AccessibleButton';
 import { isOnlyCtrlOrCmdKeyEvent, Key } from '../../../Keyboard';
-import {
-    alwaysAboveLeftOf,
-    alwaysAboveRightOf,
-    ChevronFace,
-    ContextMenuTooltipButton,
-} from '../../structures/ContextMenu';
-import CallContextMenu from '../context_menus/CallContextMenu';
 import { avatarUrlForMember } from '../../../Avatar';
-import DialpadContextMenu from '../context_menus/DialpadContextMenu';
 import { CallFeed } from 'matrix-js-sdk/src/webrtc/callFeed';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import DesktopCapturerSourcePicker from "../elements/DesktopCapturerSourcePicker";
@@ -43,8 +35,7 @@ import Modal from '../../../Modal';
 import { SDPStreamMetadataPurpose } from 'matrix-js-sdk/src/webrtc/callEventTypes';
 import CallViewSidebar from './CallViewSidebar';
 import CallViewHeader from './CallView/CallViewHeader';
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import { Alignment } from "../elements/Tooltip";
+import CallViewButtons from "./CallView/CallViewButtons";
 
 interface IProps {
     // The call for us to display
@@ -83,8 +74,6 @@ interface IState {
     sidebarShown: boolean;
 }
 
-const tooltipYOffset = -24;
-
 function getFullScreenElement() {
     return (
         document.fullscreenElement ||
@@ -113,23 +102,16 @@ function exitFullscreen() {
     if (exitMethod) exitMethod.call(document);
 }
 
-const CONTROLS_HIDE_DELAY = 2000;
-// Height of the header duplicated from CSS because we need to subtract it from our max
-// height to get the max height of the video
-const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px)
-
 @replaceableComponent("views.voip.CallView")
 export default class CallView extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     private contentRef = createRef<HTMLDivElement>();
-    private controlsHideTimer: number = null;
-    private dialpadButton = createRef<HTMLDivElement>();
-    private contextMenuButton = createRef<HTMLDivElement>();
+    private buttonsRef = createRef<CallViewButtons>();
 
     constructor(props: IProps) {
         super(props);
 
-        const { primary, secondary } = this.getOrderedFeeds(this.props.call.getFeeds());
+        const { primary, secondary } = CallView.getOrderedFeeds(this.props.call.getFeeds());
 
         this.state = {
             isLocalOnHold: this.props.call.isLocalOnHold(),
@@ -153,7 +135,6 @@ export default class CallView extends React.Component<IProps, IState> {
     public componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         document.addEventListener('keydown', this.onNativeKeyDown);
-        this.showControls();
     }
 
     public componentWillUnmount() {
@@ -166,7 +147,16 @@ export default class CallView extends React.Component<IProps, IState> {
         dis.unregister(this.dispatcherRef);
     }
 
-    public componentDidUpdate(prevProps) {
+    static getDerivedStateFromProps(props: IProps): Partial<IState> {
+        const { primary, secondary } = CallView.getOrderedFeeds(props.call.getFeeds());
+
+        return {
+            primaryFeed: primary,
+            secondaryFeeds: secondary,
+        };
+    }
+
+    public componentDidUpdate(prevProps: IProps): void {
         if (this.props.call === prevProps.call) return;
 
         this.setState({
@@ -220,7 +210,7 @@ export default class CallView extends React.Component<IProps, IState> {
     };
 
     private onFeedsChanged = (newFeeds: Array<CallFeed>) => {
-        const { primary, secondary } = this.getOrderedFeeds(newFeeds);
+        const { primary, secondary } = CallView.getOrderedFeeds(newFeeds);
         this.setState({
             primaryFeed: primary,
             secondaryFeeds: secondary,
@@ -241,19 +231,11 @@ export default class CallView extends React.Component<IProps, IState> {
         });
     };
 
-    private onControlsHideTimer = () => {
-        if (this.state.hoveringControls || this.state.showDialpad || this.state.showMoreMenu) return;
-        this.controlsHideTimer = null;
-        this.setState({
-            controlsVisible: false,
-        });
-    };
-
     private onMouseMove = () => {
-        this.showControls();
+        this.buttonsRef.current?.showControls();
     };
 
-    private getOrderedFeeds(feeds: Array<CallFeed>): { primary: CallFeed, secondary: Array<CallFeed> } {
+    static getOrderedFeeds(feeds: Array<CallFeed>): { primary: CallFeed, secondary: Array<CallFeed> } {
         let primary;
 
         // Try to use a screensharing as primary, a remote one if possible
@@ -276,29 +258,6 @@ export default class CallView extends React.Component<IProps, IState> {
         return { primary, secondary };
     }
 
-    private showControls(): void {
-        if (this.state.showMoreMenu || this.state.showDialpad) return;
-
-        if (!this.state.controlsVisible) {
-            this.setState({
-                controlsVisible: true,
-            });
-        }
-        if (this.controlsHideTimer !== null) {
-            clearTimeout(this.controlsHideTimer);
-        }
-        this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
-    }
-
-    private onDialpadClick = (): void => {
-        if (!this.state.showDialpad) {
-            this.setState({ showDialpad: true });
-            this.showControls();
-        } else {
-            this.setState({ showDialpad: false });
-        }
-    };
-
     private onMicMuteClick = (): void => {
         const newVal = !this.state.micMuted;
 
@@ -329,19 +288,6 @@ export default class CallView extends React.Component<IProps, IState> {
         });
     };
 
-    private onMoreClick = (): void => {
-        this.setState({ showMoreMenu: true });
-        this.showControls();
-    };
-
-    private closeDialpad = (): void => {
-        this.setState({ showDialpad: false });
-    };
-
-    private closeContextMenu = (): void => {
-        this.setState({ showMoreMenu: false });
-    };
-
     // we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
     // Note that this assumes we always have a CallView on screen at any given time
     // CallHandler would probably be a better place for this
@@ -354,7 +300,7 @@ export default class CallView extends React.Component<IProps, IState> {
                 if (ctrlCmdOnly) {
                     this.onMicMuteClick();
                     // show the controls to give feedback
-                    this.showControls();
+                    this.buttonsRef.current?.showControls();
                     handled = true;
                 }
                 break;
@@ -363,7 +309,7 @@ export default class CallView extends React.Component<IProps, IState> {
                 if (ctrlCmdOnly) {
                     this.onVidMuteClick();
                     // show the controls to give feedback
-                    this.showControls();
+                    this.buttonsRef.current?.showControls();
                     handled = true;
                 }
                 break;
@@ -375,15 +321,6 @@ export default class CallView extends React.Component<IProps, IState> {
         }
     };
 
-    private onCallControlsMouseEnter = (): void => {
-        this.setState({ hoveringControls: true });
-        this.showControls();
-    };
-
-    private onCallControlsMouseLeave = (): void => {
-        this.setState({ hoveringControls: false });
-    };
-
     private onCallResumeClick = (): void => {
         const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
         CallHandler.sharedInstance().setActiveCallRoomId(userFacingRoomId);
@@ -402,206 +339,60 @@ export default class CallView extends React.Component<IProps, IState> {
     };
 
     private onToggleSidebar = (): void => {
-        this.setState({
-            sidebarShown: !this.state.sidebarShown,
-        });
+        this.setState({ sidebarShown: !this.state.sidebarShown });
     };
 
     private renderCallControls(): JSX.Element {
-        const micClasses = classNames({
-            mx_CallView_callControls_button: true,
-            mx_CallView_callControls_button_micOn: !this.state.micMuted,
-            mx_CallView_callControls_button_micOff: this.state.micMuted,
-        });
-
-        const vidClasses = classNames({
-            mx_CallView_callControls_button: true,
-            mx_CallView_callControls_button_vidOn: !this.state.vidMuted,
-            mx_CallView_callControls_button_vidOff: this.state.vidMuted,
-        });
-
-        const screensharingClasses = classNames({
-            mx_CallView_callControls_button: true,
-            mx_CallView_callControls_button_screensharingOn: this.state.screensharing,
-            mx_CallView_callControls_button_screensharingOff: !this.state.screensharing,
-        });
-
-        const sidebarButtonClasses = classNames({
-            mx_CallView_callControls_button: true,
-            mx_CallView_callControls_button_sidebarOn: this.state.sidebarShown,
-            mx_CallView_callControls_button_sidebarOff: !this.state.sidebarShown,
-        });
-
-        // Put the other states of the mic/video icons in the document to make sure they're cached
-        // (otherwise the icon disappears briefly when toggled)
-        const micCacheClasses = classNames({
-            mx_CallView_callControls_button: true,
-            mx_CallView_callControls_button_micOn: this.state.micMuted,
-            mx_CallView_callControls_button_micOff: !this.state.micMuted,
-            mx_CallView_callControls_button_invisible: true,
-        });
-
-        const vidCacheClasses = classNames({
-            mx_CallView_callControls_button: true,
-            mx_CallView_callControls_button_vidOn: this.state.micMuted,
-            mx_CallView_callControls_button_vidOff: !this.state.micMuted,
-            mx_CallView_callControls_button_invisible: true,
-        });
-
-        const callControlsClasses = classNames({
-            mx_CallView_callControls: true,
-            mx_CallView_callControls_hidden: !this.state.controlsVisible,
-        });
-
         // We don't support call upgrades (yet) so hide the video mute button in voice calls
-        let vidMuteButton;
-        if (this.props.call.type === CallType.Video) {
-            vidMuteButton = (
-                <AccessibleTooltipButton
-                    className={vidClasses}
-                    onClick={this.onVidMuteClick}
-                    title={this.state.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
-                    alignment={Alignment.Top}
-                    yOffset={tooltipYOffset}
-                />
-            );
-        }
-
+        const vidMuteButtonShown = this.props.call.type === CallType.Video;
         // Screensharing is possible, if we can send a second stream and
         // identify it using SDPStreamMetadata or if we can replace the already
         // existing usermedia track by a screensharing track. We also need to be
         // connected to know the state of the other side
-        let screensharingButton;
-        if (
+        const screensharingButtonShown = (
             (this.props.call.opponentSupportsSDPStreamMetadata() || this.props.call.type === CallType.Video) &&
             this.props.call.state === CallState.Connected
-        ) {
-            screensharingButton = (
-                <AccessibleTooltipButton
-                    className={screensharingClasses}
-                    onClick={this.onScreenshareClick}
-                    title={this.state.screensharing
-                        ? _t("Stop sharing your screen")
-                        : _t("Start sharing your screen")
-                    }
-                    alignment={Alignment.Top}
-                    yOffset={tooltipYOffset}
-                />
-            );
-        }
-
+        );
         // To show the sidebar we need secondary feeds, if we don't have them,
         // we can hide this button. If we are in PiP, sidebar is also hidden, so
         // we can hide the button too
-        let sidebarButton;
-        if (
-            !this.props.pipMode &&
-            (
-                this.state.primaryFeed?.purpose === SDPStreamMetadataPurpose.Screenshare ||
-                this.props.call.isScreensharing()
-            )
-        ) {
-            sidebarButton = (
-                <AccessibleButton
-                    className={sidebarButtonClasses}
-                    onClick={this.onToggleSidebar}
-                    aria-label={this.state.sidebarShown ? _t("Hide sidebar") : _t("Show sidebar")}
-                />
-            );
-        }
-
+        const sidebarButtonShown = (
+            this.state.primaryFeed?.purpose === SDPStreamMetadataPurpose.Screenshare ||
+            this.props.call.isScreensharing()
+        );
         // The dial pad & 'more' button actions are only relevant in a connected call
-        let contextMenuButton;
-        if (this.state.callState === CallState.Connected) {
-            contextMenuButton = (
-                <ContextMenuTooltipButton
-                    className="mx_CallView_callControls_button mx_CallView_callControls_button_more"
-                    onClick={this.onMoreClick}
-                    inputRef={this.contextMenuButton}
-                    isExpanded={this.state.showMoreMenu}
-                    title={_t("More")}
-                    alignment={Alignment.Top}
-                    yOffset={tooltipYOffset}
-                />
-            );
-        }
-        let dialpadButton;
-        if (this.state.callState === CallState.Connected && this.props.call.opponentSupportsDTMF()) {
-            dialpadButton = (
-                <ContextMenuTooltipButton
-                    className="mx_CallView_callControls_button mx_CallView_callControls_dialpad"
-                    inputRef={this.dialpadButton}
-                    onClick={this.onDialpadClick}
-                    isExpanded={this.state.showDialpad}
-                    title={_t("Dialpad")}
-                    alignment={Alignment.Top}
-                    yOffset={tooltipYOffset}
-                />
-            );
-        }
-
-        let dialPad;
-        if (this.state.showDialpad) {
-            dialPad = <DialpadContextMenu
-                {...alwaysAboveRightOf(
-                    this.dialpadButton.current.getBoundingClientRect(),
-                    ChevronFace.None,
-                    CONTEXT_MENU_VPADDING,
-                )}
-                // We mount the context menus as a as a child typically in order to include the
-                // context menus when fullscreening the call content.
-                // However, this does not work as well when the call is embedded in a
-                // picture-in-picture frame. Thus, only mount as child when we are *not* in PiP.
-                mountAsChild={!this.props.pipMode}
-                onFinished={this.closeDialpad}
-                call={this.props.call}
-            />;
-        }
-
-        let contextMenu;
-        if (this.state.showMoreMenu) {
-            contextMenu = <CallContextMenu
-                {...alwaysAboveLeftOf(
-                    this.contextMenuButton.current.getBoundingClientRect(),
-                    ChevronFace.None,
-                    CONTEXT_MENU_VPADDING,
-                )}
-                mountAsChild={!this.props.pipMode}
-                onFinished={this.closeContextMenu}
-                call={this.props.call}
-            />;
-        }
+        const contextMenuButtonShown = this.state.callState === CallState.Connected;
+        const dialpadButtonShown = (
+            this.state.callState === CallState.Connected &&
+            this.props.call.opponentSupportsDTMF()
+        );
 
         return (
-            <div
-                className={callControlsClasses}
-                onMouseEnter={this.onCallControlsMouseEnter}
-                onMouseLeave={this.onCallControlsMouseLeave}
-            >
-                { dialPad }
-                { contextMenu }
-                { dialpadButton }
-                <AccessibleTooltipButton
-                    className={micClasses}
-                    onClick={this.onMicMuteClick}
-                    title={this.state.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
-                    alignment={Alignment.Top}
-                    yOffset={tooltipYOffset}
-                />
-                { vidMuteButton }
-                <div className={micCacheClasses} />
-                <div className={vidCacheClasses} />
-                { screensharingButton }
-                { sidebarButton }
-                { contextMenuButton }
-                <AccessibleTooltipButton
-                    className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"
-                    onClick={this.onHangupClick}
-                    title={_t("Hangup")}
-                    alignment={Alignment.Top}
-                    yOffset={tooltipYOffset}
-                />
-            </div>
+            <CallViewButtons
+                ref={this.buttonsRef}
+                call={this.props.call}
+                pipMode={this.props.pipMode}
+                handlers={{
+                    onToggleSidebarClick: this.onToggleSidebar,
+                    onScreenshareClick: this.onScreenshareClick,
+                    onHangupClick: this.onHangupClick,
+                    onMicMuteClick: this.onMicMuteClick,
+                    onVidMuteClick: this.onVidMuteClick,
+                }}
+                buttonsState={{
+                    micMuted: this.state.micMuted,
+                    vidMuted: this.state.vidMuted,
+                    sidebarShown: this.state.sidebarShown,
+                    screensharing: this.state.screensharing,
+                }}
+                buttonsVisibility={{
+                    vidMute: vidMuteButtonShown,
+                    screensharing: screensharingButtonShown,
+                    sidebar: sidebarButtonShown,
+                    contextMenu: contextMenuButtonShown,
+                    dialpad: dialpadButtonShown,
+                }}
+            />
         );
     }
 

src/components/views/voip/CallView/CallViewButtons.tsx

@@ -0,0 +1,316 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { createRef } from "react";
+import classNames from "classnames";
+import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
+import CallContextMenu from "../../context_menus/CallContextMenu";
+import DialpadContextMenu from "../../context_menus/DialpadContextMenu";
+import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+import { Alignment } from "../../elements/Tooltip";
+import {
+    alwaysAboveLeftOf,
+    alwaysAboveRightOf,
+    ChevronFace,
+    ContextMenuTooltipButton,
+} from '../../../structures/ContextMenu';
+import { _t } from "../../../../languageHandler";
+
+// Height of the header duplicated from CSS because we need to subtract it from our max
+// height to get the max height of the video
+const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px)
+
+const TOOLTIP_Y_OFFSET = -24;
+
+const CONTROLS_HIDE_DELAY = 2000;
+
+interface IProps {
+    call: MatrixCall;
+    pipMode: boolean;
+    handlers: {
+        onHangupClick: () => void;
+        onScreenshareClick: () => void;
+        onToggleSidebarClick: () => void;
+        onMicMuteClick: () => void;
+        onVidMuteClick: () => void;
+    };
+    buttonsState: {
+        micMuted: boolean;
+        vidMuted: boolean;
+        sidebarShown: boolean;
+        screensharing: boolean;
+    };
+    buttonsVisibility: {
+        screensharing: boolean;
+        vidMute: boolean;
+        sidebar: boolean;
+        dialpad: boolean;
+        contextMenu: boolean;
+    };
+}
+
+interface IState {
+    visible: boolean;
+    showDialpad: boolean;
+    hoveringControls: boolean;
+    showMoreMenu: boolean;
+}
+
+export default class CallViewButtons extends React.Component<IProps, IState> {
+    private dialpadButton = createRef<HTMLDivElement>();
+    private contextMenuButton = createRef<HTMLDivElement>();
+    private controlsHideTimer: number = null;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            showDialpad: false,
+            hoveringControls: false,
+            showMoreMenu: false,
+            visible: true,
+        };
+    }
+
+    public componentDidMount(): void {
+        this.showControls();
+    }
+
+    public showControls(): void {
+        if (this.state.showMoreMenu || this.state.showDialpad) return;
+
+        if (!this.state.visible) {
+            this.setState({
+                visible: true,
+            });
+        }
+        if (this.controlsHideTimer !== null) {
+            clearTimeout(this.controlsHideTimer);
+        }
+        this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
+    }
+
+    private onControlsHideTimer = (): void => {
+        if (this.state.hoveringControls || this.state.showDialpad || this.state.showMoreMenu) return;
+        this.controlsHideTimer = null;
+        this.setState({ visible: false });
+    };
+
+    private onMouseEnter = (): void => {
+        this.setState({ hoveringControls: true });
+    };
+
+    private onMouseLeave = (): void => {
+        this.setState({ hoveringControls: false });
+    };
+
+    private onDialpadClick = (): void => {
+        if (!this.state.showDialpad) {
+            this.setState({ showDialpad: true });
+            this.showControls();
+        } else {
+            this.setState({ showDialpad: false });
+        }
+    };
+
+    private onMoreClick = (): void => {
+        this.setState({ showMoreMenu: true });
+        this.showControls();
+    };
+
+    private closeDialpad = (): void => {
+        this.setState({ showDialpad: false });
+    };
+
+    private closeContextMenu = (): void => {
+        this.setState({ showMoreMenu: false });
+    };
+
+    public render(): JSX.Element {
+        const micClasses = classNames("mx_CallViewButtons_button", {
+            mx_CallViewButtons_button_micOn: !this.props.buttonsState.micMuted,
+            mx_CallViewButtons_button_micOff: this.props.buttonsState.micMuted,
+        });
+
+        const vidClasses = classNames("mx_CallViewButtons_button", {
+            mx_CallViewButtons_button_vidOn: !this.props.buttonsState.vidMuted,
+            mx_CallViewButtons_button_vidOff: this.props.buttonsState.vidMuted,
+        });
+
+        const screensharingClasses = classNames("mx_CallViewButtons_button", {
+            mx_CallViewButtons_button_screensharingOn: this.props.buttonsState.screensharing,
+            mx_CallViewButtons_button_screensharingOff: !this.props.buttonsState.screensharing,
+        });
+
+        const sidebarButtonClasses = classNames("mx_CallViewButtons_button", {
+            mx_CallViewButtons_button_sidebarOn: this.props.buttonsState.sidebarShown,
+            mx_CallViewButtons_button_sidebarOff: !this.props.buttonsState.sidebarShown,
+        });
+
+        // Put the other states of the mic/video icons in the document to make sure they're cached
+        // (otherwise the icon disappears briefly when toggled)
+        const micCacheClasses = classNames("mx_CallViewButtons_button", "mx_CallViewButtons_button_invisible", {
+            mx_CallViewButtons_button_micOn: this.props.buttonsState.micMuted,
+            mx_CallViewButtons_button_micOff: !this.props.buttonsState.micMuted,
+        });
+
+        const vidCacheClasses = classNames("mx_CallViewButtons_button", "mx_CallViewButtons_button_invisible", {
+            mx_CallViewButtons_button_vidOn: this.props.buttonsState.micMuted,
+            mx_CallViewButtons_button_vidOff: !this.props.buttonsState.micMuted,
+        });
+
+        const callControlsClasses = classNames("mx_CallViewButtons", {
+            mx_CallViewButtons_hidden: !this.state.visible,
+        });
+
+        let vidMuteButton;
+        if (this.props.buttonsVisibility.vidMute) {
+            vidMuteButton = (
+                <AccessibleTooltipButton
+                    className={vidClasses}
+                    onClick={this.props.handlers.onVidMuteClick}
+                    title={this.props.buttonsState.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
+                    alignment={Alignment.Top}
+                    yOffset={TOOLTIP_Y_OFFSET}
+                />
+            );
+        }
+
+        let screensharingButton;
+        if (this.props.buttonsVisibility.screensharing) {
+            screensharingButton = (
+                <AccessibleTooltipButton
+                    className={screensharingClasses}
+                    onClick={this.props.handlers.onScreenshareClick}
+                    title={this.props.buttonsState.screensharing
+                        ? _t("Stop sharing your screen")
+                        : _t("Start sharing your screen")
+                    }
+                    alignment={Alignment.Top}
+                    yOffset={TOOLTIP_Y_OFFSET}
+                />
+            );
+        }
+
+        let sidebarButton;
+        if (this.props.buttonsVisibility.sidebar) {
+            sidebarButton = (
+                <AccessibleTooltipButton
+                    className={sidebarButtonClasses}
+                    onClick={this.props.handlers.onToggleSidebarClick}
+                    title={this.props.buttonsState.sidebarShown ? _t("Hide sidebar") : _t("Show sidebar")}
+                    alignment={Alignment.Top}
+                    yOffset={TOOLTIP_Y_OFFSET}
+                />
+            );
+        }
+
+        let contextMenuButton;
+        if (this.props.buttonsVisibility.contextMenu) {
+            contextMenuButton = (
+                <ContextMenuTooltipButton
+                    className="mx_CallViewButtons_button mx_CallViewButtons_button_more"
+                    onClick={this.onMoreClick}
+                    inputRef={this.contextMenuButton}
+                    isExpanded={this.state.showMoreMenu}
+                    title={_t("More")}
+                    alignment={Alignment.Top}
+                    yOffset={TOOLTIP_Y_OFFSET}
+                />
+            );
+        }
+        let dialpadButton;
+        if (this.props.buttonsVisibility.dialpad) {
+            dialpadButton = (
+                <ContextMenuTooltipButton
+                    className="mx_CallViewButtons_button mx_CallViewButtons_dialpad"
+                    inputRef={this.dialpadButton}
+                    onClick={this.onDialpadClick}
+                    isExpanded={this.state.showDialpad}
+                    title={_t("Dialpad")}
+                    alignment={Alignment.Top}
+                    yOffset={TOOLTIP_Y_OFFSET}
+                />
+            );
+        }
+
+        let dialPad;
+        if (this.state.showDialpad) {
+            dialPad = <DialpadContextMenu
+                {...alwaysAboveRightOf(
+                    this.dialpadButton.current.getBoundingClientRect(),
+                    ChevronFace.None,
+                    CONTEXT_MENU_VPADDING,
+                )}
+                // We mount the context menus as a as a child typically in order to include the
+                // context menus when fullscreening the call content.
+                // However, this does not work as well when the call is embedded in a
+                // picture-in-picture frame. Thus, only mount as child when we are *not* in PiP.
+                mountAsChild={!this.props.pipMode}
+                onFinished={this.closeDialpad}
+                call={this.props.call}
+            />;
+        }
+
+        let contextMenu;
+        if (this.state.showMoreMenu) {
+            contextMenu = <CallContextMenu
+                {...alwaysAboveLeftOf(
+                    this.contextMenuButton.current.getBoundingClientRect(),
+                    ChevronFace.None,
+                    CONTEXT_MENU_VPADDING,
+                )}
+                mountAsChild={!this.props.pipMode}
+                onFinished={this.closeContextMenu}
+                call={this.props.call}
+            />;
+        }
+
+        return (
+            <div
+                className={callControlsClasses}
+                onMouseEnter={this.onMouseEnter}
+                onMouseLeave={this.onMouseLeave}
+            >
+                { dialPad }
+                { contextMenu }
+                { dialpadButton }
+                <AccessibleTooltipButton
+                    className={micClasses}
+                    onClick={this.props.handlers.onMicMuteClick}
+                    title={this.props.buttonsState.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
+                    alignment={Alignment.Top}
+                    yOffset={TOOLTIP_Y_OFFSET}
+                />
+                { vidMuteButton }
+                <div className={micCacheClasses} />
+                <div className={vidCacheClasses} />
+                { screensharingButton }
+                { sidebarButton }
+                { contextMenuButton }
+                <AccessibleTooltipButton
+                    className="mx_CallViewButtons_button mx_CallViewButtons_button_hangup"
+                    onClick={this.props.handlers.onHangupClick}
+                    title={_t("Hangup")}
+                    alignment={Alignment.Top}
+                    yOffset={TOOLTIP_Y_OFFSET}
+                />
+            </div>
+        );
+    }
+}

src/components/views/voip/DialPad.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import * as React from "react";
-import AccessibleButton from "../elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const BUTTONS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
@@ -30,12 +30,12 @@ interface IButtonProps {
     kind: DialPadButtonKind;
     digit?: string;
     digitSubtext?: string;
-    onButtonPress: (string) => void;
+    onButtonPress: (digit: string, ev: ButtonEvent) => void;
 }
 
 class DialPadButton extends React.PureComponent<IButtonProps> {
-    onClick = () => {
-        this.props.onButtonPress(this.props.digit);
+    onClick = (ev: ButtonEvent) => {
+        this.props.onButtonPress(this.props.digit, ev);
     };
 
     render() {
@@ -54,10 +54,10 @@ class DialPadButton extends React.PureComponent<IButtonProps> {
 }
 
 interface IProps {
-    onDigitPress: (string) => void;
+    onDigitPress: (digit: string, ev: ButtonEvent) => void;
     hasDial: boolean;
-    onDeletePress?: (string) => void;
-    onDialPress?: (string) => void;
+    onDeletePress?: (ev: ButtonEvent) => void;
+    onDialPress?: () => void;
 }
 
 @replaceableComponent("views.voip.DialPad")

src/components/views/voip/DialPadModal.tsx

@@ -15,7 +15,8 @@ limitations under the License.
 */
 
 import * as React from "react";
-import AccessibleButton from "../elements/AccessibleButton";
+import { createRef } from "react";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import Field from "../elements/Field";
 import DialPad from './DialPad';
 import dis from '../../../dispatcher/dispatcher';
@@ -34,6 +35,8 @@ interface IState {
 
 @replaceableComponent("views.voip.DialPadModal")
 export default class DialpadModal extends React.PureComponent<IProps, IState> {
+    private numberEntryFieldRef: React.RefObject<Field> = createRef();
+
     constructor(props) {
         super(props);
         this.state = {
@@ -54,13 +57,27 @@ export default class DialpadModal extends React.PureComponent<IProps, IState> {
         this.onDialPress();
     };
 
-    onDigitPress = (digit) => {
+    onDigitPress = (digit: string, ev: ButtonEvent) => {
         this.setState({ value: this.state.value + digit });
+
+        // Keep the number field focused so that keyboard entry is still available.
+        // However, don't focus if this wasn't the result of directly clicking on the button,
+        // i.e someone using keyboard navigation.
+        if (ev.type === "click") {
+            this.numberEntryFieldRef.current?.focus();
+        }
     };
 
-    onDeletePress = () => {
+    onDeletePress = (ev: ButtonEvent) => {
         if (this.state.value.length === 0) return;
         this.setState({ value: this.state.value.slice(0, -1) });
+
+        // Keep the number field focused so that keyboard entry is still available
+        // However, don't focus if this wasn't the result of directly clicking on the button,
+        // i.e someone using keyboard navigation.
+        if (ev.type === "click") {
+            this.numberEntryFieldRef.current?.focus();
+        }
     };
 
     onDialPress = async () => {
@@ -82,6 +99,7 @@ export default class DialpadModal extends React.PureComponent<IProps, IState> {
         let dialPadField;
         if (this.state.value.length !== 0) {
             dialPadField = <Field
+                ref={this.numberEntryFieldRef}
                 className="mx_DialPadModal_field"
                 id="dialpad_number"
                 value={this.state.value}
@@ -91,6 +109,7 @@ export default class DialpadModal extends React.PureComponent<IProps, IState> {
             />;
         } else {
             dialPadField = <Field
+                ref={this.numberEntryFieldRef}
                 className="mx_DialPadModal_field"
                 id="dialpad_number"
                 value={this.state.value}