Make country code button a combobox

This is a fix for #2 The country code button should still have role="combobox". This role communicates that the component will open a listbox. This is the case of a Select-Only Combobox https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
salemove · Nov 11, 2022 · 03ed541 · 03ed541
1 parent 37e921d
commit 03ed541
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 5 deletions.
diff --git a/dist/main.js b/dist/main.js
diff --git a/example/example.js b/example/example.js
diff --git a/example/main.js b/example/main.js
diff --git a/src/components/CountryList.js b/src/components/CountryList.js
@@ -132,6 +132,7 @@ class CountryList extends Component {
         className={ className }
         id={ this.props.countryListId }
         role="listbox"
+        tabIndex="-1"
       >
         { preferredOptions }
         { divider }

diff --git a/src/components/FlagDropDown.js b/src/components/FlagDropDown.js
@@ -93,11 +93,11 @@ class FlagDropDown extends Component {
           onClick={ this.props.clickSelectedFlag }
           onKeyDown={ this.props.handleSelectedFlagKeydown }
           title={ this.props.titleTip }
+          role="combobox"
           aria-controls={ countryListId }
-          aria-owns={ countryListId }
-          aria-autocomplete="none"
           aria-activedescendant={ this.getItemId(this.props.highlightedCountry) }
           aria-expanded={ this.props.showDropdown }
+          aria-haspopup="listbox"
         >
           <div className={ flagClass } />
           { genSelectedDialCode() }