From 972af1977db56a1b4bb9520efd4218d8a35853f2 Mon Sep 17 00:00:00 2001
From: bymyself <abolkonsky.rem@gmail.com>
Date: Sat, 4 Jan 2025 18:30:27 -0700
Subject: [PATCH] Improve menu accessibility (#2163)

---
 src/components/MenuHamburger.vue                  |  2 ++
 src/components/actionbar/BatchCountEdit.vue       |  1 +
 src/components/actionbar/ComfyQueueButton.vue     |  2 ++
 src/components/graph/GraphCanvasMenu.vue          | 10 ++++++++++
 src/components/topbar/BottomPanelToggleButton.vue |  1 +
 src/components/topbar/TopMenubar.vue              |  1 +
 src/components/topbar/WorkflowTabs.vue            |  2 ++
 7 files changed, 19 insertions(+)

diff --git a/src/components/MenuHamburger.vue b/src/components/MenuHamburger.vue
index e9f313ef2..77036864d 100644
--- a/src/components/MenuHamburger.vue
+++ b/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"
   />
diff --git a/src/components/actionbar/BatchCountEdit.vue b/src/components/actionbar/BatchCountEdit.vue
index 797786adb..b46a6ce34 100644
--- a/src/components/actionbar/BatchCountEdit.vue
+++ b/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"
diff --git a/src/components/actionbar/ComfyQueueButton.vue b/src/components/actionbar/ComfyQueueButton.vue
index b6c65d833..415559781 100644
--- a/src/components/actionbar/ComfyQueueButton.vue
+++ b/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>
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index 1b920a276..03d1d7066 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/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"
     />
diff --git a/src/components/topbar/BottomPanelToggleButton.vue b/src/components/topbar/BottomPanelToggleButton.vue
index cfa4ad435..605f71884 100644
--- a/src/components/topbar/BottomPanelToggleButton.vue
+++ b/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 }"
   >
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index a7001c1e4..3b46fa63e 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/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"
       />
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index f6d361621..c96d8fba1 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/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" />