add aria labels on vue node widgets (#6032)

## Summary

Adds aria labels to buttons and widgets without pre-existing text
labels.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6032-add-aria-labels-on-vue-node-widgets-28a6d73d36508198a1c0ef7098ad24e8)
by [Unito](https://www.unito.io)

src/locales/en/main.json

@@ -9,8 +9,14 @@
     "downloadImage": "Download image",
     "downloadVideo": "Download video",
     "editOrMaskImage": "Edit or mask image",
+    "editImage": "Edit image",
+    "deleteImage": "Delete image",
+    "deleteAudioFile": "Delete audio file",
     "removeImage": "Remove image",
     "removeVideo": "Remove video",
+    "chart": "Chart",
+    "chartLowercase": "chart",
+    "file": "file",
     "viewImageOfTotal": "View image {index} of {total}",
     "viewVideoOfTotal": "View video {index} of {total}",
     "imagePreview": "Image preview - Use arrow keys to navigate between images",

src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue

@@ -3,7 +3,12 @@
     <label v-if="widget.name" class="text-sm opacity-80">{{
       widget.name
     }}</label>
-    <Button v-bind="filteredProps" size="small" @click="handleClick" />
+    <Button
+      v-bind="filteredProps"
+      :aria-label="widget.name || widget.label"
+      size="small"
+      @click="handleClick"
+    />
   </div>
 </template>
 

src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue

@@ -3,7 +3,12 @@
     <div
       class="max-h-[48rem] rounded border border-gray-300 p-4 dark-theme:border-gray-600"
     >
-      <Chart :type="chartType" :data="chartData" :options="chartOptions" />
+      <Chart
+        :type="chartType"
+        :data="chartData"
+        :options="chartOptions"
+        :aria-label="`${widget.name || $t('g.chart')} - ${chartType} ${$t('g.chartLowercase')}`"
+      />
     </div>
   </div>
 </template>

src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue

@@ -10,6 +10,7 @@
         v-model="localValue"
         v-bind="filteredProps"
         class="h-4 w-8 overflow-hidden !rounded-full border-none"
+        :aria-label="widget.name"
         :pt="{
           preview: '!w-full !h-full !border-none'
         }"

src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue

@@ -50,6 +50,7 @@
       >
         <!-- Edit button -->
         <button
+          :aria-label="$t('g.editImage')"
           class="flex h-6 w-6 items-center justify-center rounded border-none transition-all duration-150 focus:outline-none"
           style="background-color: #262729"
           @click="handleEdit"
@@ -58,6 +59,7 @@
         </button>
         <!-- Delete button -->
         <button
+          :aria-label="$t('g.deleteImage')"
           class="flex h-6 w-6 items-center justify-center rounded border-none transition-all duration-150 focus:outline-none"
           style="background-color: #262729"
           @click="clearFile"
@@ -128,6 +130,7 @@
         <div class="flex gap-1">
           <!-- Delete button -->
           <button
+            :aria-label="$t('g.deleteAudioFile')"
             class="flex h-8 w-8 items-center justify-center rounded border-none transition-all duration-150 hover:bg-[#262729] focus:outline-none"
             @click="clearFile"
           >
@@ -168,6 +171,7 @@
     type="file"
     class="hidden"
     :accept="widget.options?.accept"
+    :aria-label="`${$t('g.upload')} ${widget.name || $t('g.file')}`"
     :multiple="false"
     @change="handleFileChange"
   />

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue

@@ -10,6 +10,7 @@
         v-bind="filteredProps"
         class="flex-grow text-xs"
         :step="stepValue"
+        :aria-label="widget.name"
         @update:model-value="updateLocalValue"
       />
       <InputNumber
@@ -19,6 +20,7 @@
         :step="stepValue"
         :min-fraction-digits="precision"
         :max-fraction-digits="precision"
+        :aria-label="widget.name"
         size="small"
         pt:pc-input-text:root="min-w-full bg-transparent border-none text-center"
         class="w-16"

src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue

@@ -4,6 +4,7 @@
       v-model="localValue"
       v-bind="filteredProps"
       :class="cn(WidgetInputBaseClass, 'w-full text-xs py-2 px-4')"
+      :aria-label="widget.name"
       size="small"
       @update:model-value="onChange"
     />

src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue

@@ -5,6 +5,7 @@
       :options="multiSelectOptions"
       v-bind="combinedProps"
       class="w-full text-xs"
+      :aria-label="widget.name"
       size="small"
       display="chip"
       :pt="{

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue

@@ -5,6 +5,7 @@
       :options="selectOptions"
       v-bind="combinedProps"
       :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
+      :aria-label="widget.name"
       size="small"
       :pt="{
         option: 'text-xs'

src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue

@@ -5,6 +5,7 @@
       v-bind="filteredProps"
       :class="cn(WidgetInputBaseClass, 'w-full text-xs lod-toggle')"
       :placeholder="placeholder || widget.name || ''"
+      :aria-label="widget.name"
       size="small"
       rows="3"
       data-capture-wheel="true"

src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue

@@ -3,6 +3,7 @@
     <ToggleSwitch
       v-model="localValue"
       v-bind="filteredProps"
+      :aria-label="widget.name"
       @update:model-value="onChange"
     />
   </WidgetLayoutField>

src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue

@@ -4,6 +4,7 @@
       v-model="localValue"
       v-bind="combinedProps"
       class="w-full text-xs"
+      :aria-label="widget.name"
       size="small"
       @update:model-value="onChange"
     />