fix(a11y): label icon-only controls

[viktoravelino]

Summary

• Add accessible names to icon-only controls across header, folder/sidebar actions, node toolbars, Playground/IO chat controls, file upload, and main page actions.
• Add accessible fallback labels for custom SidebarTrigger children so custom trigger rendering is still named.
• Improve Playground focus behavior: opening Playground moves focus into the chat input, fullscreen Playground traps focus, and hidden/underlying controls are skipped while the overlay is open.
• Hide decorative SVG/icon content where parent controls already provide the accessible name.
• Keep React Flow/background SVG handling out of scope to avoid DOM patch risk.

Validation

• uv run git commit pre-commit hooks: case conflicts, whitespace, secrets, Biome, staged no-any check.
• cd src/frontend && npx @biomejs/biome check <touched Playground/IO files>
• cd src/frontend && npm test -- --runInBand src/components/core/playgroundComponent/chat-view/chat-input/__tests__/chat-input.test.tsx src/components/core/playgroundComponent/chat-view/chat-header/components/__tests__/chat-sidebar.test.tsx src/components/core/playgroundComponent/chat-view/chat-header/components/__tests__/session-selector.test.tsx
• cd src/frontend && npm run a11y:report --silent -- --json
• Browser preview check: opening Playground focuses textarea[data-testid="input-chat-playground"]; fullscreen Playground has dialog semantics; Tab wraps from Send to New Chat; Shift+Tab wraps from New Chat to Send; hidden fullscreen controls are under inert.

QA Regression Checklist

• Sidebar trigger accessible names: verify sidebar collapse/expand triggers, including custom-child triggers, have meaningful accessible names and unchanged visuals.
• Open Playground focus: open a flow and click Playground; focus should move into the Playground chat input and not remain on the toolbar button.
• Fullscreen Playground tab order: tab through all visible Playground controls; focus should stay inside Playground and wrap from the last control back to the first.
• Fullscreen Playground reverse tab order: press Shift+Tab from the first Playground control; focus should wrap to the last Playground control and not escape underneath.
• Hidden/underlying controls: while Playground is open, hidden canvas/fullscreen controls such as Enter fullscreen should not be keyboard reachable or announced as active controls.
• Playground chat input controls: tab through attach, voice/audio, textarea, and send/cancel; the chat input wrapper itself should not be an extra tab stop.
• Playground message actions: edit, copy, helpful, not helpful, and session delete controls should announce clear names; helpful/not helpful should expose selected/pressed state.
• IO modal chat controls: attach file, voice input, voice settings, mute/unmute, close voice assistant, new chat, and sidebar controls should announce clear names and correct toggle state where applicable.
• IO modal message actions: edit/copy/helpful/not helpful actions should announce correctly and preserve pressed state.
• Visual regression: Sidebar, Playground, and IO modal layout/spacing/icons should remain unchanged by the accessibility-label and focus changes.

Notes

• React Flow canvas/SVG, contrast token issues, and broader landmark/Radix aria-controls findings remain separate follow-up work.

Refs LE-1516

Summary by CodeRabbit

• New Features

  • Improved accessibility across chat, sidebar, node, and toolbar controls with clearer labels, pressed states, and hidden decorative icons.
  • Added localized text for new UI actions in multiple languages, including sidebar toggles, node detail editing, and voice assistant controls.
  • Fullscreen sidebar now traps focus more reliably, helping keyboard navigation stay within the panel.

• Bug Fixes

  • Updated several interactive buttons and menus so their accessible names better match their actions.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 732af0de-6972-4845-9609-dd2286f57cee

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Walkthrough

The frontend adds accessible names and hidden-icon markers across app shell, sidebar, folder, node, chat, modal, and voice-assistant controls. It also adds fullscreen sidebar focus trapping and inert/aria-hidden handling for playground layouts, plus matching locale strings and accessibility tests.

Changes

Frontend accessibility updates

