From 04974213497293aef3c1e7aa907880b74a9a79f8 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Sun, 12 Oct 2025 17:44:03 -0700
Subject: [PATCH] add aria labels on vue node widgets (#6032)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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                                   | 6 ++++++
 .../vueNodes/widgets/components/WidgetButton.vue           | 7 ++++++-
 .../extensions/vueNodes/widgets/components/WidgetChart.vue | 7 ++++++-
 .../vueNodes/widgets/components/WidgetColorPicker.vue      | 1 +
 .../vueNodes/widgets/components/WidgetFileUpload.vue       | 4 ++++
 .../widgets/components/WidgetInputNumberSlider.vue         | 2 ++
 .../vueNodes/widgets/components/WidgetInputText.vue        | 1 +
 .../vueNodes/widgets/components/WidgetMultiSelect.vue      | 1 +
 .../vueNodes/widgets/components/WidgetSelectDefault.vue    | 1 +
 .../vueNodes/widgets/components/WidgetTextarea.vue         | 1 +
 .../vueNodes/widgets/components/WidgetToggleSwitch.vue     | 1 +
 .../vueNodes/widgets/components/WidgetTreeSelect.vue       | 1 +
 12 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 11d915f2fb..0407266dfd 100644
--- a/src/locales/en/main.json
+++ b/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",
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
index 7a0ce4ff50..56666f8336 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
+++ b/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>
 
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
index 77ec2fc870..afa290e48d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
+++ b/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>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
index 1e29b23aa9..333966996c 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
+++ b/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'
         }"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
index 65bf2849f9..1dc890eded 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
+++ b/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"
   />
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
index 70ced5d461..100789c2b6 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
+++ b/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"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
index a7f43cd6f1..882ce24745 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
+++ b/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"
     />
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
index 9bec519389..b9d9876a1c 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
+++ b/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="{
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
index 76b23eeaf9..20a7f0f6dc 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
+++ b/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'
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
index 510dead1fa..a501b27e62 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
+++ b/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"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
index 9232ccad09..3b857688b5 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
+++ b/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>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
index 5dde88f35a..f1b570994a 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
+++ b/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"
     />