Make Combobox dropdown keyboard and screen reader accessible

src/components/views/auth/CountryDropdown.js

@@ -21,6 +21,7 @@ import sdk from '../../../index';
 
 import { COUNTRIES } from '../../../phonenumber';
 import SdkConfig from "../../../SdkConfig";
+import { _t } from "../../../languageHandler";
 
 const COUNTRIES_BY_ISO2 = {};
 for (const c of COUNTRIES) {
@@ -130,10 +131,17 @@ export default class CountryDropdown extends React.Component {
         // values between mounting and the initial value propgating
         const value = this.props.value || this.state.defaultCountry.iso2;
 
-        return <Dropdown className={this.props.className + " mx_CountryDropdown"}
+        return <Dropdown
-            onOptionChange={this._onOptionChange} onSearchChange={this._onSearchChange}
+            id="mx_CountryDropdown"
-            menuWidth={298} getShortOption={this._getShortOption}
+            className={this.props.className + " mx_CountryDropdown"}
-            value={value} searchEnabled={true} disabled={this.props.disabled}
+            onOptionChange={this._onOptionChange}
+            onSearchChange={this._onSearchChange}
+            menuWidth={298}
+            getShortOption={this._getShortOption}
+            value={value}
+            searchEnabled={true}
+            disabled={this.props.disabled}
+            label={_t("Country Dropdown")}
         >
             { options }
         </Dropdown>;

src/components/views/elements/Dropdown.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2017 Vector Creations Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import AccessibleButton from './AccessibleButton';
@@ -50,6 +51,7 @@ class MenuOption extends React.Component {
         });
 
         return <div
+            id={this.props.id}
             className={optClasses}
             onClick={this._onClick}
             onMouseEnter={this._onMouseEnter}
@@ -117,6 +119,7 @@ export default class Dropdown extends React.Component {
     }
 
     componentWillMount() {
+        this._button = createRef();
         // Listen for all clicks on the document so we can close the
         // menu when the user clicks somewhere else
         document.addEventListener('click', this._onDocumentClick, false);
@@ -179,6 +182,10 @@ export default class Dropdown extends React.Component {
         this.setState({
             expanded: false,
         });
+        // their focus was on the input, its getting unmounted, move it to the button
+        if (this._button.current) {
+            this._button.current.focus();
+        }
         this.props.onOptionChange(dropdownKey);
     }
 
@@ -199,6 +206,10 @@ export default class Dropdown extends React.Component {
                 this.setState({
                     expanded: false,
                 });
+                // their focus was on the input, its getting unmounted, move it to the button
+                if (this._button.current) {
+                    this._button.current.focus();
+                }
                 break;
             case Key.ARROW_DOWN:
                 this.setState({
@@ -291,6 +302,7 @@ export default class Dropdown extends React.Component {
             const highlighted = this.state.highlightedOption === child.key;
             return (
                 <MenuOption
+                    id={`${this.props.id}__${child.key}`}
                     key={child.key}
                     dropdownKey={child.key}
                     highlighted={highlighted}
@@ -303,7 +315,7 @@ export default class Dropdown extends React.Component {
             );
         });
         if (options.length === 0) {
-            return [<div key="0" className="mx_Dropdown_option">
+            return [<div key="0" className="mx_Dropdown_option" role="option">
                 { _t("No results") }
             </div>];
         }
@@ -319,24 +331,36 @@ export default class Dropdown extends React.Component {
         let menu;
         if (this.state.expanded) {
             if (this.props.searchEnabled) {
-                currentValue = <input type="text" className="mx_Dropdown_option"
+                currentValue = (
-                    ref={this._collectInputTextBox}
+                    <input
-                    onKeyPress={this._onInputKeyPress}
+                        type="text"
-                    onKeyUp={this._onInputKeyUp}
+                        className="mx_Dropdown_option"
-                    onChange={this._onInputChange}
+                        ref={this._collectInputTextBox}
-                    value={this.state.searchQuery}
+                        onKeyPress={this._onInputKeyPress}
-                />;
+                        onKeyUp={this._onInputKeyUp}
+                        onChange={this._onInputChange}
+                        value={this.state.searchQuery}
+                        role="combobox"
+                        aria-autocomplete="list"
+                        aria-activedescendant={`${this.props.id}__${this.state.highlightedOption}`}
+                        aria-owns={`${this.props.id}_listbox`}
+                        aria-disabled={this.props.disabled}
+                        aria-label={this.props.label}
+                    />
+                );
             }
-            menu = <div className="mx_Dropdown_menu" style={menuStyle} role="listbox">
+            menu = (
-                { this._getMenuOptions() }
+                <div className="mx_Dropdown_menu" style={menuStyle} role="listbox" id={`${this.props.id}_listbox`}>
-            </div>;
+                    { this._getMenuOptions() }
+                </div>
+            );
         }
 
         if (!currentValue) {
             const selectedChild = this.props.getShortOption ?
                 this.props.getShortOption(this.props.value) :
                 this.childrenByKey[this.props.value];
-            currentValue = <div className="mx_Dropdown_option">
+            currentValue = <div className="mx_Dropdown_option" id={`${this.props.id}_value`}>
                 { selectedChild }
             </div>;
         }
@@ -352,7 +376,16 @@ export default class Dropdown extends React.Component {
         // Note the menu sits inside the AccessibleButton div so it's anchored
         // to the input, but overflows below it. The root contains both.
         return <div className={classnames(dropdownClasses)} ref={this._collectRoot}>
-            <AccessibleButton className="mx_Dropdown_input mx_no_textinput" onClick={this._onInputClick}>
+            <AccessibleButton
+                className="mx_Dropdown_input mx_no_textinput"
+                onClick={this._onInputClick}
+                aria-haspopup="listbox"
+                aria-expanded={this.state.expanded}
+                disabled={this.props.disabled}
+                inputRef={this._button}
+                aria-label={this.props.label}
+                aria-describedby={`${this.props.id}_value`}
+            >
                 { currentValue }
                 <span className="mx_Dropdown_arrow" />
                 { menu }
@@ -362,6 +395,7 @@ export default class Dropdown extends React.Component {
 }
 
 Dropdown.propTypes = {
+    id: PropTypes.string.isRequired,
     // The width that the dropdown should be. If specified,
     // the dropped-down part of the menu will be set to this
     // width.
@@ -381,4 +415,6 @@ Dropdown.propTypes = {
     value: PropTypes.string,
     // negative for consistency with HTML
     disabled: PropTypes.bool,
+    // ARIA label
+    label: PropTypes.string.isRequired,
 };

src/components/views/elements/LanguageDropdown.js

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import * as languageHandler from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
+import { _t } from "../../../languageHandler";
 
 function languageMatchesSearchQuery(query, language) {
     if (language.label.toUpperCase().indexOf(query.toUpperCase()) == 0) return true;
@@ -105,9 +106,14 @@ export default class LanguageDropdown extends React.Component {
           value = this.props.value || language;
         }
 
-        return <Dropdown className={this.props.className}
+        return <Dropdown
-            onOptionChange={this.props.onOptionChange} onSearchChange={this._onSearchChange}
+            id="mx_LanguageDropdown"
-            searchEnabled={true} value={value}
+            className={this.props.className}
+            onOptionChange={this.props.onOptionChange}
+            onSearchChange={this._onSearchChange}
+            searchEnabled={true}
+            value={value}
+            label={_t("Language Dropdown")}
         >
             { options }
         </Dropdown>;

src/i18n/strings/en_EN.json

@@ -1262,6 +1262,7 @@
     "Rotate Right": "Rotate Right",
     "Rotate clockwise": "Rotate clockwise",
     "Download this file": "Download this file",
+    "Language Dropdown": "Language Dropdown",
     "Manage Integrations": "Manage Integrations",
     "%(nameList)s %(transitionList)s": "%(nameList)s %(transitionList)s",
     "%(severalUsers)sjoined %(count)s times|other": "%(severalUsers)sjoined %(count)s times",
@@ -1627,6 +1628,7 @@
     "User Status": "User Status",
     "powered by Matrix": "powered by Matrix",
     "This homeserver would like to make sure you are not a robot.": "This homeserver would like to make sure you are not a robot.",
+    "Country Dropdown": "Country Dropdown",
     "Custom Server Options": "Custom Server Options",
     "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use this app with an existing Matrix account on a different homeserver.": "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use this app with an existing Matrix account on a different homeserver.",
     "To continue, please enter your password.": "To continue, please enter your password.",