mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-07 22:20:03 +00:00
Improve beta menu nav accessibility (#762)
* Add ARIA labels to beta menu btns without text * Adjust test locator
This commit is contained in:
@@ -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, () => {
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user