Improve screen reader accessibility

src/components/CountryList.js

@@ -66,6 +66,7 @@ class CountryList extends Component {
       };
       const countryClass = classNames(countryClassObj);
       const keyPrefix = isPreferred ? 'pref-' : '';
+      const isSelected = this.props.selectedCountryCode === country.iso2;
 
       return (
         <li
@@ -75,6 +76,10 @@ class CountryList extends Component {
           data-country-code={ country.iso2 }
           onMouseOver={ this.props.isMobile ? null : this.handleMouseOver }
           onClick={ partial(this.setFlag, country.iso2) }
+          role="option"
+          aria-selected={ isSelected }
+          id={ this.props.getItemId(actualIndex) }
+          tabIndex="-1"
         >
           <div
             ref={ (selectedFlag) => { this.selectedFlag = selectedFlag; } }
@@ -86,7 +91,7 @@ class CountryList extends Component {
             />
           </div>
 
-          <span className="country-name">{ country.name }</span>
+          <span className="country-name" lang="en">{ country.name }</span>
           <span className="dial-code">+{ country.dialCode }</span>
         </li>
       );
@@ -125,6 +130,8 @@ class CountryList extends Component {
       <ul
         ref={ (listElement) => { this.listElement = listElement; } }
         className={ className }
+        id={ this.props.countryListId }
+        role="listbox"
       >
         { preferredOptions }
         { divider }
@@ -144,6 +151,9 @@ CountryList.propTypes = {
   changeHighlightCountry: PropTypes.func,
   showDropdown: PropTypes.bool,
   isMobile: PropTypes.bool,
+  selectedCountryCode: PropTypes.string.isRequired,
+  countryListId: PropTypes.string.isRequired,
+  getItemId: PropTypes.func.isRequired,
 };
 
 export default CountryList;

src/components/FlagDropDown.js

@@ -5,6 +5,8 @@ import CountryList from './CountryList';
 import RootModal from './RootModal';
 
 class FlagDropDown extends Component {
+  getItemId = (id) => `intl-tel-item-${this.props.uniqueId}-${id}`
+
   render() {
     const flagClassObj = {
       'iti-flag': true,
@@ -35,6 +37,8 @@ class FlagDropDown extends Component {
 
     let genCountryList = () => '';
 
+    const countryListId = `intl-tel-countries-list-${this.props.uniqueId}`;
+
     if (this.props.dropdownContainer) {
       if (this.props.showDropdown) {
         genCountryList = () =>
@@ -51,6 +55,9 @@ class FlagDropDown extends Component {
               preferredCountries={ this.props.preferredCountries }
               highlightedCountry={ this.props.highlightedCountry }
               changeHighlightCountry={ this.props.changeHighlightCountry }
+              selectedCountryCode={ this.props.countryCode }
+              countryListId={ countryListId }
+              getItemId={ this.getItemId }
             />
           </RootModal>;
       }
@@ -68,6 +75,9 @@ class FlagDropDown extends Component {
           preferredCountries={ this.props.preferredCountries }
           highlightedCountry={ this.props.highlightedCountry }
           changeHighlightCountry={ this.props.changeHighlightCountry }
+          selectedCountryCode={ this.props.countryCode }
+          countryListId={ countryListId }
+          getItemId={ this.getItemId }
         />;
     }
 
@@ -77,11 +87,17 @@ class FlagDropDown extends Component {
         className="flag-container"
       >
         <div
+          { ...this.props.flagDropdownProps }
           className="selected-flag"
           tabIndex={ this.props.allowDropdown ? '0' : '' }
           onClick={ this.props.clickSelectedFlag }
           onKeyDown={ this.props.handleSelectedFlagKeydown }
           title={ this.props.titleTip }
+          aria-controls={ countryListId }
+          aria-owns={ countryListId }
+          aria-autocomplete="none"
+          aria-activedescendant={ this.getItemId(this.props.highlightedCountry) }
+          aria-expanded={ this.props.showDropdown }
         >
           <div className={ flagClass } />
           { genSelectedDialCode() }
@@ -112,6 +128,8 @@ FlagDropDown.propTypes = {
   changeHighlightCountry: PropTypes.func,
   titleTip: PropTypes.string,
   refCallback: PropTypes.func.isRequired,
+  uniqueId: PropTypes.string.isRequired,
+  flagDropdownProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
 export default FlagDropDown;

src/components/IntlTelInputApp.js

@@ -100,6 +100,8 @@ class IntlTelInputApp extends Component {
     this.handleInputChange = this.handleInputChange.bind(this);
     this.changeHighlightCountry = this.changeHighlightCountry.bind(this);
     this.formatNumber = this.formatNumber.bind(this);
+    // using a unique Id not to interfere with other instances of the tel input
+    this.uniqueId = Math.random().toString(36).substring(2);
   }
 
   componentDidMount() {
@@ -1151,6 +1153,8 @@ class IntlTelInputApp extends Component {
           preferredCountries={ this.preferredCountries }
           highlightedCountry={ this.state.highlightedCountry }
           titleTip={ titleTip }
+          flagDropdownProps={ this.props.flagDropdownProps }
+          uniqueId={ this.uniqueId }
         />
         <TelInput
           refCallback={ this.setTelRef }
@@ -1210,6 +1214,7 @@ IntlTelInputApp.propTypes = {
   style: StylePropTypes,
   useMobileFullscreenDropdown: PropTypes.bool,
   telInputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  flagDropdownProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   format: PropTypes.bool,
 };
 
@@ -1261,6 +1266,8 @@ IntlTelInputApp.defaultProps = {
   autoComplete: 'off',
   // pass through arbitrary props to the tel input element
   telInputProps: {},
+  // pass through arbitrary props to the flag dropdown element
+  flagDropdownProps: {},
   // always format the number
   format: false,
 };

src/styles/intlTelInput.scss

@@ -77,7 +77,7 @@ $mobilePopupMargin: 30px;
     // full height
     top: 0;
     bottom: 0;
-    right: 0;
+    left: 0;
     // prevent the highlighted child from overlapping the input border
     padding: $borderWidth;
   }