Improve beta menu nav accessibility (#762)

* Add ARIA labels to beta menu btns without text

* Adjust test locator

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()

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, () => {

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(
-        $el('div.comfyui-split-arrow', this.arrow.element)
+          '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({

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()