Improve menu accessibility (#2163)

src/components/MenuHamburger.vue

@@ -8,6 +8,8 @@
     text
     size="large"
     v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
+    :aria-label="$t('menu.showMenu')"
+    aria-live="assertive"
     @click="exitFocusMode"
     @contextmenu="showNativeMenu"
   />

src/components/actionbar/BatchCountEdit.vue

@@ -3,6 +3,7 @@
     class="batch-count"
     :class="props.class"
     v-tooltip.bottom="$t('menu.batchCount')"
+    :aria-label="$t('menu.batchCount')"
   >
     <InputNumber
       class="w-14"

src/components/actionbar/ComfyQueueButton.vue

@@ -39,6 +39,7 @@
         :severity="executingPrompt ? 'danger' : 'secondary'"
         :disabled="!executingPrompt"
         text
+        :aria-label="$t('menu.interrupt')"
         @click="() => commandStore.execute('Comfy.Interrupt')"
       >
       </Button>
@@ -48,6 +49,7 @@
         :severity="hasPendingTasks ? 'danger' : 'secondary'"
         :disabled="!hasPendingTasks"
         text
+        :aria-label="$t('sideToolbar.queueTab.clearPendingTasks')"
         @click="() => commandStore.execute('Comfy.ClearPendingTasks')"
       />
     </ButtonGroup>

src/components/graph/GraphCanvasMenu.vue

@@ -6,6 +6,7 @@
       severity="secondary"
       icon="pi pi-plus"
       v-tooltip.left="t('graphCanvasMenu.zoomIn')"
+      :aria-label="$t('graphCanvasMenu.zoomIn')"
       @mousedown="repeat('Comfy.Canvas.ZoomIn')"
       @mouseup="stopRepeat"
     />
@@ -13,6 +14,7 @@
       severity="secondary"
       icon="pi pi-minus"
       v-tooltip.left="t('graphCanvasMenu.zoomOut')"
+      :aria-label="$t('graphCanvasMenu.zoomOut')"
       @mousedown="repeat('Comfy.Canvas.ZoomOut')"
       @mouseup="stopRepeat"
     />
@@ -20,6 +22,7 @@
       severity="secondary"
       icon="pi pi-expand"
       v-tooltip.left="t('graphCanvasMenu.fitView')"
+      :aria-label="$t('graphCanvasMenu.fitView')"
       @click="() => commandStore.execute('Comfy.Canvas.FitView')"
     />
     <Button
@@ -30,6 +33,12 @@
             (canvasStore.canvas?.read_only ? 'panMode' : 'selectMode')
         ) + ' (Space)'
       "
+      :aria-label="
+        t(
+          'graphCanvasMenu.' +
+            (canvasStore.canvas?.read_only ? 'panMode' : 'selectMode')
+        )
+      "
       @click="() => commandStore.execute('Comfy.Canvas.ToggleLock')"
     >
       <template #icon>
@@ -43,6 +52,7 @@
       severity="secondary"
       :icon="linkHidden ? 'pi pi-eye-slash' : 'pi pi-eye'"
       v-tooltip.left="t('graphCanvasMenu.toggleLinkVisibility')"
+      :aria-label="$t('graphCanvasMenu.toggleLinkVisibility')"
       @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
       data-testid="toggle-link-visibility-button"
     />

src/components/topbar/BottomPanelToggleButton.vue

@@ -3,6 +3,7 @@
     v-show="bottomPanelStore.bottomPanelTabs.length > 0"
     severity="secondary"
     text
+    :aria-label="$t('menu.toggleBottomPanel')"
     @click="bottomPanelStore.toggleBottomPanel"
     v-tooltip="{ value: $t('menu.toggleBottomPanel'), showDelay: 300 }"
   >

src/components/topbar/TopMenubar.vue

@@ -20,6 +20,7 @@
         severity="secondary"
         text
         v-tooltip="{ value: $t('menu.hideMenu'), showDelay: 300 }"
+        :aria-label="$t('menu.hideMenu')"
         @click="workspaceState.focusMode = true"
         @contextmenu="showNativeMenu"
       />

src/components/topbar/WorkflowTabs.vue

@@ -17,10 +17,12 @@
     </template>
   </SelectButton>
   <Button
+    v-tooltip="{ value: $t('sideToolbar.newBlankWorkflow'), showDelay: 300 }"
     class="new-blank-workflow-button"
     icon="pi pi-plus"
     text
     severity="secondary"
+    :aria-label="$t('sideToolbar.newBlankWorkflow')"
     @click="() => commandStore.execute('Comfy.NewBlankWorkflow')"
   />
   <ContextMenu ref="menu" :model="contextMenuItems" />