Give selected flag a button role. Fixes #1549

jackocnr · Mar 20, 2024 · 0a5ffe6 · 0a5ffe6
1 parent e35b9b3
commit 0a5ffe6
Show file tree

Hide file tree

Showing 11 changed files with 13 additions and 10 deletions.
diff --git a/build/js/intlTelInput-jquery.js b/build/js/intlTelInput-jquery.js
@@ -494,6 +494,7 @@
                     this.selectedFlag = this._createEl("div", _objectSpread({
                         "class": "iti__selected-flag"
                     }, allowDropdown && _objectSpread({
+                        role: "button",
                         "aria-expanded": "false",
                         "aria-label": this.options.i18n.selectedCountryAriaLabel || "Selected country",
                         "aria-haspopup": countrySearch ? "true" : "listbox",

diff --git a/build/js/intlTelInput-jquery.min.js b/build/js/intlTelInput-jquery.min.js
diff --git a/build/js/intlTelInput.js b/build/js/intlTelInput.js
@@ -489,6 +489,7 @@
                         this.selectedFlag = this._createEl("div", _objectSpread({
                             "class": "iti__selected-flag"
                         }, allowDropdown && _objectSpread({
+                            role: "button",
                             "aria-expanded": "false",
                             "aria-label": this.options.i18n.selectedCountryAriaLabel || "Selected country",
                             "aria-haspopup": countrySearch ? "true" : "listbox",

diff --git a/build/js/intlTelInput.min.js b/build/js/intlTelInput.min.js
diff --git a/react/build/IntlTelInput.cjs.js b/react/build/IntlTelInput.cjs.js
diff --git a/react/build/IntlTelInput.cjs.js.map b/react/build/IntlTelInput.cjs.js.map
diff --git a/react/build/IntlTelInput.esm.js b/react/build/IntlTelInput.esm.js
diff --git a/react/build/IntlTelInput.esm.js.map b/react/build/IntlTelInput.esm.js.map
diff --git a/react/demo/simple-bundle.js b/react/demo/simple-bundle.js
@@ -24516,7 +24516,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           var u = this.options, t = u.allowDropdown, e = u.showSelectedDialCode, n = u.showFlags, r = u.containerClass, a = u.hiddenInput, o = u.dropdownContainer, s = u.fixDropdownWidth, d = u.useFullscreenPopup, h = u.countrySearch, A = u.i18n, c = "iti";
           t && (c += " iti--allow-dropdown"), e && (c += " iti--show-selected-dial-code"), n && (c += " iti--show-flags"), r && (c += " ".concat(r)), d || (c += " iti--inline-dropdown");
           var B = this._createEl("div", { class: c });
-          if (this.telInput.parentNode.insertBefore(B, this.telInput), (n || e) && (this.flagsContainer = this._createEl("div", { class: "iti__flag-container" }, B), this.selectedFlag = this._createEl("div", I({ class: "iti__selected-flag" }, t && I({ "aria-expanded": "false", "aria-label": this.options.i18n.selectedCountryAriaLabel || "Selected country", "aria-haspopup": h ? "true" : "listbox", "aria-controls": h ? "iti-".concat(this.id, "__dropdown-content") : "iti-".concat(this.id, "__country-listbox") }, h || { role: "combobox" })), this.flagsContainer), this.selectedFlagInner = this._createEl("div", null, this.selectedFlag), this.selectedFlagA11yText = this._createEl("span", { class: "iti__a11y-text" }, this.selectedFlagInner)), B.appendChild(this.telInput), this.selectedFlag && this.telInput.disabled && this.selectedFlag.setAttribute("aria-disabled", "true"), e && (this.selectedDialCode = this._createEl("div", { class: "iti__selected-dial-code" }, this.selectedFlag)), t) {
+          if (this.telInput.parentNode.insertBefore(B, this.telInput), (n || e) && (this.flagsContainer = this._createEl("div", { class: "iti__flag-container" }, B), this.selectedFlag = this._createEl("div", I({ class: "iti__selected-flag" }, t && I({ role: "button", "aria-expanded": "false", "aria-label": this.options.i18n.selectedCountryAriaLabel || "Selected country", "aria-haspopup": h ? "true" : "listbox", "aria-controls": h ? "iti-".concat(this.id, "__dropdown-content") : "iti-".concat(this.id, "__country-listbox") }, h || { role: "combobox" })), this.flagsContainer), this.selectedFlagInner = this._createEl("div", null, this.selectedFlag), this.selectedFlagA11yText = this._createEl("span", { class: "iti__a11y-text" }, this.selectedFlagInner)), B.appendChild(this.telInput), this.selectedFlag && this.telInput.disabled && this.selectedFlag.setAttribute("aria-disabled", "true"), e && (this.selectedDialCode = this._createEl("div", { class: "iti__selected-dial-code" }, this.selectedFlag)), t) {
             this.telInput.disabled || this.selectedFlag.setAttribute("tabindex", "0"), this.dropdownArrow = this._createEl("div", { class: "iti__arrow", "aria-hidden": "true" }, this.selectedFlag);
             var w = s ? "" : "iti--flexible-dropdown-width";
             if (this.dropdownContent = this._createEl("div", { id: "iti-".concat(this.id, "__dropdown-content"), class: "iti__dropdown-content iti__hide ".concat(w) }), h && (this.searchInput = this._createEl("input", { type: "text", class: "iti__search-input", placeholder: A.searchPlaceholder || "Search", role: "combobox", "aria-expanded": "true", "aria-label": A.searchPlaceholder || "Search", "aria-controls": "iti-".concat(this.id, "__country-listbox"), "aria-autocomplete": "list", autocomplete: "off" }, this.dropdownContent), this.searchResultsA11yText = this._createEl("span", { class: "iti__a11y-text" }, this.dropdownContent)), this.countryList = this._createEl("ul", { class: "iti__country-list", id: "iti-".concat(this.id, "__country-listbox"), role: "listbox", "aria-label": A.countryListAriaLabel || "List of countries" }, this.dropdownContent), this.preferredCountries.length && !h && (this._appendListItems(this.preferredCountries, "iti__preferred", true), this._createEl("li", { class: "iti__divider", "aria-hidden": "true" }, this.countryList)), this._appendListItems(this.countries, "iti__standard"), h && this._updateSearchResultsText(), o) {

diff --git a/react/demo/validation-bundle.js b/react/demo/validation-bundle.js
@@ -24516,7 +24516,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           var u = this.options, t = u.allowDropdown, e = u.showSelectedDialCode, n = u.showFlags, r = u.containerClass, a = u.hiddenInput, o = u.dropdownContainer, s = u.fixDropdownWidth, d = u.useFullscreenPopup, h = u.countrySearch, A = u.i18n, c = "iti";
           t && (c += " iti--allow-dropdown"), e && (c += " iti--show-selected-dial-code"), n && (c += " iti--show-flags"), r && (c += " ".concat(r)), d || (c += " iti--inline-dropdown");
           var B = this._createEl("div", { class: c });
-          if (this.telInput.parentNode.insertBefore(B, this.telInput), (n || e) && (this.flagsContainer = this._createEl("div", { class: "iti__flag-container" }, B), this.selectedFlag = this._createEl("div", I({ class: "iti__selected-flag" }, t && I({ "aria-expanded": "false", "aria-label": this.options.i18n.selectedCountryAriaLabel || "Selected country", "aria-haspopup": h ? "true" : "listbox", "aria-controls": h ? "iti-".concat(this.id, "__dropdown-content") : "iti-".concat(this.id, "__country-listbox") }, h || { role: "combobox" })), this.flagsContainer), this.selectedFlagInner = this._createEl("div", null, this.selectedFlag), this.selectedFlagA11yText = this._createEl("span", { class: "iti__a11y-text" }, this.selectedFlagInner)), B.appendChild(this.telInput), this.selectedFlag && this.telInput.disabled && this.selectedFlag.setAttribute("aria-disabled", "true"), e && (this.selectedDialCode = this._createEl("div", { class: "iti__selected-dial-code" }, this.selectedFlag)), t) {
+          if (this.telInput.parentNode.insertBefore(B, this.telInput), (n || e) && (this.flagsContainer = this._createEl("div", { class: "iti__flag-container" }, B), this.selectedFlag = this._createEl("div", I({ class: "iti__selected-flag" }, t && I({ role: "button", "aria-expanded": "false", "aria-label": this.options.i18n.selectedCountryAriaLabel || "Selected country", "aria-haspopup": h ? "true" : "listbox", "aria-controls": h ? "iti-".concat(this.id, "__dropdown-content") : "iti-".concat(this.id, "__country-listbox") }, h || { role: "combobox" })), this.flagsContainer), this.selectedFlagInner = this._createEl("div", null, this.selectedFlag), this.selectedFlagA11yText = this._createEl("span", { class: "iti__a11y-text" }, this.selectedFlagInner)), B.appendChild(this.telInput), this.selectedFlag && this.telInput.disabled && this.selectedFlag.setAttribute("aria-disabled", "true"), e && (this.selectedDialCode = this._createEl("div", { class: "iti__selected-dial-code" }, this.selectedFlag)), t) {
             this.telInput.disabled || this.selectedFlag.setAttribute("tabindex", "0"), this.dropdownArrow = this._createEl("div", { class: "iti__arrow", "aria-hidden": "true" }, this.selectedFlag);
             var w = s ? "" : "iti--flexible-dropdown-width";
             if (this.dropdownContent = this._createEl("div", { id: "iti-".concat(this.id, "__dropdown-content"), class: "iti__dropdown-content iti__hide ".concat(w) }), h && (this.searchInput = this._createEl("input", { type: "text", class: "iti__search-input", placeholder: A.searchPlaceholder || "Search", role: "combobox", "aria-expanded": "true", "aria-label": A.searchPlaceholder || "Search", "aria-controls": "iti-".concat(this.id, "__country-listbox"), "aria-autocomplete": "list", autocomplete: "off" }, this.dropdownContent), this.searchResultsA11yText = this._createEl("span", { class: "iti__a11y-text" }, this.dropdownContent)), this.countryList = this._createEl("ul", { class: "iti__country-list", id: "iti-".concat(this.id, "__country-listbox"), role: "listbox", "aria-label": A.countryListAriaLabel || "List of countries" }, this.dropdownContent), this.preferredCountries.length && !h && (this._appendListItems(this.preferredCountries, "iti__preferred", true), this._createEl("li", { class: "iti__divider", "aria-hidden": "true" }, this.countryList)), this._appendListItems(this.countries, "iti__standard"), h && this._updateSearchResultsText(), o) {

diff --git a/src/js/intlTelInput.js b/src/js/intlTelInput.js
@@ -401,6 +401,7 @@ class Iti {
         {
           class: "iti__selected-flag",
           ...(allowDropdown && {
+            role: "button",
             "aria-expanded": "false",
             "aria-label": this.options.i18n.selectedCountryAriaLabel || "Selected country",
             "aria-haspopup": countrySearch ? "true" : "listbox",