Layer / File(s)	Summary
App shell labels src/frontend/src/components/common/pageLayout/index.tsx, src/frontend/src/components/common/modelProviderCountComponent/index.tsx, src/frontend/src/components/core/appHeaderComponent/..., src/frontend/src/pages/MainPage/pages/empty-page.tsx	Back, model-provider, header logo, account menu, and social icon controls add labels or hide decorative icons; the header a11y test checks the logo button name.
Sidebar focus handling src/frontend/src/components/ui/sidebar.tsx, src/frontend/src/components/ui/simple-sidebar.tsx, src/frontend/src/components/ui/animated-close.tsx, src/frontend/src/components/ui/loading.tsx, src/frontend/src/components/ui/__tests__/*.tsx	Sidebar trigger names, fullscreen dialog semantics, and tab trapping change across the shared sidebar primitives, with tests covering the new accessible names and focus loop.
Sidebar buttons and inputs src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/components/..., src/frontend/src/components/core/parameterRenderComponent/components/..., src/frontend/src/locales/{de,es,fr,ja,pt,zh-Hans}.json	Folder action buttons and parameter/file inputs add accessible names, and the new input-option locale strings are added across supported languages.
Node detail labels src/frontend/src/CustomNodes/GenericNode/index.tsx, src/frontend/src/pages/FlowPage/components/InspectionPanel/components/..., src/frontend/src/locales/{de,es,fr,ja,pt,zh-Hans}.json	Node detail edit and visibility controls add translated labels, and the inspection panel header updates its button props.
Flow toolbar triggers src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/..., src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/...	Flow sidebar triggers and the toolbar button contract add accessible names, shortcut metadata, and tests.
Playground chat actions src/frontend/src/components/core/playgroundComponent/chat-view/...	Chat input controls and message actions add labels, pressed states, and updated wrapper interaction guards.
Playground container focus src/frontend/src/pages/FlowPage/index.tsx, src/frontend/src/components/core/playgroundComponent/sliding-container/components/flow-page-sliding-container.tsx	The fullscreen playground wrapper adds a region label, inert state, and focus movement into the chat input.
Modal chat shell src/frontend/src/modals/IOModal/components/chat-view-wrapper.tsx, src/frontend/src/modals/IOModal/components/sidebar-open-view.tsx, src/frontend/src/modals/IOModal/components/chatView/..., src/frontend/src/locales/{de,en,es,fr,ja,pt,zh-Hans}.json	Modal chat shell buttons and message controls add labels, and the show-sidebar locale strings are added.
Voice assistant labels src/frontend/src/modals/IOModal/components/chatView/chatInput/components/voice-assistant/..., src/frontend/src/locales/{de,en,es,fr,ja,pt,zh-Hans}.json	Voice assistant buttons add labels and pressed state, and the close locale strings are added.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• langflow-ai/langflow#13313: Also changes src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/chat-sidebar.tsx bulk-delete semantics and pressed-state behavior.
• langflow-ai/langflow#13666: Also overlaps with accessible naming updates for the header, folder sidebar buttons, and related accessibility tests.

Suggested reviewers

• deon-sanchez

🚥 Pre-merge checks | ✅ 7 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Test Quality And Coverage	⚠️ Warning	Coverage is spotty: many touched controls have no tests, and key changes are under-tested or mis-aimed (e.g. SidebarTrigger custom text, ModelProviderCount label).	Add focused tests for each touched control, asserting accessible names/aria-hidden and focus behavior with role/name queries rather than smoke renders.

✅ Passed checks (7 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the PR’s main accessibility change: adding labels to icon-only controls.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Test Coverage For New Implementations	✅ Passed	PR adds substantive .test.tsx coverage for new a11y labels and focus regressions (sidebar, folder buttons, Playground chat input, simple sidebar, toolbar).
Test File Naming And Structure	✅ Passed	Touched tests use repo-standard Jest unit patterns: *.test.tsx under tests, descriptive suite names, and clear setup/mocks; no backend/integration naming issues found.
Excessive Mock Usage Warning	✅ Passed	Mocks are limited to external deps/leaf children; tests still assert real DOM names and focus behavior, so they don't appear excessive.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/a11y-icon-control-labels

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

✅ Test Coverage Advisor

No source changes detected without accompanying tests. Thanks for keeping coverage up! 🎉

Advisory check only — never blocks merge.

[github-actions]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	44.51% (60130/135075)	69.29% (8175/11797)	42.78% (1356/3169)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
5096	0 💤	0 ❌	0 🔥	16m 45s ⏱️

[codecov]

Codecov Report

❌ Patch coverage is 71.98364% with 137 lines in your changes missing coverage. Please review.
✅ Project coverage is 59.77%. Comparing base (e9af8d5) to head (4ed4cec).
⚠️ Report is 3 commits behind head on release-1.11.0.

Files with missing lines	Patch %	Lines
src/frontend/src/pages/FlowPage/index.tsx	16.98%	44 Missing ⚠️
...FlowPage/components/flowSidebarComponent/index.tsx	26.92%	19 Missing ⚠️
...put/components/voice-assistant/voice-assistant.tsx	0.00%	13 Missing ⚠️
src/frontend/src/components/ui/simple-sidebar.tsx	88.99%	12 Missing ⚠️
...ntainer/components/flow-page-sliding-container.tsx	65.00%	7 Missing ⚠️
...hatView/chatMessage/components/message-options.tsx	0.00%	6 Missing ⚠️
...rFolderButtons/components/get-started-progress.tsx	0.00%	5 Missing ⚠️
...-view/chat-messages/components/message-options.tsx	33.33%	4 Missing ⚠️
...rc/modals/IOModal/components/chat-view-wrapper.tsx	0.00%	4 Missing ⚠️
...onents/voice-assistant/components/voice-button.tsx	0.00%	3 Missing ⚠️
... and 15 more

Additional details and impacted files

@@                Coverage Diff                 @@
##           release-1.11.0   #13678      +/-   ##
==================================================
+ Coverage           59.68%   59.77%   +0.09%     
==================================================
  Files                2345     2347       +2     
  Lines              224397   224740     +343     
  Branches            31475    31624     +149     
==================================================
+ Hits               133921   134328     +407     
+ Misses              88942    88879      -63     
+ Partials             1534     1533       -1     

Flag	Coverage Δ
frontend	58.59% <71.98%> (+0.16%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/frontend/src/CustomNodes/GenericNode/index.tsx	85.98% <100.00%> (+0.36%)	⬆️
...nents/common/modelProviderCountComponent/index.tsx	90.54% <100.00%> (+0.39%)	⬆️
...ppHeaderComponent/components/AccountMenu/index.tsx	93.23% <100.00%> (+0.09%)	⬆️
...e/appHeaderComponent/components/FlowMenu/index.tsx	94.77% <100.00%> (+0.76%)	⬆️
...re/canvasControlsComponent/CanvasControlButton.tsx	93.54% <100.00%> (+1.74%)	⬆️
...ts/core/canvasControlsComponent/CanvasControls.tsx	92.14% <100.00%> (-0.41%)	⬇️
.../chat-view/chat-header/components/chat-sidebar.tsx	94.07% <100.00%> (+0.09%)	⬆️
...t/chat-view/chat-input/components/audio-button.tsx	95.45% <100.00%> (+0.10%)	⬆️
...view/chat-input/components/button-send-wrapper.tsx	94.44% <100.00%> (+0.19%)	⬆️
.../chat-view/chat-input/components/input-wrapper.tsx	79.64% <100.00%> (+1.92%)	⬆️
... and 39 more

... and 82 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.