Add ARIA labels to beta menu btns without text

Author: christian-byrne

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('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({

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