From 8d9dc195d58c06bd477489006330330f3c39dd5c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 21 Oct 2019 16:51:40 +0100
Subject: [PATCH 1/6] Make ARIA happier with DateSeparator and tidy ELS

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/elements/EventListSummary.js | 10 +++++-----
 src/components/views/messages/DateSeparator.js    |  7 ++++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/views/elements/EventListSummary.js b/src/components/views/elements/EventListSummary.js
index 79712ebb45..7a69398071 100644
--- a/src/components/views/elements/EventListSummary.js
+++ b/src/components/views/elements/EventListSummary.js
@@ -62,12 +62,12 @@ const EventListSummary = ({events, children, threshold=3, onToggle, startExpande
             </div>
             <div className="mx_EventTile_line">
                 <div className="mx_EventTile_info">
-            <span className="mx_EventListSummary_avatars" onClick={toggleExpanded}>
-                { avatars }
-            </span>
+                    <span className="mx_EventListSummary_avatars" onClick={toggleExpanded}>
+                        { avatars }
+                    </span>
                     <span className="mx_TextualEvent mx_EventListSummary_summary">
-                { summaryText }
-            </span>
+                        { summaryText }
+                    </span>
                 </div>
             </div>
         </div>
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js
index 9cea4c5cd6..900fd61914 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -56,6 +56,11 @@ export default class DateSeparator extends React.Component {
     }
 
     render() {
-        return <h2 className="mx_DateSeparator"><hr /><div>{ this.getLabel() }</div><hr /></h2>;
+        // ARIA treats <hr/>s as separators, here we abuse them slightly so manually treat this entire thing as one
+        return <h2 className="mx_DateSeparator" role="separator">
+            <hr role="none" />
+            <div>{ this.getLabel() }</div>
+            <hr role="none" />
+        </h2>;
     }
 }

From bc639312ecd41351520a2d872b68808027492843 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 23 Oct 2019 18:30:29 +0100
Subject: [PATCH 2/6] delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/EventTile.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 5152ffde3e..6af2860399 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -705,7 +705,7 @@ module.exports = createReactClass({
                                 { timestamp }
                             </a>
                         </div>
-                        <div className="mx_EventTile_line" >
+                        <div className="mx_EventTile_line">
                             <EventTileType ref="tile"
                                            mxEvent={this.props.mxEvent}
                                            highlights={this.props.highlights}
@@ -719,7 +719,7 @@ module.exports = createReactClass({
             case 'file_grid': {
                 return (
                     <div className={classes}>
-                        <div className="mx_EventTile_line" >
+                        <div className="mx_EventTile_line">
                             <EventTileType ref="tile"
                                            mxEvent={this.props.mxEvent}
                                            highlights={this.props.highlights}

From 9c63be7dc445de9eeebde7e3c9844987807a624c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 23 Oct 2019 18:31:00 +0100
Subject: [PATCH 3/6] Remove wrapping div around RoomList to fix regression
 with scrollbars

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/LeftPanel.js | 38 ++++++++++++++++++--------
 src/components/structures/SearchBox.js |  2 ++
 src/components/views/rooms/RoomList.js | 12 ++++++--
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 8a21b017fd..f5687f0595 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -116,6 +116,20 @@ const LeftPanel = createReactClass({
         this.focusedElement = null;
     },
 
+    _onFilterKeyDown: function(ev) {
+        if (!this.focusedElement) return;
+
+        switch (ev.key) {
+            case Key.ENTER: {
+                const firstRoom = ev.target.closest(".mx_LeftPanel").querySelector(".mx_RoomTile");
+                if (firstRoom) {
+                    firstRoom.click();
+                }
+                break;
+            }
+        }
+    },
+
     _onKeyDown: function(ev) {
         if (!this.focusedElement) return;
 
@@ -255,6 +269,7 @@ const LeftPanel = createReactClass({
             enableRoomSearchFocus={true}
             blurredPlaceholder={ _t('Filter') }
             placeholder={ _t('Filter rooms…') }
+            onKeyDown={this._onFilterKeyDown}
             onSearch={ this.onSearch }
             onCleared={ this.onSearchCleared }
             onFocus={this._onSearchFocus}
@@ -273,18 +288,19 @@ const LeftPanel = createReactClass({
                     <TopLeftMenuButton collapsed={this.props.collapsed} />
                     { breadcrumbs }
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
-                    <div className="mx_LeftPanel_Rooms" onKeyDown={this._onKeyDown} onFocus={this._onFocus} onBlur={this._onBlur}>
-                        <div className="mx_LeftPanel_exploreAndFilterRow">
-                            { exploreButton }
-                            { searchBox }
-                        </div>
-                        <RoomList
-                            ref={this.collectRoomList}
-                            resizeNotifier={this.props.resizeNotifier}
-                            collapsed={this.props.collapsed}
-                            searchFilter={this.state.searchFilter}
-                            ConferenceHandler={VectorConferenceHandler} />
+                    <div className="mx_LeftPanel_exploreAndFilterRow" onKeyDown={this._onKeyDown} onFocus={this._onFocus} onBlur={this._onBlur}>
+                        { exploreButton }
+                        { searchBox }
                     </div>
+                    <RoomList
+                        onKeyDown={this._onKeyDown}
+                        onFocus={this._onFocus}
+                        onBlur={this._onBlur}
+                        ref={this.collectRoomList}
+                        resizeNotifier={this.props.resizeNotifier}
+                        collapsed={this.props.collapsed}
+                        searchFilter={this.state.searchFilter}
+                        ConferenceHandler={VectorConferenceHandler} />
                 </aside>
             </div>
         );
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index de9a86c3a6..21613733db 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -30,6 +30,7 @@ module.exports = createReactClass({
     propTypes: {
         onSearch: PropTypes.func,
         onCleared: PropTypes.func,
+        onKeyDown: PropTypes.func,
         className: PropTypes.string,
         placeholder: PropTypes.string.isRequired,
 
@@ -93,6 +94,7 @@ module.exports = createReactClass({
                 this._clearSearch("keyboard");
                 break;
         }
+        if (this.props.onKeyDown) this.props.onKeyDown(ev);
     },
 
     _onFocus: function(ev) {
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index 036f50d899..80a03e7a73 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -770,9 +770,17 @@ module.exports = createReactClass({
 
         const subListComponents = this._mapSubListProps(subLists);
 
+        const {resizeNotifier, collapsed, searchFilter, ConferenceHandler, ...props} = this.props; // eslint-disable-line
         return (
-            <div ref={this._collectResizeContainer} className="mx_RoomList" role="tree" aria-label={_t("Rooms")}
-                 onMouseMove={this.onMouseMove} onMouseLeave={this.onMouseLeave}>
+            <div
+                {...props}
+                ref={this._collectResizeContainer}
+                className="mx_RoomList"
+                role="tree"
+                aria-label={_t("Rooms")}
+                onMouseMove={this.onMouseMove}
+                onMouseLeave={this.onMouseLeave}
+            >
                 { subListComponents }
             </div>
         );

From 3ee43dc2eb4dc365f1d33d1f996812659027af35 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 23 Oct 2019 18:38:43 +0100
Subject: [PATCH 4/6] correct EmojiPicker.ReactionPicker reactions PropType
 validity

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/emojipicker/ReactionPicker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/emojipicker/ReactionPicker.js b/src/components/views/emojipicker/ReactionPicker.js
index 01c04529ed..5e506f39d1 100644
--- a/src/components/views/emojipicker/ReactionPicker.js
+++ b/src/components/views/emojipicker/ReactionPicker.js
@@ -24,7 +24,7 @@ class ReactionPicker extends React.Component {
         mxEvent: PropTypes.object.isRequired,
         onFinished: PropTypes.func.isRequired,
         closeMenu: PropTypes.func.isRequired,
-        reactions: PropTypes.object.isRequired,
+        reactions: PropTypes.object,
     };
 
     constructor(props) {

From 2e6899be933f89fec9965b80341a55d9f4f68fa2 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 23 Oct 2019 18:39:39 +0100
Subject: [PATCH 5/6] Improve Accessibility of the new Emoji picker

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/emojipicker/_EmojiPicker.scss |  9 +++++++++
 src/components/views/emojipicker/Search.js  | 15 ++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss
index 8f57d97833..3bf6845c85 100644
--- a/res/css/views/emojipicker/_EmojiPicker.scss
+++ b/res/css/views/emojipicker/_EmojiPicker.scss
@@ -114,6 +114,15 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_EmojiPicker_search_icon {
+    width: 16px;
+    margin: 8px;
+}
+
+.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
+    pointer-events: none;
+}
+
 .mx_EmojiPicker_search_icon::after {
     mask: url('$(res)/img/emojipicker/search.svg') no-repeat;
     mask-size: 100%;
diff --git a/src/components/views/emojipicker/Search.js b/src/components/views/emojipicker/Search.js
index 8646559fed..3432dadea8 100644
--- a/src/components/views/emojipicker/Search.js
+++ b/src/components/views/emojipicker/Search.js
@@ -35,13 +35,22 @@ class Search extends React.PureComponent {
     }
 
     render() {
+        let rightButton;
+        if (this.props.query) {
+            rightButton = (
+                <button onClick={() => this.props.onChange("")}
+                        className="mx_EmojiPicker_search_icon mx_EmojiPicker_search_clear"
+                        title={_t("Cancel search")} />
+            );
+        } else {
+            rightButton = <span className="mx_EmojiPicker_search_icon" />;
+        }
+
         return (
             <div className="mx_EmojiPicker_search">
                 <input autoFocus type="text" placeholder="Search" value={this.props.query}
                     onChange={ev => this.props.onChange(ev.target.value)} ref={this.inputRef} />
-                <button onClick={() => this.props.onChange("")}
-                    className={`mx_EmojiPicker_search_icon ${this.props.query ? "mx_EmojiPicker_search_clear" : ""}`}
-                    title={this.props.query ? _t("Cancel search") : _t("Search")} />
+                {rightButton}
             </div>
         );
     }

From fac82745592820d2b835fed798ef44369c27eab3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 23 Oct 2019 18:45:04 +0100
Subject: [PATCH 6/6] Add comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/LeftPanel.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index f5687f0595..a0ad2b5c81 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -120,6 +120,7 @@ const LeftPanel = createReactClass({
         if (!this.focusedElement) return;
 
         switch (ev.key) {
+            // On enter of rooms filter select and activate first room if such one exists
             case Key.ENTER: {
                 const firstRoom = ev.target.closest(".mx_LeftPanel").querySelector(".mx_RoomTile");
                 if (firstRoom) {