From 9463fda1c10a26542bbfdd6ae0556ed8aa0fbb02 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 18 Feb 2021 10:55:24 +0000
Subject: [PATCH] Improve VoiceOver & WebKit accessibility support

Based on https://bugs.webkit.org/show_bug.cgi?id=167671#c15
(workaround)
---
 src/autocomplete/AutocompleteProvider.tsx   | 17 +++++------------
 src/autocomplete/CommandProvider.tsx        |  2 +-
 src/autocomplete/CommunityProvider.tsx      |  2 +-
 src/autocomplete/DuckDuckGoProvider.tsx     |  2 +-
 src/autocomplete/EmojiProvider.tsx          |  2 +-
 src/autocomplete/NotifProvider.tsx          |  2 +-
 src/autocomplete/RoomProvider.tsx           |  2 +-
 src/autocomplete/UserProvider.tsx           |  2 +-
 src/components/views/rooms/Autocomplete.tsx |  4 ++--
 9 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/autocomplete/AutocompleteProvider.tsx b/src/autocomplete/AutocompleteProvider.tsx
index a40ce7144d..cc958546e1 100644
--- a/src/autocomplete/AutocompleteProvider.tsx
+++ b/src/autocomplete/AutocompleteProvider.tsx
@@ -27,11 +27,11 @@ export interface ICommand {
     };
 }
 
-export default class AutocompleteProvider {
+export default abstract class AutocompleteProvider {
     commandRegex: RegExp;
     forcedCommandRegex: RegExp;
 
-    constructor(commandRegex?: RegExp, forcedCommandRegex?: RegExp) {
+    protected constructor(commandRegex?: RegExp, forcedCommandRegex?: RegExp) {
         if (commandRegex) {
             if (!commandRegex.global) {
                 throw new Error('commandRegex must have global flag set');
@@ -93,18 +93,11 @@ export default class AutocompleteProvider {
         };
     }
 
-    async getCompletions(query: string, selection: ISelectionRange, force = false): Promise<ICompletion[]> {
-        return [];
-    }
+    abstract getCompletions(query: string, selection: ISelectionRange, force: boolean): Promise<ICompletion[]>;
 
-    getName(): string {
-        return 'Default Provider';
-    }
+    abstract getName(): string;
 
-    renderCompletions(completions: React.ReactNode[]): React.ReactNode | null {
-        console.error('stub; should be implemented in subclasses');
-        return null;
-    }
+    abstract renderCompletions(completions: React.ReactNode[]): React.ReactNode | null;
 
     // Whether we should provide completions even if triggered forcefully, without a sigil.
     shouldForceComplete(): boolean {
diff --git a/src/autocomplete/CommandProvider.tsx b/src/autocomplete/CommandProvider.tsx
index c2d1290e08..7698dfcd15 100644
--- a/src/autocomplete/CommandProvider.tsx
+++ b/src/autocomplete/CommandProvider.tsx
@@ -91,7 +91,7 @@ export default class CommandProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_block"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("Command Autocomplete")}
             >
                 { completions }
diff --git a/src/autocomplete/CommunityProvider.tsx b/src/autocomplete/CommunityProvider.tsx
index ebf5d536ec..8e2d2789cd 100644
--- a/src/autocomplete/CommunityProvider.tsx
+++ b/src/autocomplete/CommunityProvider.tsx
@@ -112,7 +112,7 @@ export default class CommunityProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("Community Autocomplete")}
             >
                 { completions }
diff --git a/src/autocomplete/DuckDuckGoProvider.tsx b/src/autocomplete/DuckDuckGoProvider.tsx
index e63f7255dc..a16c82aaf9 100644
--- a/src/autocomplete/DuckDuckGoProvider.tsx
+++ b/src/autocomplete/DuckDuckGoProvider.tsx
@@ -99,7 +99,7 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_block"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("DuckDuckGo Results")}
             >
                 { completions }
diff --git a/src/autocomplete/EmojiProvider.tsx b/src/autocomplete/EmojiProvider.tsx
index 705474f8d0..4a237fe091 100644
--- a/src/autocomplete/EmojiProvider.tsx
+++ b/src/autocomplete/EmojiProvider.tsx
@@ -140,7 +140,7 @@ export default class EmojiProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("Emoji Autocomplete")}
             >
                 { completions }
diff --git a/src/autocomplete/NotifProvider.tsx b/src/autocomplete/NotifProvider.tsx
index ef1823c0ca..e948f8a985 100644
--- a/src/autocomplete/NotifProvider.tsx
+++ b/src/autocomplete/NotifProvider.tsx
@@ -66,7 +66,7 @@ export default class NotifProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("Notification Autocomplete")}
             >
                 { completions }
diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx
index 74deacf61f..6614615436 100644
--- a/src/autocomplete/RoomProvider.tsx
+++ b/src/autocomplete/RoomProvider.tsx
@@ -123,7 +123,7 @@ export default class RoomProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("Room Autocomplete")}
             >
                 { completions }
diff --git a/src/autocomplete/UserProvider.tsx b/src/autocomplete/UserProvider.tsx
index 32eea55b0b..6d909d38ad 100644
--- a/src/autocomplete/UserProvider.tsx
+++ b/src/autocomplete/UserProvider.tsx
@@ -178,7 +178,7 @@ export default class UserProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill"
-                role="listbox"
+                role="presentation"
                 aria-label={_t("User Autocomplete")}
             >
                 { completions }
diff --git a/src/components/views/rooms/Autocomplete.tsx b/src/components/views/rooms/Autocomplete.tsx
index e62a5a9bd6..cdea607cea 100644
--- a/src/components/views/rooms/Autocomplete.tsx
+++ b/src/components/views/rooms/Autocomplete.tsx
@@ -298,7 +298,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
 
 
             return completions.length > 0 ? (
-                <div key={i} className="mx_Autocomplete_ProviderSection">
+                <div key={i} className="mx_Autocomplete_ProviderSection" role="presentation">
                     <div className="mx_Autocomplete_provider_name">{ completionResult.provider.getName() }</div>
                     { completionResult.provider.renderCompletions(completions) }
                 </div>
@@ -306,7 +306,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         }).filter((completion) => !!completion);
 
         return !this.state.hide && renderedCompletions.length > 0 ? (
-            <div className="mx_Autocomplete" ref={this.containerRef}>
+            <div id="mx_Autocomplete" className="mx_Autocomplete" ref={this.containerRef} role="listbox">
                 { renderedCompletions }
             </div>
         ) : null;