feat(a11y): add accessible names for canvas handles, edges, and toolbar controls - #14209
Open
olayinkaadelakun wants to merge 1 commit into
Open
feat(a11y): add accessible names for canvas handles, edges, and toolbar controls#14209olayinkaadelakun wants to merge 1 commit into
olayinkaadelakun wants to merge 1 commit into
Conversation
Contributor
WalkthroughChangesCanvas accessibility
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 8 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (8 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Checkov (3.3.8)src/frontend/src/locales/de.jsonTraceback (most recent call last): src/frontend/src/locales/en.jsonTraceback (most recent call last): src/frontend/src/locales/es.jsonTraceback (most recent call last):
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
✅ Test Coverage AdvisorNo source changes detected without accompanying tests. Thanks for keeping coverage up! 🎉
|
github-actions
Bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.a11y.test.tsx (1)
57-63: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExercise the production button in the accessibility test.
Mocking
Buttonas a native<button>hides the component whose forwarding and disabled semantics this Axe suite is meant to validate. Keep only infrastructure mocks and render the real button primitive.As per coding guidelines, warn when frontend tests rely on excessive mocks that obscure what is actually being tested.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.a11y.test.tsx` around lines 57 - 63, Remove the `@/components/ui/button` mock from CanvasControls.a11y.test.tsx so the accessibility suite renders the production Button component and validates its prop forwarding and disabled behavior. Keep only mocks required for unrelated test infrastructure.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.a11y.test.tsx`:
- Around line 112-137: Add direct accessibility assertions for the assistant
control in the CanvasControls tests. Verify the assistant element exposes
“Langflow Assistant” when unlocked and “(Read-Only)” when rendered with
effectiveLocked, using the assistant control’s existing test identifier or role.
In
`@src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/__tests__/handleRenderComponent.a11y.test.tsx`:
- Around line 58-62: Update the three accessibility assertions in the
handleRenderComponent tests to use screen.getByRole with role "button" and the
existing accessible names, replacing getByLabelText for the input, output, and
minimized-handle cases.
In `@src/frontend/src/locales/es.json`:
- Line 2184: Correct the localized accessible-name templates: in
src/frontend/src/locales/es.json lines 2184-2184, update handle.ariaLabelOutput
to use a valid output-handle term such as “Conector de salida”; in
src/frontend/src/locales/fr.json lines 2185-2185, replace the malformed “Passage
d' {{source}} à {{target}}” template with grammatically valid French such as
“Connexion de {{source}} à {{target}}”.
In `@src/frontend/src/locales/ja.json`:
- Line 2185: Fully localize the edge accessible-name templates by replacing the
English “Edge” term with the appropriate localized graph term: use “エッジ” in
src/frontend/src/locales/ja.json at lines 2185-2185, “aresta” in
src/frontend/src/locales/pt.json at lines 2185-2185, and “边” in
src/frontend/src/locales/zh-Hans.json at lines 2185-2185. Preserve the existing
{{source}} and {{target}} placeholders.
In `@src/frontend/tests/core/unit/customEdgesComponent.spec.ts`:
- Around line 65-78: Update the accessibility assertions in the custom edge test
to scope handle role/name checks directly to the connected elements represented
by urlOutput and toolCallingAgentInput, rather than using global queries with
first(). Target the edge created by the current interaction explicitly instead
of selecting the last matching edge, while preserving the existing
accessible-name expectations.
---
Nitpick comments:
In
`@src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.a11y.test.tsx`:
- Around line 57-63: Remove the `@/components/ui/button` mock from
CanvasControls.a11y.test.tsx so the accessibility suite renders the production
Button component and validates its prop forwarding and disabled behavior. Keep
only mocks required for unrelated test infrastructure.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 0b45ef76-5fae-4ff0-bd3a-c4e6a1c4f258
📒 Files selected for processing (14)
src/frontend/src/CustomEdges/__tests__/CustomEdges.a11y.test.tsxsrc/frontend/src/CustomEdges/index.tsxsrc/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/__tests__/handleRenderComponent.a11y.test.tsxsrc/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsxsrc/frontend/src/components/core/canvasControlsComponent/CanvasControls.tsxsrc/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.a11y.test.tsxsrc/frontend/src/locales/de.jsonsrc/frontend/src/locales/en.jsonsrc/frontend/src/locales/es.jsonsrc/frontend/src/locales/fr.jsonsrc/frontend/src/locales/ja.jsonsrc/frontend/src/locales/pt.jsonsrc/frontend/src/locales/zh-Hans.jsonsrc/frontend/tests/core/unit/customEdgesComponent.spec.ts
Comment on lines
+112
to
+137
| it("should_expose_accessible_name_for_add_note_button", () => { | ||
| render(<CanvasControls selectedNode={null} />); | ||
|
|
||
| expect( | ||
| screen.getByRole("button", { name: "Add Sticky Note" }), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("should_expose_accessible_name_for_minimize_all_button", () => { | ||
| render(<CanvasControls selectedNode={null} />); | ||
|
|
||
| expect( | ||
| screen.getByRole("button", { name: "Minimize all" }), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("should_expose_read_only_accessible_name_when_locked", () => { | ||
| render(<CanvasControls selectedNode={null} effectiveLocked />); | ||
|
|
||
| expect(screen.getByTestId("canvas-add-note-button")).toHaveAccessibleName( | ||
| "(Read-Only)", | ||
| ); | ||
| expect( | ||
| screen.getByTestId("canvas_controls_minimize_all"), | ||
| ).toHaveAccessibleName("(Read-Only)"); | ||
| }); |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Add direct coverage for the assistant label.
The assistant’s new aria-label is never asserted. Axe would still pass if it were removed because the nested image already supplies an accessible name. Assert "Langflow Assistant" when unlocked and "(Read-Only)" when locked.
Proposed coverage
+ it("should_expose_accessible_name_for_assistant_button", () => {
+ render(<CanvasControls selectedNode={null} />);
+
+ expect(
+ screen.getByRole("button", { name: "Langflow Assistant" }),
+ ).toBeInTheDocument();
+ });
+
it("should_expose_read_only_accessible_name_when_locked", () => {
render(<CanvasControls selectedNode={null} effectiveLocked />);
+ expect(screen.getByTestId("assistant-button")).toHaveAccessibleName(
+ "(Read-Only)",
+ );As per coding guidelines, frontend tests must verify meaningful behavior for new functionality rather than only smoke-testing it.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| it("should_expose_accessible_name_for_add_note_button", () => { | |
| render(<CanvasControls selectedNode={null} />); | |
| expect( | |
| screen.getByRole("button", { name: "Add Sticky Note" }), | |
| ).toBeInTheDocument(); | |
| }); | |
| it("should_expose_accessible_name_for_minimize_all_button", () => { | |
| render(<CanvasControls selectedNode={null} />); | |
| expect( | |
| screen.getByRole("button", { name: "Minimize all" }), | |
| ).toBeInTheDocument(); | |
| }); | |
| it("should_expose_read_only_accessible_name_when_locked", () => { | |
| render(<CanvasControls selectedNode={null} effectiveLocked />); | |
| expect(screen.getByTestId("canvas-add-note-button")).toHaveAccessibleName( | |
| "(Read-Only)", | |
| ); | |
| expect( | |
| screen.getByTestId("canvas_controls_minimize_all"), | |
| ).toHaveAccessibleName("(Read-Only)"); | |
| }); | |
| it("should_expose_accessible_name_for_assistant_button", () => { | |
| render(<CanvasControls selectedNode={null} />); | |
| expect( | |
| screen.getByRole("button", { name: "Langflow Assistant" }), | |
| ).toBeInTheDocument(); | |
| }); | |
| it("should_expose_read_only_accessible_name_when_locked", () => { | |
| render(<CanvasControls selectedNode={null} effectiveLocked />); | |
| expect(screen.getByTestId("assistant-button")).toHaveAccessibleName( | |
| "(Read-Only)", | |
| ); | |
| expect(screen.getByTestId("canvas-add-note-button")).toHaveAccessibleName( | |
| "(Read-Only)", | |
| ); | |
| expect( | |
| screen.getByTestId("canvas_controls_minimize_all"), | |
| ).toHaveAccessibleName("(Read-Only)"); | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.a11y.test.tsx`
around lines 112 - 137, Add direct accessibility assertions for the assistant
control in the CanvasControls tests. Verify the assistant element exposes
“Langflow Assistant” when unlocked and “(Read-Only)” when rendered with
effectiveLocked, using the assistant control’s existing test identifier or role.
Source: Coding guidelines
Comment on lines
+58
to
+62
| expect( | ||
| screen.getByLabelText( | ||
| "Input handle for Message on node ChatInput-abc123", | ||
| ), | ||
| ).toBeInTheDocument(); |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Assert the required button role as well as the accessible name.
getByLabelText does not require the matched element to have role="button", so a regression removing the handle role could still pass these tests. Use getByRole("button", { name }) for all three assertions.
Proposed assertion update
- screen.getByLabelText(
- "Input handle for Message on node ChatInput-abc123",
- ),
+ screen.getByRole("button", {
+ name: "Input handle for Message on node ChatInput-abc123",
+ }),Apply the same change to the output and minimized-handle assertions.
Also applies to: 70-74, 89-93
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/__tests__/handleRenderComponent.a11y.test.tsx`
around lines 58 - 62, Update the three accessibility assertions in the
handleRenderComponent tests to use screen.getByRole with role "button" and the
existing accessible names, replacing getByLabelText for the input, output, and
minimized-handle cases.
| "canvasControls.expandAll": "Expandir todo" | ||
| "canvasControls.expandAll": "Expandir todo", | ||
| "handle.ariaLabelInput": "Identificador de entrada para « {{field}} » en el nodo « {{node}} »", | ||
| "handle.ariaLabelOutput": "Mánula de salida para {{field}} en el nodo {{node}}", |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Correct malformed localized accessible names.
These strings are read as the controls’ accessible names, so the typo and malformed French elision reach screen-reader users.
src/frontend/src/locales/es.json#L2184-L2184: replaceMánulawith a valid output-handle term, such asConector de salida.src/frontend/src/locales/fr.json#L2185-L2185: replacePassage d' {{source}} à {{target}}with a grammatically valid template, such asConnexion de {{source}} à {{target}}.
📍 Affects 2 files
src/frontend/src/locales/es.json#L2184-L2184(this comment)src/frontend/src/locales/fr.json#L2185-L2185
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/frontend/src/locales/es.json` at line 2184, Correct the localized
accessible-name templates: in src/frontend/src/locales/es.json lines 2184-2184,
update handle.ariaLabelOutput to use a valid output-handle term such as
“Conector de salida”; in src/frontend/src/locales/fr.json lines 2185-2185,
replace the malformed “Passage d' {{source}} à {{target}}” template with
grammatically valid French such as “Connexion de {{source}} à {{target}}”.
| "canvasControls.expandAll": "すべて展開", | ||
| "handle.ariaLabelInput": "ノード「 {{node}} 」上の {{field}} 用の入力ハンドル", | ||
| "handle.ariaLabelOutput": "ノード「 {{node}} 」上の {{field}} の出力ハンドル", | ||
| "edge.ariaLabel": "{{source}} から {{target}} への Edge" |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Fully localize the edge accessible-name templates.
The localized templates still announce the English word “Edge,” producing mixed-language screen-reader output.
src/frontend/src/locales/ja.json#L2185-L2185: replaceEdgewith the Japanese graph term, e.g.エッジ.src/frontend/src/locales/pt.json#L2185-L2185: replaceEdgewith the Portuguese graph term, e.g.aresta.src/frontend/src/locales/zh-Hans.json#L2185-L2185: replaceEdgewith the Simplified Chinese graph term, e.g.边.
📍 Affects 3 files
src/frontend/src/locales/ja.json#L2185-L2185(this comment)src/frontend/src/locales/pt.json#L2185-L2185src/frontend/src/locales/zh-Hans.json#L2185-L2185
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/frontend/src/locales/ja.json` at line 2185, Fully localize the edge
accessible-name templates by replacing the English “Edge” term with the
appropriate localized graph term: use “エッジ” in src/frontend/src/locales/ja.json
at lines 2185-2185, “aresta” in src/frontend/src/locales/pt.json at lines
2185-2185, and “边” in src/frontend/src/locales/zh-Hans.json at lines 2185-2185.
Preserve the existing {{source}} and {{target}} placeholders.
Comment on lines
+65
to
+78
| // The handles resolved above by testid must also be reachable by their | ||
| // accessible name — confirms the aria-label targets the same element. | ||
| await expect( | ||
| page.getByRole("button", { name: /Output handle for Toolset/ }).first(), | ||
| ).toHaveCount(1); | ||
| await expect( | ||
| page.getByRole("button", { name: /Input handle for Tools/ }).first(), | ||
| ).toHaveCount(1); | ||
|
|
||
| // The newly created edge exposes an accessible name identifying the | ||
| // connection's source and target. | ||
| await expect( | ||
| page.getByRole("img", { name: /^Edge from .* to .*/ }).last(), | ||
| ).toBeVisible(); |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Bind accessibility assertions to the connected elements.
These fresh global role queries, combined with .first()/.last(), can pass for another matching handle or edge. Assert the role/name on urlOutput and toolCallingAgentInput, and target the edge created by this interaction.
As per coding guidelines, frontend tests should verify meaningful behavior rather than only smoke-testing it.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/frontend/tests/core/unit/customEdgesComponent.spec.ts` around lines 65 -
78, Update the accessibility assertions in the custom edge test to scope handle
role/name checks directly to the connected elements represented by urlOutput and
toolCallingAgentInput, rather than using global queries with first(). Target the
edge created by the current interaction explicitly instead of selecting the last
matching edge, while preserving the existing accessible-name expectations.
Source: Coding guidelines
Contributor
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds accessible names for the flow canvas's connection handles, edges, and three buttons in the canvas controls panel (
CanvasControls.tsx, the bottom-center zoom/assistant/sticky-note/minimize-all panel) that only had atitleattribute before. This is PR 1 of 2 in the flow canvas accessibility remediation (WCAG 1.1.1 Non-text Content) — canvas keyboard navigation (2.1.1) is scoped to a separate follow-up PR. The per-node toolbar (nodeToolbarComponent) is not touched in this PR.handleRenderComponent: connection handles now exposerole="button"+aria-label("Input/Output handle for {field} on node {nodeId}")CustomEdges/DefaultEdge: edges now exposerole="img"+aria-label("Edge from {source} to {target}"), using each node'sdisplay_namewith a raw-id fallbackCanvasControls:assistant-button,canvas-add-note-button, andcanvas_controls_minimize_allnow havearia-labelin addition to their existingtitlehandle.ariaLabelInput,handle.ariaLabelOutput,edge.ariaLabeladded toen.jsonand translated into all 6 supported locales via the GP translation pipelinelist.a11y.test.tsxpasses), and thelastSelectionstore the follow-up keyboard-nav PR depends on is already wired to ReactFlow's nativeonSelectionChangeWhy
The canvas's connection points and relationships were unidentifiable to screen readers — handles and edges rendered with no accessible name at all. This is the additive, low-risk half of the remediation; the higher-risk canvas keyboard re-enablement (
disableKeyboardA11y) is intentionally deferred to its own PR so it can be reviewed and tested in isolation.Test plan
npx jest— newhandleRenderComponent.a11y.test.tsx,CustomEdges.a11y.test.tsx,CanvasControls.a11y.test.tsx(jest-axe, zero violations) + full existing suite passingnpx biome check/npx tsc --noEmit— cleantests/core/unit/customEdgesComponent.spec.ts(Playwright) to assert handles/edges are reachable by accessible name, not just testidRUN_A11Y=true RUN_A11Y_ASSERT=true npx playwright test tests/a11y/core-pages.a11y.spec.ts --project=chromium) and regenerate theflow-canvas-populatedbaseline — not run in this PR, needs the full app runningSummary by CodeRabbit
Accessibility
Localization
Tests