From 21c3883cc7aafb1fcb1ba0e06e9a23e9c89b4b24 Mon Sep 17 00:00:00 2001
From: bymyself <abolkonsky.rem@gmail.com>
Date: Sun, 8 Sep 2024 17:49:43 -0700
Subject: [PATCH] Improve beta menu nav accessibility (#762)

* Add ARIA labels to beta menu btns without text

* Adjust test locator
---
 browser_tests/menu.spec.ts               |  8 ++++++--
 src/scripts/ui/components/button.ts      |  3 +++
 src/scripts/ui/components/splitButton.ts | 17 +++++++++++++++--
 src/scripts/ui/menu/workflows.ts         |  5 ++++-
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/browser_tests/menu.spec.ts b/browser_tests/menu.spec.ts
index 0b0fd188c..088cb1615 100644
--- a/browser_tests/menu.spec.ts
+++ b/browser_tests/menu.spec.ts
@@ -171,7 +171,9 @@ test.describe('Menu', () => {
       const tab = comfyPage.menu.nodeLibraryTab
 
       await tab.getFolder('foo').click({ button: 'right' })
-      await comfyPage.page.getByLabel('Rename').click()
+      await comfyPage.page
+        .locator('.p-contextmenu-item-label:has-text("Rename")')
+        .click()
       await comfyPage.page.keyboard.insertText('bar')
       await comfyPage.page.keyboard.press('Enter')
 
@@ -291,7 +293,9 @@ test.describe('Menu', () => {
       })
       const tab = comfyPage.menu.nodeLibraryTab
       await tab.getFolder('foo').click({ button: 'right' })
-      await comfyPage.page.getByLabel('Rename').click()
+      await comfyPage.page
+        .locator('.p-contextmenu-item-label:has-text("Rename")')
+        .click()
       await comfyPage.page.keyboard.insertText('bar')
       await comfyPage.page.keyboard.press('Enter')
       await comfyPage.nextFrame()
diff --git a/src/scripts/ui/components/button.ts b/src/scripts/ui/components/button.ts
index 52158234d..657c2353f 100644
--- a/src/scripts/ui/components/button.ts
+++ b/src/scripts/ui/components/button.ts
@@ -102,6 +102,9 @@ export class ComfyButton implements ComfyComponent<HTMLElement> {
         this.element.removeAttribute('title')
       }
     })
+    if (tooltip !== undefined) {
+      this.element.setAttribute('aria-label', tooltip)
+    }
     this.classList = prop(this, 'classList', classList, this.updateClasses)
     this.hidden = prop(this, 'hidden', false, this.updateClasses)
     this.enabled = prop(this, 'enabled', enabled, () => {
diff --git a/src/scripts/ui/components/splitButton.ts b/src/scripts/ui/components/splitButton.ts
index 9b5bfbd5e..833772305 100644
--- a/src/scripts/ui/components/splitButton.ts
+++ b/src/scripts/ui/components/splitButton.ts
@@ -29,8 +29,21 @@ export class ComfySplitButton {
     this.element = $el(
       'div.comfyui-split-button' + (mode === 'hover' ? '.hover' : ''),
       [
-        $el('div.comfyui-split-primary', primary.element),
-        $el('div.comfyui-split-arrow', this.arrow.element)
+        $el(
+          'div.comfyui-split-primary',
+          {
+            ariaLabel: 'Queue current workflow'
+          },
+          primary.element
+        ),
+        $el(
+          'div.comfyui-split-arrow',
+          {
+            ariaLabel: 'Open extra opens',
+            ariaHasPopup: 'true'
+          },
+          this.arrow.element
+        )
       ]
     )
     this.popup = new ComfyPopup({
diff --git a/src/scripts/ui/menu/workflows.ts b/src/scripts/ui/menu/workflows.ts
index 09f2c7899..650c586d9 100644
--- a/src/scripts/ui/menu/workflows.ts
+++ b/src/scripts/ui/menu/workflows.ts
@@ -47,7 +47,8 @@ export class ComfyWorkflowsMenu {
         this.buttonProgress
       ]),
       icon: 'chevron-down',
-      classList
+      classList,
+      tooltip: 'Click to open workflows menu'
     })
 
     this.element.append(this.button.element)
@@ -85,6 +86,7 @@ export class ComfyWorkflowsMenu {
     const active = this.app.workflowManager.activeWorkflow
     this.button.tooltip = active.path
     this.workflowLabel.textContent = active.name
+    this.workflowLabel.ariaLabel = `Active workflow: ${active.name}`
     this.unsaved = active.unsaved
 
     if (this.#first) {
@@ -523,6 +525,7 @@ export class ComfyWorkflowsContent {
           $el('i.mdi.mdi-18px.mdi-magnify'),
           $el('input', {
             placeholder: 'Search',
+            role: 'search',
             value: this.filterText ?? '',
             oninput: (e: InputEvent) => {
               this.filterText = e.target['value']?.trim()