add aria labels on vue node widgets (2/2) (#6037)

## Summary

Continuation of https://github.com/Comfy-Org/ComfyUI_frontend/pull/6032

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

src/locales/en/main.json

@@ -17,6 +17,11 @@
     "chart": "Chart",
     "chartLowercase": "chart",
     "file": "file",
+    "selectedFile": "Selected file",
+    "none": "None",
+    "markdown": "markdown",
+    "content": "content",
+    "audioProgress": "Audio progress",
     "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/WidgetFileUpload.vue

@@ -20,6 +20,7 @@
           :model-value="selectedFile?.name"
           :options="[selectedFile?.name || '']"
           :disabled="true"
+          :aria-label="`${$t('g.selectedFile')}: ${selectedFile?.name || $t('g.none')}`"
           v-bind="transformCompatProps"
           class="max-w-[20em] min-w-[8em] text-xs"
           size="small"
@@ -89,6 +90,7 @@
           :model-value="selectedFile?.name"
           :options="[selectedFile?.name || '']"
           :disabled="true"
+          :aria-label="`${$t('g.selectedFile')}: ${selectedFile?.name || $t('g.none')}`"
           v-bind="transformCompatProps"
           class="max-w-[20em] min-w-[8em] text-xs"
           size="small"

src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts

@@ -3,7 +3,9 @@ import PrimeVue from 'primevue/config'
 import Textarea from 'primevue/textarea'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
 
+import enMessages from '@/locales/en/main.json'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetMarkdown from './WidgetMarkdown.vue'
@@ -39,9 +41,19 @@ describe('WidgetMarkdown Dual Mode Display', () => {
     modelValue: string,
     readonly = false
   ) => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: {
+        en: {
+          ...enMessages
+        }
+      }
+    })
+
     return mount(WidgetMarkdown, {
       global: {
-        plugins: [PrimeVue],
+        plugins: [PrimeVue, i18n],
         components: { Textarea }
       },
       props: {

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

@@ -15,6 +15,7 @@
       v-show="isEditing"
       ref="textareaRef"
       v-model="localValue"
+      :aria-label="`${$t('g.edit')} ${widget.name || $t('g.markdown')} ${$t('g.content')}`"
       class="absolute inset-0 min-h-[60px] w-full resize-none"
       :pt="{
         root: {

src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue

@@ -59,6 +59,7 @@
           min="0"
           max="100"
           step="0.1"
+          :aria-label="$t('g.audioProgress')"
           class="absolute inset-0 w-full cursor-pointer opacity-0"
           @input="handleSeek"
         />