diff --git a/package.json b/package.json
index 1da0a90b01..d2e7786bed 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "filesize": "3.5.6",
     "flux": "2.1.1",
     "focus-trap-react": "^3.0.5",
+    "focus-visible": "^5.0.2",
     "fuse.js": "^2.2.0",
     "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
     "gfm.css": "^1.1.1",
diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss
index 0c081ec0d5..f3afef284f 100644
--- a/res/css/views/elements/_AccessibleButton.scss
+++ b/res/css/views/elements/_AccessibleButton.scss
@@ -18,7 +18,7 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_AccessibleButton:focus {
+.mx_AccessibleButton:focus:not(.focus-visible) {
     outline: 0;
 }
 
diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index 0f4d0b38d4..04314e5a4e 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -21,6 +21,7 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {focusCapturedRef} from "../../utils/Accessibility";
+import {KeyCode} from "../../Keyboard";
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -67,7 +68,7 @@ export default class ContextualMenu extends React.Component {
         // on resize callback
         windowResize: PropTypes.func,
         // method to close menu
-        closeMenu: PropTypes.func,
+        closeMenu: PropTypes.func.isRequired,
     };
 
     constructor() {
@@ -114,6 +115,14 @@ export default class ContextualMenu extends React.Component {
         }
     }
 
+    _onKeyDown = (ev) => {
+        if (ev.keyCode === KeyCode.ESCAPE) {
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.props.closeMenu();
+        }
+    };
+
     render() {
         const position = {};
         let chevronFace = null;
@@ -210,7 +219,7 @@ export default class ContextualMenu extends React.Component {
 
         // FIXME: If a menu uses getDefaultProps it clobbers the onFinished
         // property set here so you can't close the menu from a button click!
-        return <div className={className} style={{...position, ...wrapperStyle}}>
+        return <div className={className} style={{...position, ...wrapperStyle}} onKeyDown={this._onKeyDown}>
             <div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect} tabIndex={0}>
                 { chevron }
                 <ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index a185664038..6a03941bd9 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -24,6 +24,9 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import Matrix from "matrix-js-sdk";
 
+// focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by _AccessibleButton.scss
+import 'focus-visible';
+
 import Analytics from "../../Analytics";
 import { DecryptionFailureTracker } from "../../DecryptionFailureTracker";
 import MatrixClientPeg from "../../MatrixClientPeg";
@@ -41,7 +44,7 @@ import * as Rooms from '../../Rooms';
 import linkifyMatrix from "../../linkify-matrix";
 import * as Lifecycle from '../../Lifecycle';
 // LifecycleStore is not used but does listen to and dispatch actions
-require('../../stores/LifecycleStore');
+import '../../stores/LifecycleStore';
 import PageTypes from '../../PageTypes';
 import { getHomePageUrl } from '../../utils/pages';
 
diff --git a/src/components/structures/TabbedView.js b/src/components/structures/TabbedView.js
index 6ececbb329..01c68fad62 100644
--- a/src/components/structures/TabbedView.js
+++ b/src/components/structures/TabbedView.js
@@ -1,6 +1,7 @@
 /*
 Copyright 2017 Travis Ralston
 Copyright 2019 New Vector Ltd
+Copyright 2019 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.
@@ -18,6 +19,7 @@ limitations under the License.
 import * as React from "react";
 import {_t} from '../../languageHandler';
 import PropTypes from "prop-types";
+import sdk from "../../index";
 
 /**
  * Represents a tab for the TabbedView.
@@ -70,6 +72,8 @@ export class TabbedView extends React.Component {
     }
 
     _renderTabLabel(tab) {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
         let classes = "mx_TabbedView_tabLabel ";
 
         const idx = this.props.tabs.indexOf(tab);
@@ -84,19 +88,12 @@ export class TabbedView extends React.Component {
 
         const label = _t(tab.label);
         return (
-            <span
-                className={classes}
-                key={"tab_label_" + tab.label}
-                onClick={onClickHandler}
-                role="button"
-                aria-label={label}
-                tabIndex={0}
-            >
+            <AccessibleButton className={classes} key={"tab_label_" + tab.label} onClick={onClickHandler}>
                 {tabIcon}
                 <span className="mx_TabbedView_tabLabel_text">
                     { label }
                 </span>
-            </span>
+            </AccessibleButton>
         );
     }
 
diff --git a/src/components/structures/TopLeftMenuButton.js b/src/components/structures/TopLeftMenuButton.js
index cf3dda077c..42b8623e56 100644
--- a/src/components/structures/TopLeftMenuButton.js
+++ b/src/components/structures/TopLeftMenuButton.js
@@ -109,10 +109,11 @@ export default class TopLeftMenuButton extends React.Component {
         return (
             <AccessibleButton
                 className="mx_TopLeftMenuButton"
-                role="button"
                 onClick={this.onToggleMenu}
                 inputRef={(r) => this._buttonRef = r}
                 aria-label={_t("Your profile")}
+                aria-haspopup={true}
+                aria-expanded={this.state.menuDisplayed}
             >
                 <BaseAvatar
                     idName={MatrixClientPeg.get().getUserId()}
diff --git a/src/components/views/context_menus/GroupInviteTileContextMenu.js b/src/components/views/context_menus/GroupInviteTileContextMenu.js
index 4a8a33614b..8c0d9c215b 100644
--- a/src/components/views/context_menus/GroupInviteTileContextMenu.js
+++ b/src/components/views/context_menus/GroupInviteTileContextMenu.js
@@ -1,5 +1,6 @@
 /*
 Copyright 2018 Vector Creations Ltd
+Copyright 2019 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.
@@ -77,11 +78,12 @@ export default class GroupInviteTileContextMenu extends React.Component {
     }
 
     render() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return <div>
-            <div className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject} >
+            <AccessibleButton className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject} >
                 <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                 { _t('Reject') }
-            </div>
+            </AccessibleButton>
         </div>;
     }
 }
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 66005eb730..a832b2fbb2 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -2,6 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2019 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.
@@ -288,6 +289,8 @@ module.exports = createReactClass({
     },
 
     render: function() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
         const cli = MatrixClientPeg.get();
         const me = cli.getUserId();
         const mxEvent = this.props.mxEvent;
@@ -319,89 +322,89 @@ module.exports = createReactClass({
         if (!mxEvent.isRedacted()) {
             if (eventStatus === EventStatus.NOT_SENT) {
                 resendButton = (
-                    <div className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
+                    <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
                         { _t('Resend') }
-                    </div>
+                    </AccessibleButton>
                 );
             }
 
             if (editStatus === EventStatus.NOT_SENT) {
                 resendEditButton = (
-                    <div className="mx_MessageContextMenu_field" onClick={this.onResendEditClick}>
+                    <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onResendEditClick}>
                         { _t('Resend edit') }
-                    </div>
+                    </AccessibleButton>
                 );
             }
 
             if (unsentReactionsCount !== 0) {
                 resendReactionsButton = (
-                    <div className="mx_MessageContextMenu_field" onClick={this.onResendReactionsClick}>
+                    <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onResendReactionsClick}>
                         { _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
-                    </div>
+                    </AccessibleButton>
                 );
             }
         }
 
         if (redactStatus === EventStatus.NOT_SENT) {
             resendRedactionButton = (
-                <div className="mx_MessageContextMenu_field" onClick={this.onResendRedactionClick}>
+                <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onResendRedactionClick}>
                     { _t('Resend removal') }
-                </div>
+                </AccessibleButton>
             );
         }
 
         if (isSent && this.state.canRedact) {
             redactButton = (
-                <div className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
+                <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
                     { _t('Remove') }
-                </div>
+                </AccessibleButton>
             );
         }
 
         if (allowCancel) {
             cancelButton = (
-                <div className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
+                <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
                     { _t('Cancel Sending') }
-                </div>
+                </AccessibleButton>
             );
         }
 
         if (isContentActionable(mxEvent)) {
             forwardButton = (
-                <div className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
+                <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
                     { _t('Forward Message') }
-                </div>
+                </AccessibleButton>
             );
 
             if (this.state.canPin) {
                 pinButton = (
-                    <div className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
+                    <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
                         { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
-                    </div>
+                    </AccessibleButton>
                 );
             }
         }
 
         const viewSourceButton = (
-            <div className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
+            <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
                 { _t('View Source') }
-            </div>
+            </AccessibleButton>
         );
 
         if (mxEvent.getType() !== mxEvent.getWireType()) {
             viewClearSourceButton = (
-                <div className="mx_MessageContextMenu_field" onClick={this.onViewClearSourceClick}>
+                <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onViewClearSourceClick}>
                     { _t('View Decrypted Source') }
-                </div>
+                </AccessibleButton>
             );
         }
 
         if (this.props.eventTileOps) {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
-                    <div className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
+                    <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
                         { _t('Unhide Preview') }
-                    </div>
+                    </AccessibleButton>
                 );
             }
         }
@@ -412,20 +415,19 @@ module.exports = createReactClass({
         }
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         const permalinkButton = (
-            <div className="mx_MessageContextMenu_field">
-                <a href={permalink}
-                  target="_blank" rel="noopener" onClick={this.onPermalinkClick}>
+            <AccessibleButton className="mx_MessageContextMenu_field">
+                <a href={permalink} target="_blank" rel="noopener" onClick={this.onPermalinkClick} tabIndex={-1}>
                     { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
                         ? _t('Share Permalink') : _t('Share Message') }
                 </a>
-            </div>
+            </AccessibleButton>
         );
 
         if (this.props.eventTileOps && this.props.eventTileOps.getInnerText) {
             quoteButton = (
-                <div className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
+                <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
                     { _t('Quote') }
-                </div>
+                </AccessibleButton>
             );
         }
 
@@ -435,34 +437,43 @@ module.exports = createReactClass({
             isUrlPermitted(mxEvent.event.content.external_url)
         ) {
             externalURLButton = (
-                <div className="mx_MessageContextMenu_field">
-                    <a href={mxEvent.event.content.external_url}
-                      rel="noopener" target="_blank" onClick={this.closeMenu}>{ _t('Source URL') }</a>
-                </div>
+                <AccessibleButton className="mx_MessageContextMenu_field">
+                    <a
+                        href={mxEvent.event.content.external_url}
+                        target="_blank"
+                        rel="noopener"
+                        onClick={this.closeMenu}
+                        tabIndex={-1}
+                    >
+                        { _t('Source URL') }
+                    </a>
+                </AccessibleButton>
           );
         }
 
         if (this.props.collapseReplyThread) {
             collapseReplyThread = (
-                <div className="mx_MessageContextMenu_field" onClick={this.onCollapseReplyThreadClick}>
+                <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onCollapseReplyThreadClick}>
                     { _t('Collapse Reply Thread') }
-                </div>
+                </AccessibleButton>
             );
         }
 
         let e2eInfo;
         if (this.props.e2eInfoCallback) {
-            e2eInfo = <div className="mx_MessageContextMenu_field" onClick={this.e2eInfoClicked}>
+            e2eInfo = (
+                <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.e2eInfoClicked}>
                     { _t('End-to-end encryption information') }
-                </div>;
+                </AccessibleButton>
+            );
         }
 
         let reportEventButton;
         if (mxEvent.getSender() !== me) {
             reportEventButton = (
-                <div className="mx_MessageContextMenu_field" onClick={this.onReportEventClick}>
+                <AccessibleButton className="mx_MessageContextMenu_field" onClick={this.onReportEventClick}>
                     { _t('Report Content') }
-                </div>
+                </AccessibleButton>
             );
         }
 
diff --git a/src/components/views/context_menus/RoomTileContextMenu.js b/src/components/views/context_menus/RoomTileContextMenu.js
index eba8254c03..9bb573026f 100644
--- a/src/components/views/context_menus/RoomTileContextMenu.js
+++ b/src/components/views/context_menus/RoomTileContextMenu.js
@@ -2,6 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2019 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.
@@ -227,6 +228,8 @@ module.exports = createReactClass({
     },
 
     _renderNotifMenu: function() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
         const alertMeClasses = classNames({
             'mx_RoomTileContextMenu_notif_field': true,
             'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES_LOUD,
@@ -249,29 +252,29 @@ module.exports = createReactClass({
 
         return (
             <div className="mx_RoomTileContextMenu">
-                <div className="mx_RoomTileContextMenu_notif_picker" >
+                <div className="mx_RoomTileContextMenu_notif_picker">
                     <img src={require("../../../../res/img/notif-slider.svg")} width="20" height="107" />
                 </div>
-                <div className={alertMeClasses} onClick={this._onClickAlertMe} >
+                <AccessibleButton className={alertMeClasses} onClick={this._onClickAlertMe}>
                     <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
                     <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-off-copy.svg")} width="16" height="12" />
                     { _t('All messages (noisy)') }
-                </div>
-                <div className={allNotifsClasses} onClick={this._onClickAllNotifs} >
+                </AccessibleButton>
+                <AccessibleButton className={allNotifsClasses} onClick={this._onClickAllNotifs}>
                     <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
                     <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-off.svg")} width="16" height="12" />
                     { _t('All messages') }
-                </div>
-                <div className={mentionsClasses} onClick={this._onClickMentions} >
+                </AccessibleButton>
+                <AccessibleButton className={mentionsClasses} onClick={this._onClickMentions}>
                     <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
                     <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-mentions.svg")} width="16" height="12" />
                     { _t('Mentions only') }
-                </div>
-                <div className={muteNotifsClasses} onClick={this._onClickMute} >
+                </AccessibleButton>
+                <AccessibleButton className={muteNotifsClasses} onClick={this._onClickMute}>
                     <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
                     <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute.svg")} width="16" height="12" />
                     { _t('Mute') }
-                </div>
+                </AccessibleButton>
             </div>
         );
     },
@@ -287,12 +290,13 @@ module.exports = createReactClass({
     },
 
     _renderSettingsMenu: function() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
             <div>
-                <div className="mx_RoomTileContextMenu_tag_field" onClick={this._onClickSettings} >
+                <AccessibleButton className="mx_RoomTileContextMenu_tag_field" onClick={this._onClickSettings} >
                     <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icons-settings-room.svg")} width="15" height="15" />
                     { _t('Settings') }
-                </div>
+                </AccessibleButton>
             </div>
         );
     },
@@ -302,6 +306,8 @@ module.exports = createReactClass({
             return null;
         }
 
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
         let leaveClickHandler = null;
         let leaveText = null;
 
@@ -323,15 +329,17 @@ module.exports = createReactClass({
 
         return (
             <div>
-                <div className="mx_RoomTileContextMenu_leave" onClick={leaveClickHandler} >
+                <AccessibleButton className="mx_RoomTileContextMenu_leave" onClick={leaveClickHandler} >
                     <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                     { leaveText }
-                </div>
+                </AccessibleButton>
             </div>
         );
     },
 
     _renderRoomTagMenu: function() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
         const favouriteClasses = classNames({
             'mx_RoomTileContextMenu_tag_field': true,
             'mx_RoomTileContextMenu_tag_fieldSet': this.state.isFavourite,
@@ -352,21 +360,21 @@ module.exports = createReactClass({
 
         return (
             <div>
-                <div className={favouriteClasses} onClick={this._onClickFavourite} >
+                <AccessibleButton className={favouriteClasses} onClick={this._onClickFavourite} >
                     <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_fave.svg")} width="15" height="15" />
                     <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_fave_on.svg")} width="15" height="15" />
                     { _t('Favourite') }
-                </div>
-                <div className={lowPriorityClasses} onClick={this._onClickLowPriority} >
+                </AccessibleButton>
+                <AccessibleButton className={lowPriorityClasses} onClick={this._onClickLowPriority} >
                     <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_low.svg")} width="15" height="15" />
                     <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_low_on.svg")} width="15" height="15" />
                     { _t('Low Priority') }
-                </div>
-                <div className={dmClasses} onClick={this._onClickDM} >
+                </AccessibleButton>
+                <AccessibleButton className={dmClasses} onClick={this._onClickDM} >
                     <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_person.svg")} width="15" height="15" />
                     <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_person_on.svg")} width="15" height="15" />
                     { _t('Direct Chat') }
-                </div>
+                </AccessibleButton>
             </div>
         );
     },
diff --git a/src/components/views/context_menus/TopLeftMenu.js b/src/components/views/context_menus/TopLeftMenu.js
index 09e9142201..4080ebf5bf 100644
--- a/src/components/views/context_menus/TopLeftMenu.js
+++ b/src/components/views/context_menus/TopLeftMenu.js
@@ -24,6 +24,7 @@ import Modal from "../../../Modal";
 import SdkConfig from '../../../SdkConfig';
 import { getHostingLink } from '../../../utils/HostingLink';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from "../../../index";
 
 export class TopLeftMenu extends React.Component {
     static propTypes = {
@@ -57,6 +58,8 @@ export class TopLeftMenu extends React.Component {
     }
 
     render() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
         const isGuest = MatrixClientPeg.get().isGuest();
 
         const hostingSignupLink = getHostingLink('user-context-menu');
@@ -77,25 +80,33 @@ export class TopLeftMenu extends React.Component {
 
         let homePageItem = null;
         if (this.hasHomePage()) {
-            homePageItem = <li className="mx_TopLeftMenu_icon_home" onClick={this.viewHomePage} tabIndex={0}>
-                {_t("Home")}
-            </li>;
+            homePageItem = (
+                <AccessibleButton element="li" className="mx_TopLeftMenu_icon_home" onClick={this.viewHomePage}>
+                    {_t("Home")}
+                </AccessibleButton>
+            );
         }
 
         let signInOutItem;
         if (isGuest) {
-            signInOutItem = <li className="mx_TopLeftMenu_icon_signin" onClick={this.signIn} tabIndex={0}>
-                {_t("Sign in")}
-            </li>;
+            signInOutItem = (
+                <AccessibleButton element="li" className="mx_TopLeftMenu_icon_signin" onClick={this.signIn}>
+                    {_t("Sign in")}
+                </AccessibleButton>
+            );
         } else {
-            signInOutItem = <li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut} tabIndex={0}>
-                {_t("Sign out")}
-            </li>;
+            signInOutItem = (
+                <AccessibleButton element="li" className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>
+                    {_t("Sign out")}
+                </AccessibleButton>
+            );
         }
 
-        const settingsItem = <li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings} tabIndex={0}>
-            {_t("Settings")}
-        </li>;
+        const settingsItem = (
+            <AccessibleButton element="li" className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>
+                {_t("Settings")}
+            </AccessibleButton>
+        );
 
         return <div className="mx_TopLeftMenu mx_HiddenFocusable" tabIndex={0} ref={this.props.containerRef}>
             <div className="mx_TopLeftMenu_section_noIcon" aria-readonly={true}>
diff --git a/src/components/views/elements/ToggleSwitch.js b/src/components/views/elements/ToggleSwitch.js
index e8e870edd8..05986e4e99 100644
--- a/src/components/views/elements/ToggleSwitch.js
+++ b/src/components/views/elements/ToggleSwitch.js
@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from "classnames";
+import {KeyCode} from "../../../Keyboard";
 
 export default class ToggleSwitch extends React.Component {
     static propTypes = {
@@ -44,10 +45,7 @@ export default class ToggleSwitch extends React.Component {
         }
     }
 
-    _onClick = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-
+    _toggle = () => {
         if (this.props.disabled) return;
 
         const newState = !this.state.checked;
@@ -57,6 +55,22 @@ export default class ToggleSwitch extends React.Component {
         }
     };
 
+    _onClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        this._toggle();
+    };
+
+    _onKeyDown = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (e.keyCode === KeyCode.ENTER || e.keyCode === KeyCode.SPACE) {
+            this._toggle();
+        }
+    };
+
     render() {
         // eslint-disable-next-line no-unused-vars
         const {checked, disabled, onChange, ...props} = this.props;
@@ -71,6 +85,7 @@ export default class ToggleSwitch extends React.Component {
                 {...props}
                 className={classes}
                 onClick={this._onClick}
+                onKeyDown={this._onKeyDown}
                 role="checkbox"
                 aria-checked={this.state.checked}
                 aria-disabled={disabled}
diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index 8db268076c..2b43c5fe2a 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -140,6 +140,8 @@ export default class MessageActionBar extends React.PureComponent {
     }
 
     render() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
         let reactButton;
         let replyButton;
         let editButton;
@@ -149,14 +151,16 @@ export default class MessageActionBar extends React.PureComponent {
                 reactButton = this.renderReactButton();
             }
             if (this.context.room.canReply) {
-                replyButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
+                replyButton = <AccessibleButton
+                    className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
                     title={_t("Reply")}
                     onClick={this.onReplyClick}
                 />;
             }
         }
         if (canEditContent(this.props.mxEvent)) {
-            editButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
+            editButton = <AccessibleButton
+                className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
                 title={_t("Edit")}
                 onClick={this.onEditClick}
             />;
@@ -166,9 +170,11 @@ export default class MessageActionBar extends React.PureComponent {
             {reactButton}
             {replyButton}
             {editButton}
-            <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
+            <AccessibleButton
+                className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
                 title={_t("Options")}
                 onClick={this.onOptionsClick}
+                aria-haspopup={true}
             />
         </div>;
     }
diff --git a/yarn.lock b/yarn.lock
index 9e50f38082..4985cd0700 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3367,6 +3367,11 @@ focus-trap@^2.0.1:
   dependencies:
     tabbable "^1.0.3"
 
+focus-visible@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.0.2.tgz#4fae9cf40458b73c10701c9774c462e3ccd53caf"
+  integrity sha512-zT2fj/bmOgEBjqGbURGlowTmCwsIs3bRDMr/sFZz8Ly7VkEiwuCn9swNTL3pPuf8Oua2de7CLuKdnuNajWdDsQ==
+
 follow-redirects@^1.0.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"