Merge remote-tracking branch 'origin' into sentry-rageshakes

src/CallHandler.tsx

@@ -86,7 +86,7 @@ import { randomUppercaseString, randomLowercaseString } from "matrix-js-sdk/src/
 import EventEmitter from 'events';
 import SdkConfig from './SdkConfig';
 import { ensureDMExists, findDMForUser } from './createRoom';
-import { IPushRule, RuleId, TweakName, Tweaks } from "matrix-js-sdk/src/@types/PushRules";
+import { RuleId, TweakName, Tweaks } from "matrix-js-sdk/src/@types/PushRules";
 import { PushProcessor } from 'matrix-js-sdk/src/pushprocessor';
 import { WidgetLayoutStore, Container } from './stores/widgets/WidgetLayoutStore';
 import { getIncomingCallToastKey } from './toasts/IncomingCallToast';
@@ -484,7 +484,7 @@ export default class CallHandler extends EventEmitter {
             switch (newState) {
                 case CallState.Ringing: {
                     const incomingCallPushRule = (
-                        new PushProcessor(MatrixClientPeg.get()).getPushRuleById(RuleId.IncomingCall) as IPushRule
+                        new PushProcessor(MatrixClientPeg.get()).getPushRuleById(RuleId.IncomingCall)
                     );
                     const pushRuleEnabled = incomingCallPushRule?.enabled;
                     const tweakSetToRing = incomingCallPushRule?.actions.some((action: Tweaks) => (

src/KeyBindingsDefaults.ts

@@ -161,31 +161,29 @@ const messageComposerBindings = (): KeyBinding<MessageComposerAction>[] => {
 const autocompleteBindings = (): KeyBinding<AutocompleteAction>[] => {
     return [
         {
-            action: AutocompleteAction.CompleteOrNextSelection,
+            action: AutocompleteAction.ForceComplete,
             keyCombo: {
                 key: Key.TAB,
             },
         },
         {
-            action: AutocompleteAction.CompleteOrNextSelection,
+            action: AutocompleteAction.ForceComplete,
             keyCombo: {
                 key: Key.TAB,
                 ctrlKey: true,
             },
         },
         {
-            action: AutocompleteAction.CompleteOrPrevSelection,
+            action: AutocompleteAction.Complete,
             keyCombo: {
-                key: Key.TAB,
-                shiftKey: true,
+                key: Key.ENTER,
             },
         },
         {
-            action: AutocompleteAction.CompleteOrPrevSelection,
+            action: AutocompleteAction.Complete,
             keyCombo: {
-                key: Key.TAB,
+                key: Key.ENTER,
                 ctrlKey: true,
-                shiftKey: true,
             },
         },
         {

src/KeyBindingsManager.ts

@@ -52,13 +52,11 @@ export enum MessageComposerAction {
 
 /** Actions for text editing autocompletion */
 export enum AutocompleteAction {
-    /**
-     * Select previous selection or, if the autocompletion window is not shown, open the window and select the first
-     * selection.
-     */
-    CompleteOrPrevSelection = 'ApplySelection',
-    /** Select next selection or, if the autocompletion window is not shown, open it and select the first selection */
-    CompleteOrNextSelection = 'CompleteOrNextSelection',
+    /** Accepts chosen autocomplete selection */
+    Complete = 'Complete',
+    /** Accepts chosen autocomplete selection or,
+     * if the autocompletion window is not shown, open the window and select the first selection */
+    ForceComplete = 'ForceComplete',
     /** Move to the previous autocomplete selection */
     PrevSelection = 'PrevSelection',
     /** Move to the next autocomplete selection */

src/accessibility/RovingTabIndex.tsx

@@ -150,13 +150,14 @@ const reducer = (state: IState, action: IAction) => {
 
 interface IProps {
     handleHomeEnd?: boolean;
+    handleUpDown?: boolean;
     children(renderProps: {
         onKeyDownHandler(ev: React.KeyboardEvent);
     });
     onKeyDown?(ev: React.KeyboardEvent, state: IState);
 }
 
-export const RovingTabIndexProvider: React.FC<IProps> = ({ children, handleHomeEnd, onKeyDown }) => {
+export const RovingTabIndexProvider: React.FC<IProps> = ({ children, handleHomeEnd, handleUpDown, onKeyDown }) => {
     const [state, dispatch] = useReducer<Reducer<IState, IAction>>(reducer, {
         activeRef: null,
         refs: [],
@@ -167,21 +168,50 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({ children, handleHomeE
     const onKeyDownHandler = useCallback((ev) => {
         let handled = false;
         // Don't interfere with input default keydown behaviour
-        if (handleHomeEnd && ev.target.tagName !== "INPUT" && ev.target.tagName !== "TEXTAREA") {
+        if (ev.target.tagName !== "INPUT" && ev.target.tagName !== "TEXTAREA") {
             // check if we actually have any items
             switch (ev.key) {
                 case Key.HOME:
-                    handled = true;
-                    // move focus to first item
-                    if (context.state.refs.length > 0) {
-                        context.state.refs[0].current.focus();
+                    if (handleHomeEnd) {
+                        handled = true;
+                        // move focus to first item
+                        if (context.state.refs.length > 0) {
+                            context.state.refs[0].current.focus();
+                        }
                     }
                     break;
+
                 case Key.END:
-                    handled = true;
-                    // move focus to last item
-                    if (context.state.refs.length > 0) {
-                        context.state.refs[context.state.refs.length - 1].current.focus();
+                    if (handleHomeEnd) {
+                        handled = true;
+                        // move focus to last item
+                        if (context.state.refs.length > 0) {
+                            context.state.refs[context.state.refs.length - 1].current.focus();
+                        }
+                    }
+                    break;
+
+                case Key.ARROW_UP:
+                    if (handleUpDown) {
+                        handled = true;
+                        if (context.state.refs.length > 0) {
+                            const idx = context.state.refs.indexOf(context.state.activeRef);
+                            if (idx > 0) {
+                                context.state.refs[idx - 1].current.focus();
+                            }
+                        }
+                    }
+                    break;
+
+                case Key.ARROW_DOWN:
+                    if (handleUpDown) {
+                        handled = true;
+                        if (context.state.refs.length > 0) {
+                            const idx = context.state.refs.indexOf(context.state.activeRef);
+                            if (idx < context.state.refs.length - 1) {
+                                context.state.refs[idx + 1].current.focus();
+                            }
+                        }
                     }
                     break;
             }
@@ -193,7 +223,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({ children, handleHomeE
         } else if (onKeyDown) {
             return onKeyDown(ev, context.state);
         }
-    }, [context.state, onKeyDown, handleHomeEnd]);
+    }, [context.state, onKeyDown, handleHomeEnd, handleUpDown]);
 
     return <RovingTabIndexContext.Provider value={context}>
         { children({ onKeyDownHandler }) }

src/autocomplete/AutocompleteProvider.tsx

@@ -27,11 +27,11 @@ export interface ICommand {
     };
 }
 
-export default class AutocompleteProvider {
+export default abstract class AutocompleteProvider {
     commandRegex: RegExp;
     forcedCommandRegex: RegExp;
 
-    constructor(commandRegex?: RegExp, forcedCommandRegex?: RegExp) {
+    protected constructor(commandRegex?: RegExp, forcedCommandRegex?: RegExp) {
         if (commandRegex) {
             if (!commandRegex.global) {
                 throw new Error('commandRegex must have global flag set');
@@ -93,23 +93,16 @@ export default class AutocompleteProvider {
         };
     }
 
-    async getCompletions(
+    abstract getCompletions(
         query: string,
         selection: ISelectionRange,
-        force = false,
-        limit = -1,
-    ): Promise<ICompletion[]> {
-        return [];
-    }
+        force: boolean,
+        limit: number,
+    ): Promise<ICompletion[]>;
 
-    getName(): string {
-        return 'Default Provider';
-    }
+    abstract getName(): string;
 
-    renderCompletions(completions: React.ReactNode[]): React.ReactNode | null {
-        console.error('stub; should be implemented in subclasses');
-        return null;
-    }
+    abstract renderCompletions(completions: React.ReactNode[]): React.ReactNode | null;
 
     // Whether we should provide completions even if triggered forcefully, without a sigil.
     shouldForceComplete(): boolean {

src/autocomplete/CommandProvider.tsx

@@ -96,7 +96,7 @@ export default class CommandProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_block"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("Command Autocomplete")}
             >
                 { completions }

src/autocomplete/CommunityProvider.tsx

@@ -116,7 +116,7 @@ export default class CommunityProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("Community Autocomplete")}
             >
                 { completions }

src/autocomplete/DuckDuckGoProvider.tsx

@@ -105,7 +105,7 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_block"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("DuckDuckGo Results")}
             >
                 { completions }

src/autocomplete/EmojiProvider.tsx

@@ -139,7 +139,7 @@ export default class EmojiProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("Emoji Autocomplete")}
             >
                 { completions }

src/autocomplete/NotifProvider.tsx

@@ -70,7 +70,7 @@ export default class NotifProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("Notification Autocomplete")}
             >
                 { completions }

src/autocomplete/RoomProvider.tsx

@@ -134,7 +134,7 @@ export default class RoomProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("Room Autocomplete")}
             >
                 { completions }

src/autocomplete/UserProvider.tsx

@@ -181,7 +181,7 @@ export default class UserProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("User Autocomplete")}
             >
                 { completions }

src/components/structures/AutoHideScrollbar.tsx

@@ -61,7 +61,9 @@ export default class AutoHideScrollbar extends React.Component<IProps> {
             style={style}
             className={["mx_AutoHideScrollbar", className].join(" ")}
             onWheel={onWheel}
-            tabIndex={tabIndex}
+            // Firefox sometimes makes this element focusable due to
+            // overflow:scroll;, so force it out of tab order by default.
+            tabIndex={tabIndex ?? -1}
         >
             { children }
         </div>);

src/components/structures/GroupView.js

@@ -41,6 +41,9 @@ import RightPanelStore from "../../stores/RightPanelStore";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import { mediaFromMxc } from "../../customisations/Media";
 import { replaceableComponent } from "../../utils/replaceableComponent";
+import { createSpaceFromCommunity } from "../../utils/space";
+import { Action } from "../../dispatcher/actions";
+import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
 
 const LONG_DESC_PLACEHOLDER = _td(
     `<h1>HTML for your community's page</h1>
@@ -399,6 +402,8 @@ class FeaturedUser extends React.Component {
 const GROUP_JOINPOLICY_OPEN = "open";
 const GROUP_JOINPOLICY_INVITE = "invite";
 
+const UPGRADE_NOTICE_LS_KEY = "mx_hide_community_upgrade_notice";
+
 @replaceableComponent("structures.GroupView")
 export default class GroupView extends React.Component {
     static propTypes = {
@@ -422,6 +427,7 @@ export default class GroupView extends React.Component {
         publicityBusy: false,
         inviterProfile: null,
         showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup,
+        showUpgradeNotice: !localStorage.getItem(UPGRADE_NOTICE_LS_KEY),
     };
 
     componentDidMount() {
@@ -807,6 +813,22 @@ export default class GroupView extends React.Component {
         showGroupAddRoomDialog(this.props.groupId);
     };
 
+    _dismissUpgradeNotice = () => {
+        localStorage.setItem(UPGRADE_NOTICE_LS_KEY, "true");
+        this.setState({ showUpgradeNotice: false });
+    }
+
+    _onCreateSpaceClick = () => {
+        createSpaceFromCommunity(this._matrixClient, this.props.groupId);
+    };
+
+    _onAdminsLinkClick = () => {
+        dis.dispatch({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.GroupMemberList,
+        });
+    };
+
     _getGroupSection() {
         const groupSettingsSectionClasses = classnames({
             "mx_GroupView_group": this.state.editing,
@@ -843,10 +865,46 @@ export default class GroupView extends React.Component {
                     },
                 ) }
             </div> : <div />;
+
+        let communitiesUpgradeNotice;
+        if (this.state.showUpgradeNotice) {
+            let text;
+            if (this.state.isUserPrivileged) {
+                text = _t("You can create a Space from this community <a>here</a>.", {}, {
+                    a: sub => <AccessibleButton onClick={this._onCreateSpaceClick} kind="link">
+                        { sub }
+                    </AccessibleButton>,
+                });
+            } else {
+                text = _t("Ask the <a>admins</a> of this community to make it into a Space " +
+                    "and keep a look out for the invite.", {}, {
+                    a: sub => <AccessibleButton onClick={this._onAdminsLinkClick} kind="link">
+                        { sub }
+                    </AccessibleButton>,
+                });
+            }
+
+            communitiesUpgradeNotice = <div className="mx_GroupView_spaceUpgradePrompt">
+                <h2>{ _t("Communities can now be made into Spaces") }</h2>
+                <p>
+                    { _t("Spaces are a new way to make a community, with new features coming.") }
+                    &nbsp;
+                    { text }
+                    &nbsp;
+                    { _t("Communities won't receive further updates.") }
+                </p>
+                <AccessibleButton
+                    className="mx_GroupView_spaceUpgradePrompt_close"
+                    onClick={this._dismissUpgradeNotice}
+                />
+            </div>;
+        }
+
         return <div className={groupSettingsSectionClasses}>
             { header }
             { hostingSignup }
             { changeDelayWarning }
+            { communitiesUpgradeNotice }
             { this._getJoinableNode() }
             { this._getLongDescriptionNode() }
             { this._getRoomsNode() }

src/components/structures/InteractiveAuth.js

@@ -1,300 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd.
-Copyright 2019, 2020 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 { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
-import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
-
-import getEntryComponentForLoginType from '../views/auth/InteractiveAuthEntryComponents';
-
-import * as sdk from '../../index';
-import { replaceableComponent } from "../../utils/replaceableComponent";
-
-export const ERROR_USER_CANCELLED = new Error("User cancelled auth session");
-
-@replaceableComponent("structures.InteractiveAuthComponent")
-export default class InteractiveAuthComponent extends React.Component {
-    static propTypes = {
-        // matrix client to use for UI auth requests
-        matrixClient: PropTypes.object.isRequired,
-
-        // response from initial request. If not supplied, will do a request on
-        // mount.
-        authData: PropTypes.shape({
-            flows: PropTypes.array,
-            params: PropTypes.object,
-            session: PropTypes.string,
-        }),
-
-        // callback
-        makeRequest: PropTypes.func.isRequired,
-
-        // callback called when the auth process has finished,
-        // successfully or unsuccessfully.
-        // @param {bool} status True if the operation requiring
-        //     auth was completed sucessfully, false if canceled.
-        // @param {object} result The result of the authenticated call
-        //     if successful, otherwise the error object.
-        // @param {object} extra Additional information about the UI Auth
-        //     process:
-        //      * emailSid {string} If email auth was performed, the sid of
-        //            the auth session.
-        //      * clientSecret {string} The client secret used in auth
-        //            sessions with the identity server.
-        onAuthFinished: PropTypes.func.isRequired,
-
-        // Inputs provided by the user to the auth process
-        // and used by various stages. As passed to js-sdk
-        // interactive-auth
-        inputs: PropTypes.object,
-
-        // As js-sdk interactive-auth
-        requestEmailToken: PropTypes.func,
-        sessionId: PropTypes.string,
-        clientSecret: PropTypes.string,
-        emailSid: PropTypes.string,
-
-        // If true, poll to see if the auth flow has been completed
-        // out-of-band
-        poll: PropTypes.bool,
-
-        // If true, components will be told that the 'Continue' button
-        // is managed by some other party and should not be managed by
-        // the component itself.
-        continueIsManaged: PropTypes.bool,
-
-        // Called when the stage changes, or the stage's phase changes. First
-        // argument is the stage, second is the phase. Some stages do not have
-        // phases and will be counted as 0 (numeric).
-        onStagePhaseChange: PropTypes.func,
-
-        // continueText and continueKind are passed straight through to the AuthEntryComponent.
-        continueText: PropTypes.string,
-        continueKind: PropTypes.string,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            authStage: null,
-            busy: false,
-            errorText: null,
-            stageErrorText: null,
-            submitButtonEnabled: false,
-        };
-
-        this._unmounted = false;
-        this._authLogic = new InteractiveAuth({
-            authData: this.props.authData,
-            doRequest: this._requestCallback,
-            busyChanged: this._onBusyChanged,
-            inputs: this.props.inputs,
-            stateUpdated: this._authStateUpdated,
-            matrixClient: this.props.matrixClient,
-            sessionId: this.props.sessionId,
-            clientSecret: this.props.clientSecret,
-            emailSid: this.props.emailSid,
-            requestEmailToken: this._requestEmailToken,
-        });
-
-        this._intervalId = null;
-        if (this.props.poll) {
-            this._intervalId = setInterval(() => {
-                this._authLogic.poll();
-            }, 2000);
-        }
-
-        this._stageComponent = createRef();
-    }
-
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount() { // eslint-disable-line camelcase
-        this._authLogic.attemptAuth().then((result) => {
-            const extra = {
-                emailSid: this._authLogic.getEmailSid(),
-                clientSecret: this._authLogic.getClientSecret(),
-            };
-            this.props.onAuthFinished(true, result, extra);
-        }).catch((error) => {
-            this.props.onAuthFinished(false, error);
-            console.error("Error during user-interactive auth:", error);
-            if (this._unmounted) {
-                return;
-            }
-
-            const msg = error.message || error.toString();
-            this.setState({
-                errorText: msg,
-            });
-        });
-    }
-
-    componentWillUnmount() {
-        this._unmounted = true;
-
-        if (this._intervalId !== null) {
-            clearInterval(this._intervalId);
-        }
-    }
-
-    _requestEmailToken = async (...args) => {
-        this.setState({
-            busy: true,
-        });
-        try {
-            return await this.props.requestEmailToken(...args);
-        } finally {
-            this.setState({
-                busy: false,
-            });
-        }
-    };
-
-    tryContinue = () => {
-        if (this._stageComponent.current && this._stageComponent.current.tryContinue) {
-            this._stageComponent.current.tryContinue();
-        }
-    };
-
-    _authStateUpdated = (stageType, stageState) => {
-        const oldStage = this.state.authStage;
-        this.setState({
-            busy: false,
-            authStage: stageType,
-            stageState: stageState,
-            errorText: stageState.error,
-        }, () => {
-            if (oldStage !== stageType) {
-                this._setFocus();
-            } else if (
-                !stageState.error && this._stageComponent.current &&
-                this._stageComponent.current.attemptFailed
-            ) {
-                this._stageComponent.current.attemptFailed();
-            }
-        });
-    };
-
-    _requestCallback = (auth) => {
-        // This wrapper just exists because the js-sdk passes a second
-        // 'busy' param for backwards compat. This throws the tests off
-        // so discard it here.
-        return this.props.makeRequest(auth);
-    };
-
-    _onBusyChanged = (busy) => {
-        // if we've started doing stuff, reset the error messages
-        if (busy) {
-            this.setState({
-                busy: true,
-                errorText: null,
-                stageErrorText: null,
-            });
-        }
-        // The JS SDK eagerly reports itself as "not busy" right after any
-        // immediate work has completed, but that's not really what we want at
-        // the UI layer, so we ignore this signal and show a spinner until
-        // there's a new screen to show the user. This is implemented by setting
-        // `busy: false` in `_authStateUpdated`.
-        // See also https://github.com/vector-im/element-web/issues/12546
-    };
-
-    _setFocus() {
-        if (this._stageComponent.current && this._stageComponent.current.focus) {
-            this._stageComponent.current.focus();
-        }
-    }
-
-    _submitAuthDict = authData => {
-        this._authLogic.submitAuthDict(authData);
-    };
-
-    _onPhaseChange = newPhase => {
-        if (this.props.onStagePhaseChange) {
-            this.props.onStagePhaseChange(this.state.authStage, newPhase || 0);
-        }
-    };
-
-    _onStageCancel = () => {
-        this.props.onAuthFinished(false, ERROR_USER_CANCELLED);
-    };
-
-    _renderCurrentStage() {
-        const stage = this.state.authStage;
-        if (!stage) {
-            if (this.state.busy) {
-                const Loader = sdk.getComponent("elements.Spinner");
-                return <Loader />;
-            } else {
-                return null;
-            }
-        }
-
-        const StageComponent = getEntryComponentForLoginType(stage);
-        return (
-            <StageComponent
-                ref={this._stageComponent}
-                loginType={stage}
-                matrixClient={this.props.matrixClient}
-                authSessionId={this._authLogic.getSessionId()}
-                clientSecret={this._authLogic.getClientSecret()}
-                stageParams={this._authLogic.getStageParams(stage)}
-                submitAuthDict={this._submitAuthDict}
-                errorText={this.state.stageErrorText}
-                busy={this.state.busy}
-                inputs={this.props.inputs}
-                stageState={this.state.stageState}
-                fail={this._onAuthStageFailed}
-                setEmailSid={this._setEmailSid}
-                showContinue={!this.props.continueIsManaged}
-                onPhaseChange={this._onPhaseChange}
-                continueText={this.props.continueText}
-                continueKind={this.props.continueKind}
-                onCancel={this._onStageCancel}
-            />
-        );
-    }
-
-    _onAuthStageFailed = e => {
-        this.props.onAuthFinished(false, e);
-    };
-
-    _setEmailSid = sid => {
-        this._authLogic.setEmailSid(sid);
-    };
-
-    render() {
-        let error = null;
-        if (this.state.errorText) {
-            error = (
-                <div className="error">
-                    { this.state.errorText }
-                </div>
-            );
-        }
-
-        return (
-            <div>
-                <div>
-                    { this._renderCurrentStage() }
-                    { error }
-                </div>
-            </div>
-        );
-    }
-}

src/components/structures/InteractiveAuth.tsx

@@ -0,0 +1,300 @@
+/*
+Copyright 2017 - 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 {
+    AuthType,
+    IAuthData,
+    IAuthDict,
+    IInputs,
+    InteractiveAuth,
+    IStageStatus,
+} from "matrix-js-sdk/src/interactive-auth";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import React, { createRef } from 'react';
+
+import getEntryComponentForLoginType, { IStageComponent } from '../views/auth/InteractiveAuthEntryComponents';
+import Spinner from "../views/elements/Spinner";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+
+export const ERROR_USER_CANCELLED = new Error("User cancelled auth session");
+
+interface IProps {
+    // matrix client to use for UI auth requests
+    matrixClient: MatrixClient;
+    // response from initial request. If not supplied, will do a request on mount.
+    authData?: IAuthData;
+    // Inputs provided by the user to the auth process
+    // and used by various stages. As passed to js-sdk
+    // interactive-auth
+    inputs?: IInputs;
+    sessionId?: string;
+    clientSecret?: string;
+    emailSid?: string;
+    // If true, poll to see if the auth flow has been completed out-of-band
+    poll?: boolean;
+    // If true, components will be told that the 'Continue' button
+    // is managed by some other party and should not be managed by
+    // the component itself.
+    continueIsManaged?: boolean;
+    // continueText and continueKind are passed straight through to the AuthEntryComponent.
+    continueText?: string;
+    continueKind?: string;
+    // callback
+    makeRequest(auth: IAuthData): Promise<IAuthData>;
+    // callback called when the auth process has finished,
+    // successfully or unsuccessfully.
+    // @param {boolean} status True if the operation requiring
+    //     auth was completed successfully, false if canceled.
+    // @param {object} result The result of the authenticated call
+    //     if successful, otherwise the error object.
+    // @param {object} extra Additional information about the UI Auth
+    //     process:
+    //      * emailSid {string} If email auth was performed, the sid of
+    //            the auth session.
+    //      * clientSecret {string} The client secret used in auth
+    //            sessions with the ID server.
+    onAuthFinished(
+        status: boolean,
+        result: IAuthData | Error,
+        extra?: { emailSid?: string, clientSecret?: string },
+    ): void;
+    // As js-sdk interactive-auth
+    requestEmailToken?(email: string, secret: string, attempt: number, session: string): Promise<{ sid: string }>;
+    // Called when the stage changes, or the stage's phase changes. First
+    // argument is the stage, second is the phase. Some stages do not have
+    // phases and will be counted as 0 (numeric).
+    onStagePhaseChange?(stage: string, phase: string | number): void;
+}
+
+interface IState {
+    authStage?: AuthType;
+    stageState?: IStageStatus;
+    busy: boolean;
+    errorText?: string;
+    stageErrorText?: string;
+    submitButtonEnabled: boolean;
+}
+
+@replaceableComponent("structures.InteractiveAuthComponent")
+export default class InteractiveAuthComponent extends React.Component<IProps, IState> {
+    private readonly authLogic: InteractiveAuth;
+    private readonly intervalId: number = null;
+    private readonly stageComponent = createRef<IStageComponent>();
+
+    private unmounted = false;
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            authStage: null,
+            busy: false,
+            errorText: null,
+            stageErrorText: null,
+            submitButtonEnabled: false,
+        };
+
+        this.authLogic = new InteractiveAuth({
+            authData: this.props.authData,
+            doRequest: this.requestCallback,
+            busyChanged: this.onBusyChanged,
+            inputs: this.props.inputs,
+            stateUpdated: this.authStateUpdated,
+            matrixClient: this.props.matrixClient,
+            sessionId: this.props.sessionId,
+            clientSecret: this.props.clientSecret,
+            emailSid: this.props.emailSid,
+            requestEmailToken: this.requestEmailToken,
+        });
+
+        if (this.props.poll) {
+            this.intervalId = setInterval(() => {
+                this.authLogic.poll();
+            }, 2000);
+        }
+    }
+
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount() { // eslint-disable-line @typescript-eslint/naming-convention, camelcase
+        this.authLogic.attemptAuth().then((result) => {
+            const extra = {
+                emailSid: this.authLogic.getEmailSid(),
+                clientSecret: this.authLogic.getClientSecret(),
+            };
+            this.props.onAuthFinished(true, result, extra);
+        }).catch((error) => {
+            this.props.onAuthFinished(false, error);
+            console.error("Error during user-interactive auth:", error);
+            if (this.unmounted) {
+                return;
+            }
+
+            const msg = error.message || error.toString();
+            this.setState({
+                errorText: msg,
+            });
+        });
+    }
+
+    componentWillUnmount() {
+        this.unmounted = true;
+
+        if (this.intervalId !== null) {
+            clearInterval(this.intervalId);
+        }
+    }
+
+    private requestEmailToken = async (
+        email: string,
+        secret: string,
+        attempt: number,
+        session: string,
+    ): Promise<{sid: string}> => {
+        this.setState({
+            busy: true,
+        });
+        try {
+            return await this.props.requestEmailToken(email, secret, attempt, session);
+        } finally {
+            this.setState({
+                busy: false,
+            });
+        }
+    };
+
+    private tryContinue = (): void => {
+        this.stageComponent.current?.tryContinue?.();
+    };
+
+    private authStateUpdated = (stageType: AuthType, stageState: IStageStatus): void => {
+        const oldStage = this.state.authStage;
+        this.setState({
+            busy: false,
+            authStage: stageType,
+            stageState: stageState,
+            errorText: stageState.error,
+        }, () => {
+            if (oldStage !== stageType) {
+                this.setFocus();
+            } else if (!stageState.error) {
+                this.stageComponent.current?.attemptFailed?.();
+            }
+        });
+    };
+
+    private requestCallback = (auth: IAuthData, background: boolean): Promise<IAuthData> => {
+        // This wrapper just exists because the js-sdk passes a second
+        // 'busy' param for backwards compat. This throws the tests off
+        // so discard it here.
+        return this.props.makeRequest(auth);
+    };
+
+    private onBusyChanged = (busy: boolean): void => {
+        // if we've started doing stuff, reset the error messages
+        if (busy) {
+            this.setState({
+                busy: true,
+                errorText: null,
+                stageErrorText: null,
+            });
+        }
+        // The JS SDK eagerly reports itself as "not busy" right after any
+        // immediate work has completed, but that's not really what we want at
+        // the UI layer, so we ignore this signal and show a spinner until
+        // there's a new screen to show the user. This is implemented by setting
+        // `busy: false` in `authStateUpdated`.
+        // See also https://github.com/vector-im/element-web/issues/12546
+    };
+
+    private setFocus(): void {
+        this.stageComponent.current?.focus?.();
+    }
+
+    private submitAuthDict = (authData: IAuthDict): void => {
+        this.authLogic.submitAuthDict(authData);
+    };
+
+    private onPhaseChange = (newPhase: number): void => {
+        this.props.onStagePhaseChange?.(this.state.authStage, newPhase || 0);
+    };
+
+    private onStageCancel = (): void => {
+        this.props.onAuthFinished(false, ERROR_USER_CANCELLED);
+    };
+
+    private renderCurrentStage(): JSX.Element {
+        const stage = this.state.authStage;
+        if (!stage) {
+            if (this.state.busy) {
+                return <Spinner />;
+            } else {
+                return null;
+            }
+        }
+
+        const StageComponent = getEntryComponentForLoginType(stage);
+        return (
+            <StageComponent
+                ref={this.stageComponent as any}
+                loginType={stage}
+                matrixClient={this.props.matrixClient}
+                authSessionId={this.authLogic.getSessionId()}
+                clientSecret={this.authLogic.getClientSecret()}
+                stageParams={this.authLogic.getStageParams(stage)}
+                submitAuthDict={this.submitAuthDict}
+                errorText={this.state.stageErrorText}
+                busy={this.state.busy}
+                inputs={this.props.inputs}
+                stageState={this.state.stageState}
+                fail={this.onAuthStageFailed}
+                setEmailSid={this.setEmailSid}
+                showContinue={!this.props.continueIsManaged}
+                onPhaseChange={this.onPhaseChange}
+                continueText={this.props.continueText}
+                continueKind={this.props.continueKind}
+                onCancel={this.onStageCancel}
+            />
+        );
+    }
+
+    private onAuthStageFailed = (e: Error): void => {
+        this.props.onAuthFinished(false, e);
+    };
+
+    private setEmailSid = (sid: string): void => {
+        this.authLogic.setEmailSid(sid);
+    };
+
+    render() {
+        let error = null;
+        if (this.state.errorText) {
+            error = (
+                <div className="error">
+                    { this.state.errorText }
+                </div>
+            );
+        }
+
+        return (
+            <div>
+                <div>
+                    { this.renderCurrentStage() }
+                    { error }
+                </div>
+            </div>
+        );
+    }
+}

src/components/structures/LeftPanel.tsx

@@ -392,9 +392,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 <IndicatorScrollbar
                     className="mx_LeftPanel_breadcrumbsContainer mx_AutoHideScrollbar"
                     verticalScrollsHorizontally={true}
-                    // Firefox sometimes makes this element focusable due to
-                    // overflow:scroll;, so force it out of tab order.
-                    tabIndex={-1}
                 >
                     <RoomBreadcrumbs />
                 </IndicatorScrollbar>

src/components/structures/LoggedInView.tsx

@@ -529,24 +529,24 @@ class LoggedInView extends React.Component<IProps, IState> {
         }
 
         const isModifier = ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT;
-        if (!isModifier && !ev.altKey && !ev.ctrlKey && !ev.metaKey) {
+        if (!isModifier && !ev.ctrlKey && !ev.metaKey) {
             // The above condition is crafted to _allow_ characters with Shift
             // already pressed (but not the Shift key down itself).
-
             const isClickShortcut = ev.target !== document.body &&
                 (ev.key === Key.SPACE || ev.key === Key.ENTER);
 
-            // Do not capture the context menu key to improve keyboard accessibility
-            if (ev.key === Key.CONTEXT_MENU) {
-                return;
-            }
+            // We explicitly allow alt to be held due to it being a common accent modifier.
+            // XXX: Forwarding Dead keys in this way does not work as intended but better to at least
+            // move focus to the composer so the user can re-type the dead key correctly.
+            const isPrintable = ev.key.length === 1 || ev.key === "Dead";
 
-            if (!isClickShortcut && ev.key !== Key.TAB && !canElementReceiveInput(ev.target)) {
+            // If the user is entering a printable character outside of an input field
+            // redirect it to the composer for them.
+            if (!isClickShortcut && isPrintable && !canElementReceiveInput(ev.target)) {
                 // synchronous dispatch so we focus before key generates input
                 dis.fire(Action.FocusSendMessageComposer, true);
                 ev.stopPropagation();
-                // we should *not* preventDefault() here as
-                // that would prevent typing in the now-focussed composer
+                // we should *not* preventDefault() here as that would prevent typing in the now-focused composer
             }
         }
     };

src/components/structures/SpaceRoomDirectory.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode, useMemo, useState } from "react";
+import React, { ReactNode, KeyboardEvent, useMemo, useState, KeyboardEventHandler } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
 import { ISpaceSummaryRoom, ISpaceSummaryEvent } from "matrix-js-sdk/src/@types/spaces";
@@ -46,6 +46,8 @@ import { getDisplayAliasForAliasSet } from "../../Rooms";
 import { useDispatcher } from "../../hooks/useDispatcher";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { Action } from "../../dispatcher/actions";
+import { Key } from "../../Keyboard";
+import { IState, RovingTabIndexProvider, useRovingTabIndex } from "../../accessibility/RovingTabIndex";
 
 interface IHierarchyProps {
     space: Room;
@@ -80,6 +82,7 @@ const Tile: React.FC<ITileProps> = ({
         || (room.room_type === RoomType.Space ? _t("Unnamed Space") : _t("Unnamed Room"));
 
     const [showChildren, toggleShowChildren] = useStateToggle(true);
+    const [onFocus, isActive, ref] = useRovingTabIndex();
 
     const onPreviewClick = (ev: ButtonEvent) => {
         ev.preventDefault();
@@ -94,11 +97,21 @@ const Tile: React.FC<ITileProps> = ({
 
     let button;
     if (joinedRoom) {
-        button = <AccessibleButton onClick={onPreviewClick} kind="primary_outline">
+        button = <AccessibleButton
+            onClick={onPreviewClick}
+            kind="primary_outline"
+            onFocus={onFocus}
+            tabIndex={isActive ? 0 : -1}
+        >
             { _t("View") }
         </AccessibleButton>;
     } else if (onJoinClick) {
-        button = <AccessibleButton onClick={onJoinClick} kind="primary">
+        button = <AccessibleButton
+            onClick={onJoinClick}
+            kind="primary"
+            onFocus={onFocus}
+            tabIndex={isActive ? 0 : -1}
+        >
             { _t("Join") }
         </AccessibleButton>;
     }
@@ -106,13 +119,13 @@ const Tile: React.FC<ITileProps> = ({
     let checkbox;
     if (onToggleClick) {
         if (hasPermissions) {
-            checkbox = <StyledCheckbox checked={!!selected} onChange={onToggleClick} />;
+            checkbox = <StyledCheckbox checked={!!selected} onChange={onToggleClick} tabIndex={isActive ? 0 : -1} />;
         } else {
             checkbox = <TextWithTooltip
                 tooltip={_t("You don't have permission")}
                 onClick={ev => { ev.stopPropagation(); }}
             >
-                <StyledCheckbox disabled={true} />
+                <StyledCheckbox disabled={true} tabIndex={isActive ? 0 : -1} />
             </TextWithTooltip>;
         }
     }
@@ -172,8 +185,9 @@ const Tile: React.FC<ITileProps> = ({
         </div>
     </React.Fragment>;
 
-    let childToggle;
-    let childSection;
+    let childToggle: JSX.Element;
+    let childSection: JSX.Element;
+    let onKeyDown: KeyboardEventHandler;
     if (children) {
         // the chevron is purposefully a div rather than a button as it should be ignored for a11y
         childToggle = <div
@@ -185,25 +199,74 @@ const Tile: React.FC<ITileProps> = ({
                 toggleShowChildren();
             }}
         />;
+
         if (showChildren) {
-            childSection = <div className="mx_SpaceRoomDirectory_subspace_children">
+            const onChildrenKeyDown = (e) => {
+                if (e.key === Key.ARROW_LEFT) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    ref.current?.focus();
+                }
+            };
+
+            childSection = <div
+                className="mx_SpaceRoomDirectory_subspace_children"
+                onKeyDown={onChildrenKeyDown}
+                role="group"
+            >
                 { children }
             </div>;
         }
+
+        onKeyDown = (e) => {
+            let handled = false;
+
+            switch (e.key) {
+                case Key.ARROW_LEFT:
+                    if (showChildren) {
+                        handled = true;
+                        toggleShowChildren();
+                    }
+                    break;
+
+                case Key.ARROW_RIGHT:
+                    handled = true;
+                    if (showChildren) {
+                        const childSection = ref.current?.nextElementSibling;
+                        childSection?.querySelector<HTMLDivElement>(".mx_SpaceRoomDirectory_roomTile")?.focus();
+                    } else {
+                        toggleShowChildren();
+                    }
+                    break;
+            }
+
+            if (handled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
     }
 
-    return <>
+    return <li
+        className="mx_SpaceRoomDirectory_roomTileWrapper"
+        role="treeitem"
+        aria-expanded={children ? showChildren : undefined}
+    >
         <AccessibleButton
             className={classNames("mx_SpaceRoomDirectory_roomTile", {
                 mx_SpaceRoomDirectory_subspace: room.room_type === RoomType.Space,
             })}
             onClick={(hasPermissions && onToggleClick) ? onToggleClick : onPreviewClick}
+            onKeyDown={onKeyDown}
+            inputRef={ref}
+            onFocus={onFocus}
+            tabIndex={isActive ? 0 : -1}
         >
             { content }
             { childToggle }
         </AccessibleButton>
         { childSection }
-    </>;
+    </li>;
 };
 
 export const showRoom = (room: ISpaceSummaryRoom, viaServers?: string[], autoJoin = false) => {
@@ -414,176 +477,196 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
         return <p>{ _t("Your server does not support showing space hierarchies.") }</p>;
     }
 
-    let content;
-    if (roomsMap) {
-        const numRooms = Array.from(roomsMap.values()).filter(r => !r.room_type).length;
-        const numSpaces = roomsMap.size - numRooms - 1; // -1 at the end to exclude the space we are looking at
-
-        let countsStr;
-        if (numSpaces > 1) {
-            countsStr = _t("%(count)s rooms and %(numSpaces)s spaces", { count: numRooms, numSpaces });
-        } else if (numSpaces > 0) {
-            countsStr = _t("%(count)s rooms and 1 space", { count: numRooms, numSpaces });
-        } else {
-            countsStr = _t("%(count)s rooms", { count: numRooms, numSpaces });
+    const onKeyDown = (ev: KeyboardEvent, state: IState) => {
+        if (ev.key === Key.ARROW_DOWN && ev.currentTarget.classList.contains("mx_SpaceRoomDirectory_search")) {
+            state.refs[0]?.current?.focus();
         }
-
-        let manageButtons;
-        if (space.getMyMembership() === "join" && space.currentState.maySendStateEvent(EventType.SpaceChild, userId)) {
-            const selectedRelations = Array.from(selected.keys()).flatMap(parentId => {
-                return [...selected.get(parentId).values()].map(childId => [parentId, childId]) as [string, string][];
-            });
-
-            const selectionAllSuggested = selectedRelations.every(([parentId, childId]) => {
-                return parentChildMap.get(parentId)?.get(childId)?.content.suggested;
-            });
-
-            const disabled = !selectedRelations.length || removing || saving;
-
-            let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
-            let props = {};
-            if (!selectedRelations.length) {
-                Button = AccessibleTooltipButton;
-                props = {
-                    tooltip: _t("Select a room below first"),
-                    yOffset: -40,
-                };
-            }
-
-            manageButtons = <>
-                <Button
-                    {...props}
-                    onClick={async () => {
-                        setRemoving(true);
-                        try {
-                            for (const [parentId, childId] of selectedRelations) {
-                                await cli.sendStateEvent(parentId, EventType.SpaceChild, {}, childId);
-                                parentChildMap.get(parentId).delete(childId);
-                                if (parentChildMap.get(parentId).size > 0) {
-                                    parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
-                                } else {
-                                    parentChildMap.delete(parentId);
-                                }
-                            }
-                        } catch (e) {
-                            setError(_t("Failed to remove some rooms. Try again later"));
-                        }
-                        setRemoving(false);
-                    }}
-                    kind="danger_outline"
-                    disabled={disabled}
-                >
-                    { removing ? _t("Removing...") : _t("Remove") }
-                </Button>
-                <Button
-                    {...props}
-                    onClick={async () => {
-                        setSaving(true);
-                        try {
-                            for (const [parentId, childId] of selectedRelations) {
-                                const suggested = !selectionAllSuggested;
-                                const existingContent = parentChildMap.get(parentId)?.get(childId)?.content;
-                                if (!existingContent || existingContent.suggested === suggested) continue;
-
-                                const content = {
-                                    ...existingContent,
-                                    suggested: !selectionAllSuggested,
-                                };
-
-                                await cli.sendStateEvent(parentId, EventType.SpaceChild, content, childId);
-
-                                parentChildMap.get(parentId).get(childId).content = content;
-                                parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
-                            }
-                        } catch (e) {
-                            setError("Failed to update some suggestions. Try again later");
-                        }
-                        setSaving(false);
-                        setSelected(new Map());
-                    }}
-                    kind="primary_outline"
-                    disabled={disabled}
-                >
-                    { saving
-                        ? _t("Saving...")
-                        : (selectionAllSuggested ? _t("Mark as not suggested") : _t("Mark as suggested"))
-                    }
-                </Button>
-            </>;
-        }
-
-        let results;
-        if (roomsMap.size) {
-            const hasPermissions = space?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId());
-
-            results = <>
-                <HierarchyLevel
-                    spaceId={space.roomId}
-                    rooms={roomsMap}
-                    relations={parentChildMap}
-                    parents={new Set()}
-                    selectedMap={selected}
-                    onToggleClick={hasPermissions ? (parentId, childId) => {
-                        setError("");
-                        if (!selected.has(parentId)) {
-                            setSelected(new Map(selected.set(parentId, new Set([childId]))));
-                            return;
-                        }
-
-                        const parentSet = selected.get(parentId);
-                        if (!parentSet.has(childId)) {
-                            setSelected(new Map(selected.set(parentId, new Set([...parentSet, childId]))));
-                            return;
-                        }
-
-                        parentSet.delete(childId);
-                        setSelected(new Map(selected.set(parentId, new Set(parentSet))));
-                    } : undefined}
-                    onViewRoomClick={(roomId, autoJoin) => {
-                        showRoom(roomsMap.get(roomId), Array.from(viaMap.get(roomId) || []), autoJoin);
-                    }}
-                />
-                { children && <hr /> }
-            </>;
-        } else {
-            results = <div className="mx_SpaceRoomDirectory_noResults">
-                <h3>{ _t("No results found") }</h3>
-                <div>{ _t("You may want to try a different search or check for typos.") }</div>
-            </div>;
-        }
-
-        content = <>
-            <div className="mx_SpaceRoomDirectory_listHeader">
-                { countsStr }
-                <span>
-                    { additionalButtons }
-                    { manageButtons }
-                </span>
-            </div>
-            { error && <div className="mx_SpaceRoomDirectory_error">
-                { error }
-            </div> }
-            <AutoHideScrollbar className="mx_SpaceRoomDirectory_list">
-                { results }
-                { children }
-            </AutoHideScrollbar>
-        </>;
-    } else {
-        content = <Spinner />;
-    }
+    };
 
     // TODO loading state/error state
-    return <>
-        <SearchBox
-            className="mx_textinput_icon mx_textinput_search"
-            placeholder={_t("Search names and descriptions")}
-            onSearch={setQuery}
-            autoFocus={true}
-            initialValue={initialText}
-        />
+    return <RovingTabIndexProvider onKeyDown={onKeyDown} handleHomeEnd handleUpDown>
+        { ({ onKeyDownHandler }) => {
+            let content;
+            if (roomsMap) {
+                const numRooms = Array.from(roomsMap.values()).filter(r => !r.room_type).length;
+                const numSpaces = roomsMap.size - numRooms - 1; // -1 at the end to exclude the space we are looking at
 
-        { content }
-    </>;
+                let countsStr;
+                if (numSpaces > 1) {
+                    countsStr = _t("%(count)s rooms and %(numSpaces)s spaces", { count: numRooms, numSpaces });
+                } else if (numSpaces > 0) {
+                    countsStr = _t("%(count)s rooms and 1 space", { count: numRooms, numSpaces });
+                } else {
+                    countsStr = _t("%(count)s rooms", { count: numRooms, numSpaces });
+                }
+
+                let manageButtons;
+                if (space.getMyMembership() === "join" &&
+                    space.currentState.maySendStateEvent(EventType.SpaceChild, userId)
+                ) {
+                    const selectedRelations = Array.from(selected.keys()).flatMap(parentId => {
+                        return [
+                            ...selected.get(parentId).values(),
+                        ].map(childId => [parentId, childId]) as [string, string][];
+                    });
+
+                    const selectionAllSuggested = selectedRelations.every(([parentId, childId]) => {
+                        return parentChildMap.get(parentId)?.get(childId)?.content.suggested;
+                    });
+
+                    const disabled = !selectedRelations.length || removing || saving;
+
+                    let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
+                    let props = {};
+                    if (!selectedRelations.length) {
+                        Button = AccessibleTooltipButton;
+                        props = {
+                            tooltip: _t("Select a room below first"),
+                            yOffset: -40,
+                        };
+                    }
+
+                    manageButtons = <>
+                        <Button
+                            {...props}
+                            onClick={async () => {
+                                setRemoving(true);
+                                try {
+                                    for (const [parentId, childId] of selectedRelations) {
+                                        await cli.sendStateEvent(parentId, EventType.SpaceChild, {}, childId);
+                                        parentChildMap.get(parentId).delete(childId);
+                                        if (parentChildMap.get(parentId).size > 0) {
+                                            parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
+                                        } else {
+                                            parentChildMap.delete(parentId);
+                                        }
+                                    }
+                                } catch (e) {
+                                    setError(_t("Failed to remove some rooms. Try again later"));
+                                }
+                                setRemoving(false);
+                            }}
+                            kind="danger_outline"
+                            disabled={disabled}
+                        >
+                            { removing ? _t("Removing...") : _t("Remove") }
+                        </Button>
+                        <Button
+                            {...props}
+                            onClick={async () => {
+                                setSaving(true);
+                                try {
+                                    for (const [parentId, childId] of selectedRelations) {
+                                        const suggested = !selectionAllSuggested;
+                                        const existingContent = parentChildMap.get(parentId)?.get(childId)?.content;
+                                        if (!existingContent || existingContent.suggested === suggested) continue;
+
+                                        const content = {
+                                            ...existingContent,
+                                            suggested: !selectionAllSuggested,
+                                        };
+
+                                        await cli.sendStateEvent(parentId, EventType.SpaceChild, content, childId);
+
+                                        parentChildMap.get(parentId).get(childId).content = content;
+                                        parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
+                                    }
+                                } catch (e) {
+                                    setError("Failed to update some suggestions. Try again later");
+                                }
+                                setSaving(false);
+                                setSelected(new Map());
+                            }}
+                            kind="primary_outline"
+                            disabled={disabled}
+                        >
+                            { saving
+                                ? _t("Saving...")
+                                : (selectionAllSuggested ? _t("Mark as not suggested") : _t("Mark as suggested"))
+                            }
+                        </Button>
+                    </>;
+                }
+
+                let results;
+                if (roomsMap.size) {
+                    const hasPermissions = space?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId());
+
+                    results = <>
+                        <HierarchyLevel
+                            spaceId={space.roomId}
+                            rooms={roomsMap}
+                            relations={parentChildMap}
+                            parents={new Set()}
+                            selectedMap={selected}
+                            onToggleClick={hasPermissions ? (parentId, childId) => {
+                                setError("");
+                                if (!selected.has(parentId)) {
+                                    setSelected(new Map(selected.set(parentId, new Set([childId]))));
+                                    return;
+                                }
+
+                                const parentSet = selected.get(parentId);
+                                if (!parentSet.has(childId)) {
+                                    setSelected(new Map(selected.set(parentId, new Set([...parentSet, childId]))));
+                                    return;
+                                }
+
+                                parentSet.delete(childId);
+                                setSelected(new Map(selected.set(parentId, new Set(parentSet))));
+                            } : undefined}
+                            onViewRoomClick={(roomId, autoJoin) => {
+                                showRoom(roomsMap.get(roomId), Array.from(viaMap.get(roomId) || []), autoJoin);
+                            }}
+                        />
+                        { children && <hr /> }
+                    </>;
+                } else {
+                    results = <div className="mx_SpaceRoomDirectory_noResults">
+                        <h3>{ _t("No results found") }</h3>
+                        <div>{ _t("You may want to try a different search or check for typos.") }</div>
+                    </div>;
+                }
+
+                content = <>
+                    <div className="mx_SpaceRoomDirectory_listHeader">
+                        { countsStr }
+                        <span>
+                            { additionalButtons }
+                            { manageButtons }
+                        </span>
+                    </div>
+                    { error && <div className="mx_SpaceRoomDirectory_error">
+                        { error }
+                    </div> }
+                    <AutoHideScrollbar
+                        className="mx_SpaceRoomDirectory_list"
+                        onKeyDown={onKeyDownHandler}
+                        role="tree"
+                        aria-label={_t("Space")}
+                    >
+                        { results }
+                        { children }
+                    </AutoHideScrollbar>
+                </>;
+            } else {
+                content = <Spinner />;
+            }
+
+            return <>
+                <SearchBox
+                    className="mx_SpaceRoomDirectory_search mx_textinput_icon mx_textinput_search"
+                    placeholder={_t("Search names and descriptions")}
+                    onSearch={setQuery}
+                    autoFocus={true}
+                    initialValue={initialText}
+                    onKeyDown={onKeyDownHandler}
+                />
+
+                { content }
+            </>;
+        } }
+    </RovingTabIndexProvider>;
 };
 
 interface IProps {

src/components/structures/SpaceRoomView.tsx

@@ -74,6 +74,10 @@ import { BetaPill } from "../views/beta/BetaCard";
 import { UserTab } from "../views/dialogs/UserSettingsDialog";
 import { EffectiveMembership, getEffectiveMembership } from "../../utils/membership";
 import { SpaceFeedbackPrompt } from "../views/spaces/SpaceCreateMenu";
+import { CreateEventField, IGroupSummary } from "../views/dialogs/CreateSpaceFromCommunityDialog";
+import { useAsyncMemo } from "../../hooks/useAsyncMemo";
+import Spinner from "../views/elements/Spinner";
+import GroupAvatar from "../views/avatars/GroupAvatar";
 
 interface IProps {
     space: Room;
@@ -158,7 +162,33 @@ const onBetaClick = () => {
     });
 };
 
-const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => {
+// XXX: temporary community migration component
+const GroupTile = ({ groupId }: { groupId: string }) => {
+    const cli = useContext(MatrixClientContext);
+    const groupSummary = useAsyncMemo<IGroupSummary>(() => cli.getGroupSummary(groupId), [cli, groupId]);
+
+    if (!groupSummary) return <Spinner />;
+
+    return <>
+        <GroupAvatar
+            groupId={groupId}
+            groupName={groupSummary.profile.name}
+            groupAvatarUrl={groupSummary.profile.avatar_url}
+            width={16}
+            height={16}
+            resizeMethod='crop'
+        />
+        { groupSummary.profile.name }
+    </>;
+};
+
+interface ISpacePreviewProps {
+    space: Room;
+    onJoinButtonClicked(): void;
+    onRejectButtonClicked(): void;
+}
+
+const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }: ISpacePreviewProps) => {
     const cli = useContext(MatrixClientContext);
     const myMembership = useMyRoomMembership(space);
 
@@ -270,8 +300,18 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         </div>;
     }
 
+    let migratedCommunitySection: JSX.Element;
+    const createContent = space.currentState.getStateEvents(EventType.RoomCreate, "")?.getContent();
+    if (createContent[CreateEventField]) {
+        migratedCommunitySection = <div className="mx_SpaceRoomView_preview_migratedCommunity">
+            { _t("Created from <Community />", {}, {
+                Community: () => <GroupTile groupId={createContent[CreateEventField]} />,
+            }) }
+        </div>;
+    }
+
     return <div className="mx_SpaceRoomView_preview">
-        <BetaPill onClick={onBetaClick} />
+        { migratedCommunitySection }
         { inviterSection }
         <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
         <h1 className="mx_SpaceRoomView_preview_name">

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
@@ -374,23 +378,40 @@ 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',
-                    height: '100%', // Also force to size of a parent to prevent scroll-jumps (see above)
+                    height: '100%',
                 }}>
                     { img }
                     { gifLabel }
@@ -413,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} />
         );
@@ -455,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

@@ -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,
@@ -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,72 +550,12 @@ 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();
-            handled = this.fakeDeletion(event.key === Key.BACKSPACE);
-        }
-
         if (handled) {
             event.preventDefault();
             event.stopPropagation();
         }
     };
 
-    /**
-     * Because pills have contentEditable="false" there is no event emitted when
-     * the user tries to delete them. Therefore we need to fake what would
-     * normally happen
-     * @param direction in which to delete
-     * @returns handled
-     */
-    private fakeDeletion(backward: boolean): boolean {
-        const selection = document.getSelection();
-        // Use the default handling for ranges
-        if (selection.type === "Range") return false;
-
-        this.modifiedFlag = true;
-        const { caret, text } = getCaretOffsetAndText(this.editorRef.current, selection);
-
-        // Do the deletion itself
-        if (backward) caret.offset--;
-        const newText = text.slice(0, caret.offset) + text.slice(caret.offset + 1);
-
-        this.props.model.update(newText, backward ? "deleteContentBackward" : "deleteContentForward", caret);
-        return true;
-    }
-
     private async tabCompleteName(): Promise<void> {
         try {
             await new Promise<void>(resolve => this.setState({ showVisualBell: false }, resolve));
@@ -601,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);
@@ -616,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 });
     };
 
@@ -742,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 }
@@ -760,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/EventTile.tsx

@@ -932,8 +932,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/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/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}

src/editor/autocomplete.ts

@@ -32,7 +32,6 @@ export type GetAutocompleterComponent = () => Autocomplete;
 export type UpdateQuery = (test: string) => Promise<void>;
 
 export default class AutocompleteWrapperModel {
-    private queryPart: Part;
     private partIndex: number;
 
     constructor(
@@ -45,10 +44,6 @@ export default class AutocompleteWrapperModel {
 
     public onEscape(e: KeyboardEvent): void {
         this.getAutocompleterComponent().onEscape(e);
-        this.updateCallback({
-            replaceParts: [this.partCreator.plain(this.queryPart.text)],
-            close: true,
-        });
     }
 
     public close(): void {
@@ -64,7 +59,8 @@ export default class AutocompleteWrapperModel {
         return ac && ac.countCompletions() > 0;
     }
 
-    public onEnter(): void {
+    public async confirmCompletion(): Promise<void> {
+        await this.getAutocompleterComponent().onConfirmCompletion();
         this.updateCallback({ close: true });
     }
 
@@ -76,8 +72,6 @@ export default class AutocompleteWrapperModel {
         if (acComponent.countCompletions() === 0) {
             // Force completions to show for the text currently entered
             await acComponent.forceComplete();
-            // Select the first item by moving "down"
-            await acComponent.moveSelection(+1);
         }
     }
 
@@ -90,25 +84,10 @@ export default class AutocompleteWrapperModel {
     }
 
     public onPartUpdate(part: Part, pos: DocumentPosition): Promise<void> {
-        // cache the typed value and caret here
-        // so we can restore it in onComponentSelectionChange when the value is undefined (meaning it should be the typed text)
-        this.queryPart = part;
         this.partIndex = pos.index;
         return this.updateQuery(part.text);
     }
 
-    public onComponentSelectionChange(completion: ICompletion): void {
-        if (!completion) {
-            this.updateCallback({
-                replaceParts: [this.queryPart],
-            });
-        } else {
-            this.updateCallback({
-                replaceParts: this.partForCompletion(completion),
-            });
-        }
-    }
-
     public onComponentConfirm(completion: ICompletion): void {
         this.updateCallback({
             replaceParts: this.partForCompletion(completion),

src/editor/model.ts

@@ -237,7 +237,7 @@ export default class EditorModel {
                     }
                 }
             }
-            // not _autoComplete, only there if active part is autocomplete part
+            // not autoComplete, only there if active part is autocomplete part
             if (this.autoComplete) {
                 return this.autoComplete.onPartUpdate(part, pos);
             }

src/i18n/strings/en_EN.json

@@ -905,6 +905,16 @@
     "sends snowfall": "sends snowfall",
     "Sends the given message with a space themed effect": "Sends the given message with a space themed effect",
     "sends space invaders": "sends space invaders",
+    "unknown person": "unknown person",
+    "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>": "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>",
+    "You held the call <a>Switch</a>": "You held the call <a>Switch</a>",
+    "You held the call <a>Resume</a>": "You held the call <a>Resume</a>",
+    "%(peerName)s held the call": "%(peerName)s held the call",
+    "Connecting": "Connecting",
+    "You are presenting": "You are presenting",
+    "%(sharerName)s is presenting": "%(sharerName)s is presenting",
+    "Your camera is turned off": "Your camera is turned off",
+    "Your camera is still enabled": "Your camera is still enabled",
     "Start the camera": "Start the camera",
     "Stop the camera": "Stop the camera",
     "Stop sharing your screen": "Stop sharing your screen",
@@ -916,16 +926,6 @@
     "Unmute the microphone": "Unmute the microphone",
     "Mute the microphone": "Mute the microphone",
     "Hangup": "Hangup",
-    "unknown person": "unknown person",
-    "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>": "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>",
-    "You held the call <a>Switch</a>": "You held the call <a>Switch</a>",
-    "You held the call <a>Resume</a>": "You held the call <a>Resume</a>",
-    "%(peerName)s held the call": "%(peerName)s held the call",
-    "Connecting": "Connecting",
-    "You are presenting": "You are presenting",
-    "%(sharerName)s is presenting": "%(sharerName)s is presenting",
-    "Your camera is turned off": "Your camera is turned off",
-    "Your camera is still enabled": "Your camera is still enabled",
     "Video Call": "Video Call",
     "Voice Call": "Voice Call",
     "Fill Screen": "Fill Screen",
@@ -1015,7 +1015,9 @@
     "Your server isn't responding to some <a>requests</a>.": "Your server isn't responding to some <a>requests</a>.",
     "Decline (%(counter)s)": "Decline (%(counter)s)",
     "Accept <policyLink /> to continue:": "Accept <policyLink /> to continue:",
+    "Delete avatar": "Delete avatar",
     "Delete": "Delete",
+    "Upload avatar": "Upload avatar",
     "Upload": "Upload",
     "Name": "Name",
     "Description": "Description",
@@ -1027,12 +1029,14 @@
     "e.g. my-space": "e.g. my-space",
     "Address": "Address",
     "Create a space": "Create a space",
-    "Spaces are a new way to group rooms and people. To join an existing space you'll need an invite.": "Spaces are a new way to group rooms and people. To join an existing space you'll need an invite.",
+    "What kind of Space do you want to create?": "What kind of Space do you want to create?",
+    "You can change this later.": "You can change this later.",
     "Public": "Public",
     "Open space for anyone, best for communities": "Open space for anyone, best for communities",
     "Private": "Private",
     "Invite only, best for yourself or teams": "Invite only, best for yourself or teams",
-    "You can change this later": "You can change this later",
+    "You can also create a Space from a <a>community</a>.": "You can also create a Space from a <a>community</a>.",
+    "To join an existing space you'll need an invite.": "To join an existing space you'll need an invite.",
     "Go back": "Go back",
     "Your public space": "Your public space",
     "Your private space": "Your private space",
@@ -1073,6 +1077,8 @@
     "Preview Space": "Preview Space",
     "Allow people to preview your space before they join.": "Allow people to preview your space before they join.",
     "Recommended for public spaces.": "Recommended for public spaces.",
+    "Jump to first unread room.": "Jump to first unread room.",
+    "Jump to first invite.": "Jump to first invite.",
     "Expand": "Expand",
     "Collapse": "Collapse",
     "Space options": "Space options",
@@ -1333,12 +1339,18 @@
     "If this isn't what you want, please use a different tool to ignore users.": "If this isn't what you want, please use a different tool to ignore users.",
     "Room ID or address of ban list": "Room ID or address of ban list",
     "Subscribe": "Subscribe",
+    "Open Space": "Open Space",
+    "Create Space": "Create Space",
     "Start automatically after system login": "Start automatically after system login",
     "Warn before quitting": "Warn before quitting",
     "Always show the window menu bar": "Always show the window menu bar",
     "Show tray icon and minimize window to it on close": "Show tray icon and minimize window to it on close",
     "Preferences": "Preferences",
     "Room list": "Room list",
+    "Communities": "Communities",
+    "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.": "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.",
+    "Show my Communities": "Show my Communities",
+    "If a community isn't shown you may not have permission to convert it.": "If a community isn't shown you may not have permission to convert it.",
     "Keyboard shortcuts": "Keyboard shortcuts",
     "To view all keyboard shortcuts, click here.": "To view all keyboard shortcuts, click here.",
     "Displaying time": "Displaying time",
@@ -1667,8 +1679,6 @@
     "Activity": "Activity",
     "A-Z": "A-Z",
     "List options": "List options",
-    "Jump to first unread room.": "Jump to first unread room.",
-    "Jump to first invite.": "Jump to first invite.",
     "Show %(count)s more|other": "Show %(count)s more",
     "Show %(count)s more|one": "Show %(count)s more",
     "Show less": "Show less",
@@ -1877,13 +1887,14 @@
     "Connected": "Connected",
     "Call declined": "Call declined",
     "Call back": "Call back",
-    "Missed call": "Missed call",
+    "No answer": "No answer",
     "Could not connect media": "Could not connect media",
     "Connection failed": "Connection failed",
     "Their device couldn't start the camera or microphone": "Their device couldn't start the camera or microphone",
     "An unknown error occurred": "An unknown error occurred",
-    "Unknown failure: %(reason)s)": "Unknown failure: %(reason)s)",
+    "Unknown failure: %(reason)s": "Unknown failure: %(reason)s",
     "Retry": "Retry",
+    "Missed call": "Missed call",
     "The call is in an unknown state!": "The call is in an unknown state!",
     "Sunday": "Sunday",
     "Monday": "Monday",
@@ -2222,13 +2233,24 @@
     "Visible to space members": "Visible to space members",
     "Block anyone not part of %(serverName)s from ever joining this room.": "Block anyone not part of %(serverName)s from ever joining this room.",
     "Create Room": "Create Room",
+    "This community has been upgraded into a Space": "This community has been upgraded into a Space",
+    "To view Spaces, hide communities in <a>Preferences</a>": "To view Spaces, hide communities in <a>Preferences</a>",
+    "Space created": "Space created",
+    "<SpaceName/> has been made and everyone who was a part of the community has been invited to it.": "<SpaceName/> has been made and everyone who was a part of the community has been invited to it.",
+    "To create a Space from another community, just pick the community in Preferences.": "To create a Space from another community, just pick the community in Preferences.",
+    "Failed to migrate community": "Failed to migrate community",
+    "Create Space from community": "Create Space from community",
+    "A link to the Space will be put in your community description.": "A link to the Space will be put in your community description.",
+    "All rooms will be added and all community members will be invited.": "All rooms will be added and all community members will be invited.",
+    "Flair won't be available in Spaces for the foreseeable future.": "Flair won't be available in Spaces for the foreseeable future.",
+    "This description will be shown to people when they view your space": "This description will be shown to people when they view your space",
+    "Space visibility": "Space visibility",
+    "Private space (invite only)": "Private space (invite only)",
+    "Public space": "Public space",
     "Anyone in <SpaceName/> will be able to find and join.": "Anyone in <SpaceName/> will be able to find and join.",
     "Anyone will be able to find and join this space, not just members of <SpaceName/>.": "Anyone will be able to find and join this space, not just members of <SpaceName/>.",
     "Only people invited will be able to find and join this space.": "Only people invited will be able to find and join this space.",
     "Add a space to a space you manage.": "Add a space to a space you manage.",
-    "Space visibility": "Space visibility",
-    "Private space (invite only)": "Private space (invite only)",
-    "Public space": "Public space",
     "Want to add an existing space instead?": "Want to add an existing space instead?",
     "Adding...": "Adding...",
     "Sign out": "Sign out",
@@ -2680,7 +2702,6 @@
     "You must join the room to see its files": "You must join the room to see its files",
     "No files visible in this room": "No files visible in this room",
     "Attach files from chat or just drag and drop them anywhere in a room.": "Attach files from chat or just drag and drop them anywhere in a room.",
-    "Communities": "Communities",
     "Create community": "Create community",
     "<h1>HTML for your community's page</h1>\n<p>\n    Use the long description to introduce new members to the community, or distribute\n    some important <a href=\"foo\">links</a>\n</p>\n<p>\n    You can even add images with Matrix URLs <img src=\"mxc://url\" />\n</p>\n": "<h1>HTML for your community's page</h1>\n<p>\n    Use the long description to introduce new members to the community, or distribute\n    some important <a href=\"foo\">links</a>\n</p>\n<p>\n    You can even add images with Matrix URLs <img src=\"mxc://url\" />\n</p>\n",
     "Add rooms to the community summary": "Add rooms to the community summary",
@@ -2708,6 +2729,11 @@
     "Community Settings": "Community Settings",
     "Want more than a community? <a>Get your own server</a>": "Want more than a community? <a>Get your own server</a>",
     "Changes made to your community <bold1>name</bold1> and <bold2>avatar</bold2> might not be seen by other users for up to 30 minutes.": "Changes made to your community <bold1>name</bold1> and <bold2>avatar</bold2> might not be seen by other users for up to 30 minutes.",
+    "You can create a Space from this community <a>here</a>.": "You can create a Space from this community <a>here</a>.",
+    "Ask the <a>admins</a> of this community to make it into a Space and keep a look out for the invite.": "Ask the <a>admins</a> of this community to make it into a Space and keep a look out for the invite.",
+    "Communities can now be made into Spaces": "Communities can now be made into Spaces",
+    "Spaces are a new way to make a community, with new features coming.": "Spaces are a new way to make a community, with new features coming.",
+    "Communities won't receive further updates.": "Communities won't receive further updates.",
     "These rooms are displayed to community members on the community page. Community members can join the rooms by clicking on them.": "These rooms are displayed to community members on the community page. Community members can join the rooms by clicking on them.",
     "Featured Rooms:": "Featured Rooms:",
     "Featured Users:": "Featured Users:",
@@ -2721,7 +2747,6 @@
     "Everyone": "Everyone",
     "Your community hasn't got a Long Description, a HTML page to show to community members.<br />Click here to open settings and give it one!": "Your community hasn't got a Long Description, a HTML page to show to community members.<br />Click here to open settings and give it one!",
     "Long Description (HTML)": "Long Description (HTML)",
-    "Upload avatar": "Upload avatar",
     "Community %(groupId)s not found": "Community %(groupId)s not found",
     "This homeserver does not support communities": "This homeserver does not support communities",
     "Failed to load %(groupId)s": "Failed to load %(groupId)s",
@@ -2831,6 +2856,7 @@
     "Mark as suggested": "Mark as suggested",
     "No results found": "No results found",
     "You may want to try a different search or check for typos.": "You may want to try a different search or check for typos.",
+    "Space": "Space",
     "Search names and descriptions": "Search names and descriptions",
     "If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.": "If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.",
     "Create room": "Create room",
@@ -2839,6 +2865,7 @@
     "To view %(spaceName)s, turn on the <a>Spaces beta</a>": "To view %(spaceName)s, turn on the <a>Spaces beta</a>",
     "To join %(spaceName)s, turn on the <a>Spaces beta</a>": "To join %(spaceName)s, turn on the <a>Spaces beta</a>",
     "To view %(spaceName)s, you need an invite": "To view %(spaceName)s, you need an invite",
+    "Created from <Community />": "Created from <Community />",
     "Welcome to <name/>": "Welcome to <name/>",
     "Random": "Random",
     "Support": "Support",
@@ -3112,7 +3139,6 @@
     "Page Down": "Page Down",
     "Esc": "Esc",
     "Enter": "Enter",
-    "Space": "Space",
     "End": "End",
     "[number]": "[number]"
 }

src/settings/controllers/NotificationControllers.ts

@@ -21,6 +21,7 @@ import { SettingLevel } from "../SettingLevel";
 
 // XXX: This feels wrong.
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
+import { PushRuleActionName } from "matrix-js-sdk/src/@types/PushRules";
 
 // .m.rule.master being enabled means all events match that push rule
 // default action on this rule is dont_notify, but it could be something else
@@ -35,7 +36,7 @@ export function isPushNotifyDisabled(): boolean {
     }
 
     // If the rule is enabled then check it does not notify on everything
-    return masterRule.enabled && !masterRule.actions.includes("notify");
+    return masterRule.enabled && !masterRule.actions.includes(PushRuleActionName.Notify);
 }
 
 function getNotifier(): any { // TODO: [TS] Formal type that doesn't cause a cyclical reference.

src/stores/GroupFilterOrderStore.js

@@ -14,12 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { Store } from 'flux/utils';
+import { EventType } from "matrix-js-sdk/src/@types/event";
 import dis from '../dispatcher/dispatcher';
 import GroupStore from './GroupStore';
 import Analytics from '../Analytics';
 import * as RoomNotifs from "../RoomNotifs";
 import { MatrixClientPeg } from '../MatrixClientPeg';
 import SettingsStore from "../settings/SettingsStore";
+import { CreateEventField } from "../components/views/dialogs/CreateSpaceFromCommunityDialog";
 
 const INITIAL_STATE = {
     orderedTags: null,
@@ -235,8 +237,12 @@ class GroupFilterOrderStore extends Store {
             (t) => (t[0] !== '+' || groupIds.includes(t)) && !removedTags.has(t),
         );
 
+        const cli = MatrixClientPeg.get();
+        const migratedCommunities = new Set(cli.getRooms().map(r => {
+            return r.currentState.getStateEvents(EventType.RoomCreate, "")?.getContent()[CreateEventField];
+        }).filter(Boolean));
         const groupIdsToAdd = groupIds.filter(
-            (groupId) => !tags.includes(groupId) && !removedTags.has(groupId),
+            (groupId) => !tags.includes(groupId) && !removedTags.has(groupId) && !migratedCommunities.has(groupId),
         );
 
         return tagsToKeep.concat(groupIdsToAdd);

src/stores/GroupStore.js

@@ -20,11 +20,11 @@ import FlairStore from './FlairStore';
 import { MatrixClientPeg } from '../MatrixClientPeg';
 import dis from '../dispatcher/dispatcher';
 
-function parseMembersResponse(response) {
+export function parseMembersResponse(response) {
     return response.chunk.map((apiMember) => groupMemberFromApiObject(apiMember));
 }
 
-function parseRoomsResponse(response) {
+export function parseRoomsResponse(response) {
     return response.chunk.map((apiRoom) => groupRoomFromApiObject(apiRoom));
 }
 

src/stores/WidgetStore.ts

@@ -137,6 +137,20 @@ export default class WidgetStore extends AsyncStoreWithClient<IState> {
         if (edited && !this.roomMap.has(room.roomId)) {
             this.roomMap.set(room.roomId, roomInfo);
         }
+
+        // If a persistent widget is active, check to see if it's just been removed.
+        // If it has, it needs to destroyed otherwise unmounting the node won't kill it
+        const persistentWidgetId = ActiveWidgetStore.getPersistentWidgetId();
+        if (persistentWidgetId) {
+            if (
+                ActiveWidgetStore.getRoomId(persistentWidgetId) === room.roomId &&
+                !roomInfo.widgets.some(w => w.id === persistentWidgetId)
+            ) {
+                console.log(`Persistent widget ${persistentWidgetId} removed from room ${room.roomId}: destroying.`);
+                ActiveWidgetStore.destroyPersistentWidget(persistentWidgetId);
+            }
+        }
+
         this.emit(room.roomId);
     }
 

src/utils/EventUtils.ts

@@ -116,14 +116,14 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
         (eventType === EventType.RoomMessage && msgtype && msgtype.startsWith("m.key.verification")) ||
         (eventType === EventType.RoomCreate) ||
         (eventType === EventType.RoomEncryption) ||
-        (eventType === EventType.CallInvite) ||
         (tileHandler === "messages.MJitsiWidgetEvent")
     );
     let isInfoMessage = (
         !isBubbleMessage &&
         eventType !== EventType.RoomMessage &&
         eventType !== EventType.Sticker &&
-        eventType !== EventType.RoomCreate
+        eventType !== EventType.RoomCreate &&
+        eventType !== EventType.CallInvite
     );
 
     // If we're showing hidden events in the timeline, we should use the

src/utils/space.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixClient } from "matrix-js-sdk/src/client";
 
 import { calculateRoomVia } from "./permalinks/Permalinks";
 import Modal from "../Modal";
@@ -37,6 +38,7 @@ import { leaveRoomBehaviour } from "./membership";
 import Spinner from "../components/views/elements/Spinner";
 import dis from "../dispatcher/dispatcher";
 import LeaveSpaceDialog from "../components/views/dialogs/LeaveSpaceDialog";
+import CreateSpaceFromCommunityDialog from "../components/views/dialogs/CreateSpaceFromCommunityDialog";
 
 export const shouldShowSpaceSettings = (space: Room) => {
     const userId = space.client.getUserId();
@@ -173,3 +175,10 @@ export const leaveSpace = (space: Room) => {
         },
     }, "mx_LeaveSpaceDialog_wrapper");
 };
+
+export const createSpaceFromCommunity = (cli: MatrixClient, groupId: string): Promise<[string?]> => {
+    return Modal.createTrackedDialog('Create Space', 'from community', CreateSpaceFromCommunityDialog, {
+        matrixClient: cli,
+        groupId,
+    }, "mx_CreateSpaceFromCommunityDialog_wrapper").finished as Promise<[string?]>;
+};