feat: Add aria-label for the country code dropdown (#519)

Author: elmoors

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tel-input",
-  "version": "9.5.0",
+  "version": "9.5.1",
   "description": "International Telephone Input with Vue",
   "author": "Steven Dao <iamstevendao@gmail.com>",
   "license": "MIT",
@@ -57,4 +57,4 @@
     "input",
     "international phone"
   ]
-}
+}

src/components/vue-tel-input.vue

@@ -2,7 +2,7 @@
   <div ref="refRoot"
        :class="['vue-tel-input', styleClasses, { disabled }]">
     <div v-click-outside="clickedOutside"
-         aria-label="Country Code Selector"
+         :aria-label="dropdownOptions.ariaLabel"
          aria-haspopup="listbox"
          :aria-expanded="data.open"
          role="button"

src/types/index.ts

@@ -26,6 +26,7 @@ export type PhoneMeta = {
 };
 
 export interface DropdownOptions {
+  ariaLabel?: string
   disabled?: boolean
   showDialCodeInList?: boolean
   showDialCodeInSelection?: boolean

src/utils.ts

@@ -80,6 +80,13 @@ export const allProps = [
     description: 'Options for dropdown, see below',
     inDemo: false,
   },
+  {
+    name: 'dropdownOptions.ariaLabel',
+    default: 'Country Code Selector',
+    type: String,
+    description: 'Aria label for the country code selector dropdown',
+    inDemo: false,
+  },
   {
     name: 'dropdownOptions.disabled',
     default: false,