Merge pull request #3555 from matrix-org/t3chguy/a11y3

Accessibility fixes to autocomplete and tabpanels

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">
+        return (
+            <div className="mx_Autocomplete_Completion_container_block" role="listbox" aria-label={_t("Command Autocomplete")}>
                 { completions }
-        </div>;
+            </div>
+        );
     }
 }

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>

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">
+        return (
+            <div
+                className="mx_Autocomplete_Completion_container_block"
+                role="listbox"
+                aria-label={_t("DuckDuckGo Results")}
+            >
                 { completions }
-        </div>;
+            </div>
+        );
     }
 }

src/components/structures/FilePanel.js

@@ -117,8 +117,8 @@ 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 (
+                <div className="mx_FilePanel" role="tabpanel">
                     <TimelinePanel key={"filepanel_" + this.props.roomId}
-                    className="mx_FilePanel"
                         manageReadReceipts={false}
                         manageReadMarkers={false}
                         timelineSet={this.state.timelineSet}
@@ -126,8 +126,8 @@ const FilePanel = createReactClass({
                         tileShape="file_grid"
                         resizeNotifier={this.props.resizeNotifier}
                         empty={_t('There are no visible files in this room')}
-                    role="tabpanel"
                     />
+                </div>
             );
         } else {
             return (

src/components/structures/NotificationPanel.js

@@ -38,16 +38,16 @@ const NotificationPanel = createReactClass({
         const timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
         if (timelineSet) {
             return (
+                <div className="mx_NotificationPanel" role="tabpanel">
                     <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>
             );
         } else {
             console.error("No notifTimelineSet available!");

src/i18n/strings/en_EN.json

@@ -1745,8 +1745,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",