Nodes 2.0: no outline on selected textarea causes accessibility issues

[isaac-mcfadyen]

Nodes Pre-2.0

In the old Nodes system, there was an outline around the currently selected text area:

Nodes 2.0

However, in Nodes 2.0 this seems to have been removed:

Especially when zoomed out, this makes it very tricky to know where you're actually typing.

I'm not sure if is something that was intentionally changed or not, but it's somewhat of an accessibility issue. Per WCAG guidelines:

For sighted people with mobility impairments who use a keyboard or a device that utilizes the keyboard interface (such as a switch or voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of users with low vision, who may also rely on the keyboard.
[...]
The minimum area of the focus indicator for a control is the area of a 2 CSS pixel thick perimeter of the control (or its minimum bounding box) in the control's unfocused state.

An outline style should probably be re-added, even if it's customized to suit the theme's overall aesthetic. The guideline above also suggests changing the background of the input if a border can't be added, so that could work here too.

┆Issue is synchronized with this Notion page by Unito

[dosubot]

Hi @isaac-mcfadyen! I'm Dosu and I’m helping the ComfyUI_frontend team.

The missing focus outline in Nodes 2.0 is due to explicit CSS rules that suppress browser-provided outlines, so this change appears intentional rather than accidental (source). There isn't a custom focus indicator currently applied to textareas or inputs, which means the UI does not meet WCAG 2.4.13 requirements for visible focus indicators.

No existing tickets or discussions directly address this regression, but related feedback highlights readability and accessibility concerns in Nodes 2.0 (source).

To address this, you could add a custom focus style for textareas/inputs that meets WCAG guidelines (minimum 2px perimeter and sufficient contrast). For example:

.comfy-multiline-input:focus {
  outline: 2px solid var(--focus-outline-color, #00aaff);
  outline-offset: 2px;
  /* Or, for a background change:
  background-color: var(--focus-bg-color, #222244);
  */
}

This can be adapted to fit the project's theming and user customization options.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

  

[isaac-mcfadyen]

Looks like this was fixed with #7167, thanks!