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

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}
+                <div className="mx_FilePanel" role="tabpanel">
-                    className="mx_FilePanel"
+                    <TimelinePanel key={"filepanel_" + this.props.roomId}
-                    manageReadReceipts={false}
+                        manageReadReceipts={false}
-                    manageReadMarkers={false}
+                        manageReadMarkers={false}
-                    timelineSet={this.state.timelineSet}
+                        timelineSet={this.state.timelineSet}
-                    showUrlPreview = {false}
+                        showUrlPreview = {false}
-                    tileShape="file_grid"
+                        tileShape="file_grid"
-                    resizeNotifier={this.props.resizeNotifier}
+                        resizeNotifier={this.props.resizeNotifier}
-                    empty={_t('There are no visible files in this room')}
+                        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 (
-                <TimelinePanel key={"NotificationPanel_" + this.props.roomId}
+                <div className="mx_NotificationPanel" role="tabpanel">
-                    className="mx_NotificationPanel"
+                    <TimelinePanel key={"NotificationPanel_" + this.props.roomId}
-                    manageReadReceipts={false}
+                        manageReadReceipts={false}
-                    manageReadMarkers={false}
+                        manageReadMarkers={false}
-                    timelineSet={timelineSet}
+                        timelineSet={timelineSet}
-                    showUrlPreview={false}
+                        showUrlPreview={false}
-                    tileShape="notif"
+                        tileShape="notif"
-                    empty={_t('You have no visible notifications')}
+                        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",