[backport cloud/1.41] fix: improve canvas menu keyboard navigation and ARIA accessibility (#10066)

Backport of #9526 to `cloud/1.41`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10066-backport-cloud-1-41-fix-improve-canvas-menu-keyboard-navigation-and-ARIA-accessibilit-3256d73d365081259b03ec81725efd75)
by [Unito](https://www.unito.io)

Co-authored-by: Dante <bunggl@naver.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Comfy Org PR Bot
2026-03-16 22:08:21 +09:00
committed by GitHub
parent 464ec47c5e
commit f9efc35abd
4 changed files with 241 additions and 16 deletions

View File

@@ -10,6 +10,8 @@
></div>
<ButtonGroup
role="toolbar"
:aria-label="t('graphCanvasMenu.canvasToolbar')"
class="absolute right-0 bottom-0 z-1200 flex-row gap-1 border border-interface-stroke bg-comfy-menu-bg p-2"
:style="{
...stringifiedMinimapStyles.buttonGroupStyles
@@ -30,7 +32,7 @@
class="size-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!"
@click="() => commandStore.execute('Comfy.Canvas.FitView')"
>
<i class="icon-[lucide--focus] size-4" />
<i class="icon-[lucide--focus] size-4" aria-hidden="true" />
</Button>
<Button
@@ -44,7 +46,7 @@
>
<span class="inline-flex items-center gap-1 px-2 text-xs">
<span>{{ canvasStore.appScalePercentage }}%</span>
<i class="icon-[lucide--chevron-down] size-4" />
<i class="icon-[lucide--chevron-down] size-4" aria-hidden="true" />
</span>
</Button>
@@ -59,7 +61,7 @@
:class="minimapButtonClass"
@click="onMinimapToggleClick"
>
<i class="icon-[lucide--map] size-4" />
<i class="icon-[lucide--map] size-4" aria-hidden="true" />
</Button>
<Button
@@ -78,7 +80,7 @@
:style="stringifiedMinimapStyles.buttonStyles"
@click="onLinkVisibilityToggleClick"
>
<i class="icon-[lucide--route-off] size-4" />
<i class="icon-[lucide--route-off] size-4" aria-hidden="true" />
</Button>
</ButtonGroup>
</div>