Improve beta menu nav accessibility (#762)

* Add ARIA labels to beta menu btns without text

* Adjust test locator
This commit is contained in:
bymyself
2024-09-08 17:49:43 -07:00
committed by GitHub
parent 616e295262
commit 21c3883cc7
4 changed files with 28 additions and 5 deletions

View File

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

View File

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

View File

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