From c882b7f332d24edf46f7eb29e0c924808e74f9cb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 14 Oct 2019 10:37:10 +0100
Subject: [PATCH 1/2] Improve A11Y for Autocomplete Commands and DDG

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/autocomplete/CommandProvider.js    |  8 +++++---
 src/autocomplete/Components.js         |  2 +-
 src/autocomplete/DuckDuckGoProvider.js | 12 +++++++++---
 src/i18n/strings/en_EN.json            |  2 ++
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/autocomplete/CommandProvider.js b/src/autocomplete/CommandProvider.js
index b13680ece2..da8fa3ed3c 100644
--- a/src/autocomplete/CommandProvider.js
+++ b/src/autocomplete/CommandProvider.js
@@ -78,8 +78,10 @@ export default class CommandProvider extends AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return <div className="mx_Autocomplete_Completion_container_block">
-            { completions }
-        </div>;
+        return (
+            <div className="mx_Autocomplete_Completion_container_block" role="listbox" aria-label={_t("Command Autocomplete")}>
+                { completions }
+            </div>
+        );
     }
 }
diff --git a/src/autocomplete/Components.js b/src/autocomplete/Components.js
index ca105bb211..32bbeb46a0 100644
--- a/src/autocomplete/Components.js
+++ b/src/autocomplete/Components.js
@@ -34,7 +34,7 @@ export class TextualCompletion extends React.Component {
             ...restProps
         } = this.props;
         return (
-            <div className={classNames('mx_Autocomplete_Completion_block', className)} {...restProps}>
+            <div className={classNames('mx_Autocomplete_Completion_block', className)} role="option" {...restProps}>
                 <span className="mx_Autocomplete_Completion_title">{ title }</span>
                 <span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
                 <span className="mx_Autocomplete_Completion_description">{ description }</span>
diff --git a/src/autocomplete/DuckDuckGoProvider.js b/src/autocomplete/DuckDuckGoProvider.js
index e25ef16428..49ef7dfb43 100644
--- a/src/autocomplete/DuckDuckGoProvider.js
+++ b/src/autocomplete/DuckDuckGoProvider.js
@@ -97,8 +97,14 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return <div className="mx_Autocomplete_Completion_container_block">
-            { completions }
-        </div>;
+        return (
+            <div
+                className="mx_Autocomplete_Completion_container_block"
+                role="listbox"
+                aria-label={_t("DuckDuckGo Results")}
+            >
+                { completions }
+            </div>
+        );
     }
 }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f524a22d4b..618ac9092c 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1740,8 +1740,10 @@
     "Clear personal data": "Clear personal data",
     "Warning: Your personal data (including encryption keys) is still stored on this device. Clear it if you're finished using this device, or want to sign in to another account.": "Warning: Your personal data (including encryption keys) is still stored on this device. Clear it if you're finished using this device, or want to sign in to another account.",
     "Commands": "Commands",
+    "Command Autocomplete": "Command Autocomplete",
     "Community Autocomplete": "Community Autocomplete",
     "Results from DuckDuckGo": "Results from DuckDuckGo",
+    "DuckDuckGo Results": "DuckDuckGo Results",
     "Emoji": "Emoji",
     "Emoji Autocomplete": "Emoji Autocomplete",
     "Notify the whole room": "Notify the whole room",

From d3517cdb71dfb7d5b4944f0805376569f796592b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 14 Oct 2019 10:44:42 +0100
Subject: [PATCH 2/2] actually pass role="tabpanel" to the DOM for FilePanel
 and NotifPanel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/FilePanel.js        | 22 +++++++++----------
 .../structures/NotificationPanel.js           | 20 ++++++++---------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js
index fb2bdcad42..c7e8295f80 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@@ -117,17 +117,17 @@ const FilePanel = createReactClass({
             // console.log("rendering TimelinePanel for timelineSet " + this.state.timelineSet.room.roomId + " " +
             //             "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId);
             return (
-                <TimelinePanel key={"filepanel_" + this.props.roomId}
-                    className="mx_FilePanel"
-                    manageReadReceipts={false}
-                    manageReadMarkers={false}
-                    timelineSet={this.state.timelineSet}
-                    showUrlPreview = {false}
-                    tileShape="file_grid"
-                    resizeNotifier={this.props.resizeNotifier}
-                    empty={_t('There are no visible files in this room')}
-                    role="tabpanel"
-                />
+                <div className="mx_FilePanel" role="tabpanel">
+                    <TimelinePanel key={"filepanel_" + this.props.roomId}
+                        manageReadReceipts={false}
+                        manageReadMarkers={false}
+                        timelineSet={this.state.timelineSet}
+                        showUrlPreview = {false}
+                        tileShape="file_grid"
+                        resizeNotifier={this.props.resizeNotifier}
+                        empty={_t('There are no visible files in this room')}
+                    />
+                </div>
             );
         } else {
             return (
diff --git a/src/components/structures/NotificationPanel.js b/src/components/structures/NotificationPanel.js
index 3a07bf2e63..470c7c8728 100644
--- a/src/components/structures/NotificationPanel.js
+++ b/src/components/structures/NotificationPanel.js
@@ -38,16 +38,16 @@ const NotificationPanel = createReactClass({
         const timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
         if (timelineSet) {
             return (
-                <TimelinePanel key={"NotificationPanel_" + this.props.roomId}
-                    className="mx_NotificationPanel"
-                    manageReadReceipts={false}
-                    manageReadMarkers={false}
-                    timelineSet={timelineSet}
-                    showUrlPreview={false}
-                    tileShape="notif"
-                    empty={_t('You have no visible notifications')}
-                    role="tabpanel"
-                />
+                <div className="mx_NotificationPanel" role="tabpanel">
+                    <TimelinePanel key={"NotificationPanel_" + this.props.roomId}
+                        manageReadReceipts={false}
+                        manageReadMarkers={false}
+                        timelineSet={timelineSet}
+                        showUrlPreview={false}
+                        tileShape="notif"
+                        empty={_t('You have no visible notifications')}
+                    />
+                </div>
             );
         } else {
             console.error("No notifTimelineSet available!");