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] 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",