fix a11y issues

lyqht · Feb 16, 2024 · a1f4484 · a1f4484
1 parent abd0b72
commit a1f4484
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -3,7 +3,8 @@
   "Default": "Default",
   "Randomize style": "Randomize style",
   "No data!": "No data!",
-  "Change language": "Change language",
+  "Select language": "Select language",
+  "Select preset": "Select preset",
   "GitHub repository for this project": "GitHub repository for this project",
   "Data to encode": "Data to encode",
   "data to encode e.g. a URL or a string": "data to encode e.g. a URL or a string",

diff --git a/src/App.vue b/src/App.vue
@@ -331,7 +331,12 @@ onMounted(() => {
                 />
               </g>
             </svg>
-            <Combobox :items="locales" v-model:value="locale" v-model:open="isLocaleSelectOpen" />
+            <Combobox
+              :items="locales"
+              v-model:value="locale"
+              v-model:open="isLocaleSelectOpen"
+              :button-label="t('Select language')"
+            />
           </div>
         </div>
       </div>
@@ -449,7 +454,7 @@ onMounted(() => {
                 </button>
               </div>
               <div id="export-options" class="pt-4">
-                <p class="pb-2">{{ t('Export as') }}</p>
+                <p class="pb-2 text-zinc-900 dark:text-zinc-100">{{ t('Export as') }}</p>
                 <div class="flex flex-row items-center justify-center gap-2">
                   <button
                     id="download-qr-image-button-png"
@@ -509,12 +514,13 @@ onMounted(() => {
           </div>
           <div id="settings" class="flex w-full grow flex-col items-start gap-8 text-start">
             <div>
-              <label for="preset-selector">{{ t('Preset') }}</label>
+              <label>{{ t('Preset') }}</label>
               <div class="flex flex-row items-center justify-start gap-2">
                 <Combobox
                   :items="allPresetOptions"
                   v-model:value="selectedPresetKey"
                   v-model:open="isPresetSelectOpen"
+                  :button-label="t('Select preset')"
                 />
                 <button
                   class="icon-button"

diff --git a/src/components/ui/Combobox/Combobox.vue b/src/components/ui/Combobox/Combobox.vue
@@ -18,6 +18,7 @@ const value = defineModel<string>('value')
 
 defineProps<{
   items: { value: any; label: string }[]
+  buttonLabel: string
 }>()
 </script>
 
@@ -28,6 +29,7 @@ defineProps<{
         variant="outline"
         role="combobox"
         :aria-expanded="open"
+        :aria-label="buttonLabel"
         class="w-fit justify-between focus-visible:ring-1 bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-900 dark:hover:text-zinc-100"
       >
         {{ value ? items.find((item) => item.value === value)?.label : 'Select item...' }}