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 Fix broken tests
salemove · Nov 11, 2022 · 00da39b · 00da39b
1 parent 37e921d
commit 00da39b
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 9 deletions.
diff --git a/__tests__/FlagDropDown.test.js b/__tests__/FlagDropDown.test.js
@@ -117,13 +117,13 @@ describe('FlagDropDown', function () { // eslint-disable-line func-names
     const flagComponent = subject.find(FlagDropDown);
 
     const result = [{
-      name: 'South Korea (대한민국)',
+      name: 'South Korea',
       iso2: 'kr',
       dialCode: '82',
       priority: 0,
       areaCodes: null,
     }, {
-      name: 'Taiwan (台灣)',
+      name: 'Taiwan',
       iso2: 'tw',
       dialCode: '886',
       priority: 0,
@@ -456,7 +456,7 @@ describe('FlagDropDown', function () { // eslint-disable-line func-names
 
     expect(expected).toEqual({
       currentNumber: '',
-      name: 'Japan (日本)',
+      name: 'Japan',
       iso2: 'jp',
       dialCode: '81',
       priority: 0,

diff --git a/__tests__/utils.test.js b/__tests__/utils.test.js
@@ -110,7 +110,7 @@ describe('utils', () => {
 
   it('getCountryData', () => {
     const result = {
-      name: 'Taiwan (台灣)',
+      name: 'Taiwan',
       iso2: 'tw',
       dialCode: '886',
       priority: 0,

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" // eslint-disable-line
         >
           <div className={ flagClass } />
           { genSelectedDialCode() }