diff --git a/package.json b/package.json index 958b782ac3..6c66ebed52 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..0cf1a78c4f 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/MatrixChat.js b/src/components/structures/MatrixChat.js index a185664038..dccc7be2f1 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -41,7 +41,9 @@ 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'; +// focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by _AccessibleButton.scss +import 'focus-visible'; import PageTypes from '../../PageTypes'; import { getHomePageUrl } from '../../utils/pages'; 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 =
  • - {_t("Home")} -
  • ; + homePageItem = ( + + {_t("Home")} + + ); } let signInOutItem; if (isGuest) { - signInOutItem =
  • - {_t("Sign in")} -
  • ; + signInOutItem = ( + + {_t("Sign in")} + + ); } else { - signInOutItem =
  • - {_t("Sign out")} -
  • ; + signInOutItem = ( + + {_t("Sign out")} + + ); } - const settingsItem =
  • - {_t("Settings")} -
  • ; + const settingsItem = ( + + {_t("Settings")} + + ); return
    diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js index 1797065f11..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 = ; } } if (canEditContent(this.props.mxEvent)) { - editButton = ; @@ -166,7 +170,7 @@ export default class MessageActionBar extends React.PureComponent { {reactButton} {replyButton} {editButton} -