The selected country flag should not be a button if allowDropdown is …

…false
jackocnr · Jul 11, 2024 · 6ebbc02 · 6ebbc02
1 parent 91fab06
commit 6ebbc02
Show file tree

Hide file tree

Showing 12 changed files with 216 additions and 156 deletions.
diff --git a/build/js/intlTelInput.js b/build/js/intlTelInput.js
@@ -1699,33 +1699,39 @@ var factoryOutput = (() => {
           { class: "iti__country-container" },
           wrapper
         );
-        this.selectedCountry = createEl(
-          "button",
-          {
-            type: "button",
-            class: "iti__selected-country",
-            ...allowDropdown && {
+        if (allowDropdown) {
+          this.selectedCountry = createEl(
+            "button",
+            {
+              type: "button",
+              class: "iti__selected-country",
               "aria-expanded": "false",
               "aria-label": this.options.i18n.selectedCountryAriaLabel,
               "aria-haspopup": "true",
               "aria-controls": `iti-${this.id}__dropdown-content`,
               "role": "combobox"
-            }
-          },
-          this.countryContainer
-        );
+            },
+            this.countryContainer
+          );
+          if (this.telInput.disabled) {
+            this.selectedCountry.setAttribute("aria-disabled", "true");
+          } else {
+            this.selectedCountry.setAttribute("tabindex", "0");
+          }
+        } else {
+          this.selectedCountry = createEl(
+            "div",
+            { class: "iti__selected-country" },
+            this.countryContainer
+          );
+        }
         const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
         this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
         this.selectedCountryA11yText = createEl(
           "span",
           { class: "iti__a11y-text" },
           this.selectedCountryInner
         );
-        if (this.telInput.disabled) {
-          this.selectedCountry.setAttribute("aria-disabled", "true");
-        } else {
-          this.selectedCountry.setAttribute("tabindex", "0");
-        }
         if (allowDropdown) {
           this.dropdownArrow = createEl(
             "div",

diff --git a/build/js/intlTelInput.min.js b/build/js/intlTelInput.min.js
diff --git a/build/js/intlTelInputWithUtils.js b/build/js/intlTelInputWithUtils.js
@@ -1698,33 +1698,39 @@ var factoryOutput = (() => {
           { class: "iti__country-container" },
           wrapper
         );
-        this.selectedCountry = createEl(
-          "button",
-          {
-            type: "button",
-            class: "iti__selected-country",
-            ...allowDropdown && {
+        if (allowDropdown) {
+          this.selectedCountry = createEl(
+            "button",
+            {
+              type: "button",
+              class: "iti__selected-country",
               "aria-expanded": "false",
               "aria-label": this.options.i18n.selectedCountryAriaLabel,
               "aria-haspopup": "true",
               "aria-controls": `iti-${this.id}__dropdown-content`,
               "role": "combobox"
-            }
-          },
-          this.countryContainer
-        );
+            },
+            this.countryContainer
+          );
+          if (this.telInput.disabled) {
+            this.selectedCountry.setAttribute("aria-disabled", "true");
+          } else {
+            this.selectedCountry.setAttribute("tabindex", "0");
+          }
+        } else {
+          this.selectedCountry = createEl(
+            "div",
+            { class: "iti__selected-country" },
+            this.countryContainer
+          );
+        }
         const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
         this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
         this.selectedCountryA11yText = createEl(
           "span",
           { class: "iti__a11y-text" },
           this.selectedCountryInner
         );
-        if (this.telInput.disabled) {
-          this.selectedCountry.setAttribute("aria-disabled", "true");
-        } else {
-          this.selectedCountry.setAttribute("tabindex", "0");
-        }
         if (allowDropdown) {
           this.dropdownArrow = createEl(
             "div",

diff --git a/build/js/intlTelInputWithUtils.min.js b/build/js/intlTelInputWithUtils.min.js
diff --git a/react/build/IntlTelInput.cjs b/react/build/IntlTelInput.cjs
@@ -1694,33 +1694,39 @@ var Iti = class {
         { class: "iti__country-container" },
         wrapper
       );
-      this.selectedCountry = createEl(
-        "button",
-        {
-          type: "button",
-          class: "iti__selected-country",
-          ...allowDropdown && {
+      if (allowDropdown) {
+        this.selectedCountry = createEl(
+          "button",
+          {
+            type: "button",
+            class: "iti__selected-country",
             "aria-expanded": "false",
             "aria-label": this.options.i18n.selectedCountryAriaLabel,
             "aria-haspopup": "true",
             "aria-controls": `iti-${this.id}__dropdown-content`,
             "role": "combobox"
-          }
-        },
-        this.countryContainer
-      );
+          },
+          this.countryContainer
+        );
+        if (this.telInput.disabled) {
+          this.selectedCountry.setAttribute("aria-disabled", "true");
+        } else {
+          this.selectedCountry.setAttribute("tabindex", "0");
+        }
+      } else {
+        this.selectedCountry = createEl(
+          "div",
+          { class: "iti__selected-country" },
+          this.countryContainer
+        );
+      }
       const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
       this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
       this.selectedCountryA11yText = createEl(
         "span",
         { class: "iti__a11y-text" },
         this.selectedCountryInner
       );
-      if (this.telInput.disabled) {
-        this.selectedCountry.setAttribute("aria-disabled", "true");
-      } else {
-        this.selectedCountry.setAttribute("tabindex", "0");
-      }
       if (allowDropdown) {
         this.dropdownArrow = createEl(
           "div",

diff --git a/react/build/IntlTelInput.js b/react/build/IntlTelInput.js
@@ -1658,33 +1658,39 @@ var Iti = class {
         { class: "iti__country-container" },
         wrapper
       );
-      this.selectedCountry = createEl(
-        "button",
-        {
-          type: "button",
-          class: "iti__selected-country",
-          ...allowDropdown && {
+      if (allowDropdown) {
+        this.selectedCountry = createEl(
+          "button",
+          {
+            type: "button",
+            class: "iti__selected-country",
             "aria-expanded": "false",
             "aria-label": this.options.i18n.selectedCountryAriaLabel,
             "aria-haspopup": "true",
             "aria-controls": `iti-${this.id}__dropdown-content`,
             "role": "combobox"
-          }
-        },
-        this.countryContainer
-      );
+          },
+          this.countryContainer
+        );
+        if (this.telInput.disabled) {
+          this.selectedCountry.setAttribute("aria-disabled", "true");
+        } else {
+          this.selectedCountry.setAttribute("tabindex", "0");
+        }
+      } else {
+        this.selectedCountry = createEl(
+          "div",
+          { class: "iti__selected-country" },
+          this.countryContainer
+        );
+      }
       const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
       this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
       this.selectedCountryA11yText = createEl(
         "span",
         { class: "iti__a11y-text" },
         this.selectedCountryInner
       );
-      if (this.telInput.disabled) {
-        this.selectedCountry.setAttribute("aria-disabled", "true");
-      } else {
-        this.selectedCountry.setAttribute("tabindex", "0");
-      }
       if (allowDropdown) {
         this.dropdownArrow = createEl(
           "div",

diff --git a/react/build/IntlTelInputWithUtils.cjs b/react/build/IntlTelInputWithUtils.cjs
@@ -1694,33 +1694,39 @@ var Iti = class {
         { class: "iti__country-container" },
         wrapper
       );
-      this.selectedCountry = createEl(
-        "button",
-        {
-          type: "button",
-          class: "iti__selected-country",
-          ...allowDropdown && {
+      if (allowDropdown) {
+        this.selectedCountry = createEl(
+          "button",
+          {
+            type: "button",
+            class: "iti__selected-country",
             "aria-expanded": "false",
             "aria-label": this.options.i18n.selectedCountryAriaLabel,
             "aria-haspopup": "true",
             "aria-controls": `iti-${this.id}__dropdown-content`,
             "role": "combobox"
-          }
-        },
-        this.countryContainer
-      );
+          },
+          this.countryContainer
+        );
+        if (this.telInput.disabled) {
+          this.selectedCountry.setAttribute("aria-disabled", "true");
+        } else {
+          this.selectedCountry.setAttribute("tabindex", "0");
+        }
+      } else {
+        this.selectedCountry = createEl(
+          "div",
+          { class: "iti__selected-country" },
+          this.countryContainer
+        );
+      }
       const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
       this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
       this.selectedCountryA11yText = createEl(
         "span",
         { class: "iti__a11y-text" },
         this.selectedCountryInner
       );
-      if (this.telInput.disabled) {
-        this.selectedCountry.setAttribute("aria-disabled", "true");
-      } else {
-        this.selectedCountry.setAttribute("tabindex", "0");
-      }
       if (allowDropdown) {
         this.dropdownArrow = createEl(
           "div",

diff --git a/react/build/IntlTelInputWithUtils.js b/react/build/IntlTelInputWithUtils.js
@@ -1658,33 +1658,39 @@ var Iti = class {
         { class: "iti__country-container" },
         wrapper
       );
-      this.selectedCountry = createEl(
-        "button",
-        {
-          type: "button",
-          class: "iti__selected-country",
-          ...allowDropdown && {
+      if (allowDropdown) {
+        this.selectedCountry = createEl(
+          "button",
+          {
+            type: "button",
+            class: "iti__selected-country",
             "aria-expanded": "false",
             "aria-label": this.options.i18n.selectedCountryAriaLabel,
             "aria-haspopup": "true",
             "aria-controls": `iti-${this.id}__dropdown-content`,
             "role": "combobox"
-          }
-        },
-        this.countryContainer
-      );
+          },
+          this.countryContainer
+        );
+        if (this.telInput.disabled) {
+          this.selectedCountry.setAttribute("aria-disabled", "true");
+        } else {
+          this.selectedCountry.setAttribute("tabindex", "0");
+        }
+      } else {
+        this.selectedCountry = createEl(
+          "div",
+          { class: "iti__selected-country" },
+          this.countryContainer
+        );
+      }
       const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
       this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
       this.selectedCountryA11yText = createEl(
         "span",
         { class: "iti__a11y-text" },
         this.selectedCountryInner
       );
-      if (this.telInput.disabled) {
-        this.selectedCountry.setAttribute("aria-disabled", "true");
-      } else {
-        this.selectedCountry.setAttribute("tabindex", "0");
-      }
       if (allowDropdown) {
         this.dropdownArrow = createEl(
           "div",

diff --git a/react/demo/set-number-bundle.js b/react/demo/set-number-bundle.js
@@ -25187,33 +25187,39 @@
           { class: "iti__country-container" },
           wrapper
         );
-        this.selectedCountry = createEl(
-          "button",
-          {
-            type: "button",
-            class: "iti__selected-country",
-            ...allowDropdown && {
+        if (allowDropdown) {
+          this.selectedCountry = createEl(
+            "button",
+            {
+              type: "button",
+              class: "iti__selected-country",
               "aria-expanded": "false",
               "aria-label": this.options.i18n.selectedCountryAriaLabel,
               "aria-haspopup": "true",
               "aria-controls": `iti-${this.id}__dropdown-content`,
               "role": "combobox"
-            }
-          },
-          this.countryContainer
-        );
+            },
+            this.countryContainer
+          );
+          if (this.telInput.disabled) {
+            this.selectedCountry.setAttribute("aria-disabled", "true");
+          } else {
+            this.selectedCountry.setAttribute("tabindex", "0");
+          }
+        } else {
+          this.selectedCountry = createEl(
+            "div",
+            { class: "iti__selected-country" },
+            this.countryContainer
+          );
+        }
         const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
         this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
         this.selectedCountryA11yText = createEl(
           "span",
           { class: "iti__a11y-text" },
           this.selectedCountryInner
         );
-        if (this.telInput.disabled) {
-          this.selectedCountry.setAttribute("aria-disabled", "true");
-        } else {
-          this.selectedCountry.setAttribute("tabindex", "0");
-        }
         if (allowDropdown) {
           this.dropdownArrow = createEl(
             "div",