mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-13 00:50:01 +00:00
e973efb44a
## Summary The canvas mode selector popover (Select/Hand mode) uses plain `div` elements for its menu items, making them completely inaccessible to keyboard-only users and screen readers. This PR replaces them with proper semantic HTML and ARIA attributes. ## Problem (AS-IS) As reported in #9519, the canvas mode selector popover has the following accessibility issues: 1. **Menu items are `div` elements** — they cannot receive keyboard focus, so users cannot Tab into the popover or activate items with Enter/Space. Keyboard-only users are completely locked out of switching between Select and Hand (pan) mode via the popover. 2. **No ARIA roles** — screen readers announce the popover content as generic text rather than an interactive menu. Users relying on assistive technology have no way to understand that these are selectable options. 3. **No keyboard navigation within the popover** — even if a user somehow focuses an item, there are no ArrowUp/ArrowDown handlers to move between options, which is the standard interaction pattern for `role="menu"` widgets (WAI-ARIA Menu Pattern). 4. **Decorative icons are not hidden from assistive technology** — icon elements (`<i>` tags) are exposed to screen readers, adding noise to the announcement. 5. **The bottom toolbar (`GraphCanvasMenu`) lacks semantic grouping** — the `ButtonGroup` container has no `role="toolbar"` or `aria-label`, so screen readers cannot convey that these buttons form a related control group. > Note: Pan mode itself already has keyboard shortcuts (`H` for Hand/Lock, `V` for Select/Unlock), but the popover UI that surfaces these options is not keyboard-accessible. ## Solution (TO-BE) 1. **Replace `div` → `button`** for menu items in `CanvasModeSelector` — buttons are natively focusable and activatable via Enter/Space without extra work. 2. **Add `role="menu"` on the container and `role="menuitem"` on each option** — screen readers now announce "Canvas Mode menu" with two menu items. 3. **Add ArrowUp/ArrowDown keyboard navigation** with wrap-around — pressing ArrowDown on "Select" moves focus to "Hand", and vice versa. This follows the WAI-ARIA Menu Pattern. 4. **Add `aria-label` to each menu item and `aria-hidden="true"` to decorative icons** — screen readers announce "Select" / "Hand" clearly without icon noise. 5. **Add `role="toolbar"` with `aria-label="Canvas Toolbar"` to the `ButtonGroup`** — screen readers identify the bottom control bar as a coherent toolbar. ## Changes - **What**: Accessibility improvements to `CanvasModeSelector` popover and `GraphCanvasMenu` toolbar - **Dependencies**: None — only HTML/ARIA attribute changes and two new i18n keys (`canvasMode`, `canvasToolbar`) ## Review Focus - Verify the `button` elements render visually identical to the previous `div` elements (same padding, hover styles, cursor) - Confirm ArrowUp/ArrowDown navigation works correctly in the popover - Check that screen readers announce the menu and toolbar correctly Fixes #9519 > Note: The issue also requests Space-bar hold-to-pan, Tab through node ports, and link creation mode keyboard shortcuts. These are significant new features beyond the scope of this accessibility fix and should be tracked separately. ## Test plan - [x] Unit tests for ARIA roles, button elements, aria-labels, aria-hidden, and arrow key navigation (7 tests) - [ ] Manual: open canvas mode selector popover → Tab focuses first item → ArrowDown/ArrowUp navigates → Enter/Space selects - [ ] Screen reader: verify "Canvas Mode menu" with "Select" and "Hand" menu items are announced ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9526-fix-improve-canvas-menu-keyboard-navigation-and-ARIA-accessibility-31c6d73d3650814c9487ecf748cf6a99) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Internationalization (i18n)
Our project supports multiple languages using vue-i18n. This allows users around the world to use the application in their preferred language.
Supported Languages
- en (English)
- zh (中文)
- ru (Русский)
- ja (日本語)
- ko (한국어)
- fr (Français)
- es (Español)
- tr (Türkçe)
How to Add a New Language
Want to add a new language to ComfyUI? See our detailed Contributing Guide with step-by-step instructions and confirmed working process.
Quick Start
- Open an issue or reach out on Discord to request a new language
- Follow the technical process or ask for help
- Our CI will automatically generate translations using OpenAI
- Become a maintainer for your language
File Structure
Each language has 4 translation files in src/locales/[language-code]/:
main.json- Main UI textcommands.json- Command descriptionssettings.json- Settings panelnodeDefs.json- Node definitions