Merge branch 'develop' into travis/feature/wellknown2

src/components/views/elements/AccessibleButton.js

@@ -63,8 +63,12 @@ export default function AccessibleButton(props) {
         };
     }
 
-    restProps.tabIndex = restProps.tabIndex || "0";
-    restProps.role = "button";
+    // Pass through the ref - used for keyboard shortcut access to some buttons
+    restProps.ref = restProps.inputRef;
+    delete restProps.inputRef;
+
+    restProps.tabIndex = restProps.tabIndex === undefined ? "0" : restProps.tabIndex;
+    restProps.role = restProps.role === undefined ? "button" : restProps.role;
     restProps.className = (restProps.className ? restProps.className + " " : "") +
                           "mx_AccessibleButton";
 
@@ -89,6 +93,7 @@ export default function AccessibleButton(props) {
  */
 AccessibleButton.propTypes = {
     children: PropTypes.node,
+    inputRef: PropTypes.func,
     element: PropTypes.string,
     onClick: PropTypes.func.isRequired,
 

src/components/views/elements/EmojiText.js

@@ -1,43 +0,0 @@
-/*
- Copyright 2016 Aviral Dasgupta
- Copyright 2017 New Vector Ltd
-
- 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 from 'react';
-import PropTypes from 'prop-types';
-import {emojifyText, containsEmoji} from '../../../HtmlUtils';
-
-export default function EmojiText(props) {
-    const {element, children, addAlt, ...restProps} = props;
-
-    // fast path: simple regex to detect strings that don't contain
-    // emoji and just return them
-    if (containsEmoji(children)) {
-        restProps.dangerouslySetInnerHTML = emojifyText(children, addAlt);
-        return React.createElement(element, restProps);
-    } else {
-        return React.createElement(element, restProps, children);
-    }
-}
-
-EmojiText.propTypes = {
-    element: PropTypes.string,
-    children: PropTypes.string.isRequired,
-};
-
-EmojiText.defaultProps = {
-    element: 'span',
-    addAlt: true,
-};

src/components/views/elements/Flair.js

@@ -45,12 +45,18 @@ class FlairAvatar extends React.Component {
         const tooltip = this.props.groupProfile.name ?
             `${this.props.groupProfile.name} (${this.props.groupProfile.groupId})`:
             this.props.groupProfile.groupId;
+
+        // Note: we hide flair from screen readers but ideally we'd support
+        // reading something out on hover. There's no easy way to do this though,
+        // so instead we just hide it completely.
         return <img
             src={httpUrl}
             width="16"
             height="16"
             onClick={this.onClick}
-            title={tooltip} />;
+            title={tooltip}
+            aria-hidden={true}
+        />;
     }
 }
 

src/components/views/elements/MemberEventListSummary.js

@@ -117,13 +117,9 @@ module.exports = React.createClass({
             return null;
         }
 
-        const EmojiText = sdk.getComponent('elements.EmojiText');
-
         return (
             <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
-                <EmojiText>
-                    { summaries.join(", ") }
-                </EmojiText>
+                { summaries.join(", ") }
             </span>
         );
     },

src/components/views/elements/MessageEditor.js

@@ -1,5 +1,6 @@
 /*
 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.
@@ -27,6 +28,7 @@ import Autocomplete from '../rooms/Autocomplete';
 import {PartCreator} from '../../../editor/parts';
 import {renderModel} from '../../../editor/render';
 import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
+import classNames from 'classnames';
 
 export default class MessageEditor extends React.Component {
     static propTypes = {
@@ -40,16 +42,17 @@ export default class MessageEditor extends React.Component {
 
     constructor(props, context) {
         super(props, context);
+        const room = this.context.matrixClient.getRoom(this.props.event.getRoomId());
         const partCreator = new PartCreator(
             () => this._autocompleteRef,
             query => this.setState({query}),
+            room,
         );
         this.model = new EditorModel(
-            parseEvent(this.props.event),
+            parseEvent(this.props.event, room),
             partCreator,
             this._updateEditorState,
         );
-        const room = this.context.matrixClient.getRoom(this.props.event.getRoomId());
         this.state = {
             autoComplete: null,
             room,
@@ -176,7 +179,7 @@ export default class MessageEditor extends React.Component {
             </div>;
         }
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return <div className="mx_MessageEditor">
+        return <div className={classNames("mx_MessageEditor", this.props.className)}>
                 { autoComplete }
                 <div
                     className="mx_MessageEditor_editor"
@@ -185,6 +188,7 @@ export default class MessageEditor extends React.Component {
                     onInput={this._onInput}
                     onKeyDown={this._onKeyDown}
                     ref={ref => this._editorRef = ref}
+                    aria-label={_t("Edit message")}
                 ></div>
                 <div className="mx_MessageEditor_buttons">
                     <AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>