Comfy-Org / Comfy-Org/ComfyUI_frontend
fix(a11y): add keyboard/focus accessibility to hover-driven popover and row actions in queue overlay
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Summary
The hover-driven job details popover and row action buttons (View / Cancel / Delete / More) in the queue overlay are currently only accessible via mouse hover, making them unreachable for keyboard-only users.
This issue was identified during review of PR #9549 (fix: restore queue job details popover). The work should be addressed holistically across both affected components.
## Affected Components
- `src/components/queue/job/JobAssetsList.vue` — introduced in #9549
- `src/components/queue/job/QueueJobItem.vue` — existing component with the same gap
## What Needs to Be Done
- Make each job row container focusable (`tabindex="0"`) and wire `@focus`/`@blur` handlers that call the same reveal/hide logic used by `onJobEnter`/`onJobLeave`
- Add `@keydown` handler to open the popover on Enter/Space and close on Escape
- Set `aria-expanded` and `aria-haspopup` on the control that triggers the teleported details popover
- Ensure each action button (View, Cancel, Delete, More) is a real `` with visible focus styles and is reachable in tab order when the row is focused
- Ensure the teleported popover traps or returns focus appropriately so keyboard users can navigate into its content
## References
- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9549
- Review comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9549#discussion_r2900966980
- Requested by: @christian-byrne
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9942-fix-a11y-add-keyboard-focus-accessibility-to-hover-driven-popover-and-row-actions-in-3246d73d365081c2ac1ee0e9671dc8ff) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.