Fix: make country code button a combobox

__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,

__tests__/utils.test.js

@@ -110,7 +110,7 @@ describe('utils', () => {
 
   it('getCountryData', () => {
     const result = {
-      name: 'Taiwan (台灣)',
+      name: 'Taiwan',
       iso2: 'tw',
       dialCode: '886',
       priority: 0,

src/components/CountryList.js

@@ -132,6 +132,7 @@ class CountryList extends Component {
         className={ className }
         id={ this.props.countryListId }
         role="listbox"
+        tabIndex="-1"
       >
         { preferredOptions }
         { divider }

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() }