fix(a11y): add accessible names and hide decorative icons in LangflowCounts by olayinkaadelakun · Pull Request #13731 · langflow-ai/langflow

olayinkaadelakun · 2026-06-17T19:33:50Z

Summary

Add visually-hidden sr-only spans to the GitHub and Discord buttons
in LangflowCounts so screen readers announce "Go to GitHub repo" /
"Go to Discord server" instead of just the star/member count
Mark FaGithub, FaDiscord, and the count spans as
aria-hidden="true" so AT skips the decorative content and relies on
the sr-only label
Add langflow-counts.a11y.test.tsx — a dedicated test file that
renders LangflowCounts directly (not via the mocked header shell)
and asserts accessible names and aria-hidden on both buttons

Fixes two WCAG 2.1 criteria:

1.1.1 Non-text Content — SVG icons now hidden from AT
2.4.6 Headings and Labels — buttons now have a computed accessible
name matching the visible tooltip text

Test plan

npx jest langflow-counts.a11y --no-coverage → 4 assertions green
npx jest appHeader.a11y --no-coverage → 3 existing assertions
unchanged

Screenshot (errors decreased by 2)

Before

After

…Counts

coderabbitai · 2026-06-17T19:33:59Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (1)

release-.*

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: 2e8a60ba-e5e4-455a-9228-59fc5e7d08b8

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch LE-1808

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

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

github-actions · 2026-06-17T19:35:07Z

✅ Test Coverage Advisor

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

Advisory check only — never blocks merge.

github-actions · 2026-06-17T19:53:09Z

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	43.38% (57801/133239)	69.04% (7843/11360)	41.63% (1299/3120)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
4945	0 💤	0 ❌	0 🔥	15m 20s ⏱️

codecov · 2026-06-17T22:01:54Z

Codecov Report

❌ Patch coverage is 0% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 58.54%. Comparing base (e5d42e5) to head (dc4723e).
⚠️ Report is 24 commits behind head on feat/a11y.

Files with missing lines	Patch %	Lines
.../appHeaderComponent/components/langflow-counts.tsx	0.00%	6 Missing ⚠️

❌ Your patch check has failed because the patch coverage (0.00%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage.
❌ Your project check has failed because the head coverage (54.35%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

@@             Coverage Diff              @@
##           feat/a11y   #13731     +/-   ##
============================================
  Coverage      58.54%   58.54%             
============================================
  Files           2305     2307      +2     
  Lines         219369   219488    +119     
  Branches       31150    32964   +1814     
============================================
+ Hits          128419   128497     +78     
- Misses         89492    89533     +41     
  Partials        1458     1458

Flag	Coverage Δ
frontend	`57.84% <0.00%> (+<0.01%)`	⬆️

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

Files with missing lines	Coverage Δ
.../appHeaderComponent/components/langflow-counts.tsx	`29.21% <0.00%> (-0.68%)`	⬇️

... and 204 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.

* chore: add accessibility action plan and gap report for IBM Level 1 compliance * feat: integrate accessibility checker for automated a11y scans - Added `accessibility-checker` package to the project dependencies. - Enhanced test fixtures to include accessibility scanning capabilities. - Implemented `runA11yScan` method in the `LangflowPage` type for running accessibility checks. - Created utility functions for building accessibility scan labels, formatting failure messages, and generating summary attachments. - Updated test setup to manage accessibility sessions and assert compliance based on scan results. * feat: add accessibility test usage documentation for IBM scans * feat: enhance accessibility testing with JSON report aggregation and new tests * feat: add GitHub Actions workflow for IBM accessibility scans * feat: update a11y scan workflow to allow testing from feat/a11y branch * feat: skip Puppeteer download during npm install in Dockerfiles for accessibility testing * feat: enhance a11y scan workflow to resolve and scan latest release branches * test: add component a11y unit tests (jest-axe) (langflow-ai#13613) * test: add component a11y unit tests (jest-axe) Cover 14 components in two waves. 16 tests fail by design - each encodes a known gap from a11y-action-plan (phases 0-3) and flips to a regression lock once the component fix lands. 23 tests pass as regression locks for already-correct semantics. * ci: split a11y unit tests into separate workflow Main jest CI excludes *.a11y.test.* so known-gap failures don't block PRs; new a11y-unit-tests.yml runs them as informational check. * fix(a11y): resolve component gaps flagged by a11y unit tests Fixes all 16 failing jest-axe gap tests: - TableHead defaults scope=col - alert display area gets aria-live region - app header becomes <header> landmark; bell button labeled - icon wrapper decorative by default (aria-hidden), ariaLabel opt-in - Input drops wrapping <label> (name pollution) and hides placeholder span - password toggle back in tab order with aria-label/aria-pressed - CheckBoxDiv exposes checkbox role + state - accordion trigger renders native Radix button - dialogs focus container on open instead of suppressing autofocus - full-screen modal exposes dialog role/aria-modal/ariaLabel - flow list card focusable with keyboard activation Also wraps test focus calls in act() and mocks the icon loader so the a11y suite runs without React warnings. * fix: skip Puppeteer Chrome download in remaining Dockerfiles frontend and base images still ran bare npm install; puppeteer (via accessibility-checker, test-only) tried to fetch Chrome and broke the Docker image build in CI. * test: extend a11y unit test coverage (jest-axe) Adds axe + semantics tests for untested primitives (button, alert, textarea, radio-group, dropdown-menu, tooltip, popover) and two known-gap tests that fail by design until fixes land: - copyFieldAreaComponent copy action is a bare div onClick (plan 2.4) - DialogContentWithouFixed renders an empty fragment (plan 1.6) * fix: make webhook copy field a real button (a11y) Copy action was a bare div onClick - no role, name, or keyboard support (a11y-action-plan 2.4). Drops the no-longer-needed DialogContentWithouFixed known-gap test. * feat: update a11y unit tests and improve accessibility semantics in components * feat: enable pull request trigger for a11y scan workflow * feat: Add a11y regression scan suite (langflow-ai#13663) * test: add component a11y unit tests (jest-axe) Cover 14 components in two waves. 16 tests fail by design - each encodes a known gap from a11y-action-plan (phases 0-3) and flips to a regression lock once the component fix lands. 23 tests pass as regression locks for already-correct semantics. * ci: split a11y unit tests into separate workflow Main jest CI excludes *.a11y.test.* so known-gap failures don't block PRs; new a11y-unit-tests.yml runs them as informational check. * fix(a11y): resolve component gaps flagged by a11y unit tests Fixes all 16 failing jest-axe gap tests: - TableHead defaults scope=col - alert display area gets aria-live region - app header becomes <header> landmark; bell button labeled - icon wrapper decorative by default (aria-hidden), ariaLabel opt-in - Input drops wrapping <label> (name pollution) and hides placeholder span - password toggle back in tab order with aria-label/aria-pressed - CheckBoxDiv exposes checkbox role + state - accordion trigger renders native Radix button - dialogs focus container on open instead of suppressing autofocus - full-screen modal exposes dialog role/aria-modal/ariaLabel - flow list card focusable with keyboard activation Also wraps test focus calls in act() and mocks the icon loader so the a11y suite runs without React warnings. * fix: skip Puppeteer Chrome download in remaining Dockerfiles frontend and base images still ran bare npm install; puppeteer (via accessibility-checker, test-only) tried to fetch Chrome and broke the Docker image build in CI. * test: extend a11y unit test coverage (jest-axe) Adds axe + semantics tests for untested primitives (button, alert, textarea, radio-group, dropdown-menu, tooltip, popover) and two known-gap tests that fail by design until fixes land: - copyFieldAreaComponent copy action is a bare div onClick (plan 2.4) - DialogContentWithouFixed renders an empty fragment (plan 1.6) * fix: make webhook copy field a real button (a11y) Copy action was a bare div onClick - no role, name, or keyboard support (a11y-action-plan 2.4). Drops the no-longer-needed DialogContentWithouFixed known-gap test. * feat: update a11y unit tests and improve accessibility semantics in components * feat: enable pull request trigger for a11y scan workflow * test: add a11y regression scan suite * test: make a11y scans non-blocking * test: discover a11y scan specs * ci: group a11y workflow checks * fix(a11y): restore focus-visible indicators (langflow-ai#13664) * fix(a11y): restore focus-visible indicators * [autofix.ci] apply automated fixes --------- Co-authored-by: Olayinka Adelakun <olayinkaadelakun@Olayinkas-MacBook-Pro.local> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Viktor Avelino <64113566+viktoravelino@users.noreply.github.com> * a11y: improve auth accessibility coverage (langflow-ai#13724) * fix: improve auth accessibility coverage * fix(a11y): restore delete trigger tab focus * test(dialog): cover nested description * fix(a11y): add accessible names and hide decorative icons in LangflowCounts (langflow-ai#13731) * fix(a11y): add accessible names and hide decorative icons in LangflowCounts * [autofix.ci] apply automated fixes --------- Co-authored-by: Olayinka Adelakun <olayinkaadelakun@mac.war.can.ibm.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * fix(a11y): add accessible names to icon-only buttons, fix placeholder (langflow-ai#13666) * fix(a11y): add accessible names to icon-only buttons, fix placeholder contrast, and enforce touch target size on /flows * [autofix.ci] apply automated fixes * fix issues * [autofix.ci] apply automated fixes * fix(a11y): fix aria-allowed-attr, invalid sidebar list structure, and session filter label mismatch on flow editor (langflow-ai#13668) * fix(a11y): fix aria-allowed-attr, invalid sidebar list structure, and session filter label mismatch on flow editor * [autofix.ci] apply automated fixes * improve translations * remove app-header-a11y --------- Co-authored-by: Olayinka Adelakun <olayinkaadelakun@Olayinkas-MacBook-Pro.local> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Olayinka Adelakun <olayinkaadelakun@mac.war.can.ibm.com> * label get-started close button and fix dark-mode placeholder contrast * remove testing change * improve the lint of the testcase --------- Co-authored-by: Olayinka Adelakun <olayinkaadelakun@Olayinkas-MacBook-Pro.local> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Viktor Avelino <64113566+viktoravelino@users.noreply.github.com> Co-authored-by: Olayinka Adelakun <olayinkaadelakun@mac.war.can.ibm.com> * fix: update package dependencies and versions in package-lock.json * chore: Remove accessibility documentation and reports - Deleted the accessibility action plan, gap report, level 1 requirements, and test usage documentation. - This cleanup is part of a broader effort to streamline accessibility resources and focus on actionable items. * chore: Add accessibility scan reports (langflow-ai#13812) * feat: add accessibility scan reports * docs: add a11y scan route map * test(a11y): add manifest-backed scans * ci(a11y): summarize scans by route * fix: update Playwright version to 1.60.0 and enhance a11y scan options * fix(test): keep fixture args destructured * test(a11y): bootstrap asset route scans --------- Co-authored-by: olayinkaadelakun <olayinka.adelakun@ibm.com> Co-authored-by: Olayinka Adelakun <olayinkaadelakun@Olayinkas-MacBook-Pro.local> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Olayinka Adelakun <olayinkaadelakun@mac.war.can.ibm.com>

…eral page (langflow-ai#13811) * chore: add accessibility action plan and gap report for IBM Level 1 compliance * feat: integrate accessibility checker for automated a11y scans - Added `accessibility-checker` package to the project dependencies. - Enhanced test fixtures to include accessibility scanning capabilities. - Implemented `runA11yScan` method in the `LangflowPage` type for running accessibility checks. - Created utility functions for building accessibility scan labels, formatting failure messages, and generating summary attachments. - Updated test setup to manage accessibility sessions and assert compliance based on scan results. * feat: add accessibility test usage documentation for IBM scans * feat: enhance accessibility testing with JSON report aggregation and new tests * feat: add GitHub Actions workflow for IBM accessibility scans * feat: update a11y scan workflow to allow testing from feat/a11y branch * feat: skip Puppeteer download during npm install in Dockerfiles for accessibility testing * feat: enhance a11y scan workflow to resolve and scan latest release branches * test: add component a11y unit tests (jest-axe) (langflow-ai#13613) * test: add component a11y unit tests (jest-axe) Cover 14 components in two waves. 16 tests fail by design - each encodes a known gap from a11y-action-plan (phases 0-3) and flips to a regression lock once the component fix lands. 23 tests pass as regression locks for already-correct semantics. * ci: split a11y unit tests into separate workflow Main jest CI excludes *.a11y.test.* so known-gap failures don't block PRs; new a11y-unit-tests.yml runs them as informational check. * fix(a11y): resolve component gaps flagged by a11y unit tests Fixes all 16 failing jest-axe gap tests: - TableHead defaults scope=col - alert display area gets aria-live region - app header becomes <header> landmark; bell button labeled - icon wrapper decorative by default (aria-hidden), ariaLabel opt-in - Input drops wrapping <label> (name pollution) and hides placeholder span - password toggle back in tab order with aria-label/aria-pressed - CheckBoxDiv exposes checkbox role + state - accordion trigger renders native Radix button - dialogs focus container on open instead of suppressing autofocus - full-screen modal exposes dialog role/aria-modal/ariaLabel - flow list card focusable with keyboard activation Also wraps test focus calls in act() and mocks the icon loader so the a11y suite runs without React warnings. * fix: skip Puppeteer Chrome download in remaining Dockerfiles frontend and base images still ran bare npm install; puppeteer (via accessibility-checker, test-only) tried to fetch Chrome and broke the Docker image build in CI. * test: extend a11y unit test coverage (jest-axe) Adds axe + semantics tests for untested primitives (button, alert, textarea, radio-group, dropdown-menu, tooltip, popover) and two known-gap tests that fail by design until fixes land: - copyFieldAreaComponent copy action is a bare div onClick (plan 2.4) - DialogContentWithouFixed renders an empty fragment (plan 1.6) * fix: make webhook copy field a real button (a11y) Copy action was a bare div onClick - no role, name, or keyboard support (a11y-action-plan 2.4). Drops the no-longer-needed DialogContentWithouFixed known-gap test. * feat: update a11y unit tests and improve accessibility semantics in components * feat: enable pull request trigger for a11y scan workflow * feat: Add a11y regression scan suite (langflow-ai#13663) * test: add component a11y unit tests (jest-axe) Cover 14 components in two waves. 16 tests fail by design - each encodes a known gap from a11y-action-plan (phases 0-3) and flips to a regression lock once the component fix lands. 23 tests pass as regression locks for already-correct semantics. * ci: split a11y unit tests into separate workflow Main jest CI excludes *.a11y.test.* so known-gap failures don't block PRs; new a11y-unit-tests.yml runs them as informational check. * fix(a11y): resolve component gaps flagged by a11y unit tests Fixes all 16 failing jest-axe gap tests: - TableHead defaults scope=col - alert display area gets aria-live region - app header becomes <header> landmark; bell button labeled - icon wrapper decorative by default (aria-hidden), ariaLabel opt-in - Input drops wrapping <label> (name pollution) and hides placeholder span - password toggle back in tab order with aria-label/aria-pressed - CheckBoxDiv exposes checkbox role + state - accordion trigger renders native Radix button - dialogs focus container on open instead of suppressing autofocus - full-screen modal exposes dialog role/aria-modal/ariaLabel - flow list card focusable with keyboard activation Also wraps test focus calls in act() and mocks the icon loader so the a11y suite runs without React warnings. * fix: skip Puppeteer Chrome download in remaining Dockerfiles frontend and base images still ran bare npm install; puppeteer (via accessibility-checker, test-only) tried to fetch Chrome and broke the Docker image build in CI. * test: extend a11y unit test coverage (jest-axe) Adds axe + semantics tests for untested primitives (button, alert, textarea, radio-group, dropdown-menu, tooltip, popover) and two known-gap tests that fail by design until fixes land: - copyFieldAreaComponent copy action is a bare div onClick (plan 2.4) - DialogContentWithouFixed renders an empty fragment (plan 1.6) * fix: make webhook copy field a real button (a11y) Copy action was a bare div onClick - no role, name, or keyboard support (a11y-action-plan 2.4). Drops the no-longer-needed DialogContentWithouFixed known-gap test. * feat: update a11y unit tests and improve accessibility semantics in components * feat: enable pull request trigger for a11y scan workflow * test: add a11y regression scan suite * test: make a11y scans non-blocking * test: discover a11y scan specs * ci: group a11y workflow checks * fix(a11y): restore focus-visible indicators (langflow-ai#13664) * fix(a11y): restore focus-visible indicators * [autofix.ci] apply automated fixes --------- Co-authored-by: Olayinka Adelakun <olayinkaadelakun@Olayinkas-MacBook-Pro.local> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Viktor Avelino <64113566+viktoravelino@users.noreply.github.com> * a11y: improve auth accessibility coverage (langflow-ai#13724) * fix: improve auth accessibility coverage * fix(a11y): restore delete trigger tab focus * test(dialog): cover nested description * fix(a11y): add accessible names and hide decorative icons in LangflowCounts (langflow-ai#13731) * fix(a11y): add accessible names and hide decorative icons in LangflowCounts * [autofix.ci] apply automated fixes --------- Co-authored-by: Olayinka Adelakun <olayinkaadelakun@mac.war.can.ibm.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * fix(a11y): add accessible names to icon-only buttons, fix placeholder (langflow-ai#13666) * fix(a11y): add accessible names to icon-only buttons, fix placeholder contrast, and enforce touch target size on /flows * [autofix.ci] apply automated fixes * fix issues * [autofix.ci] apply automated fixes * fix(a11y): fix aria-allowed-attr, invalid sidebar list structure, and session filter label mismatch on flow editor (langflow-ai#13668) * fix(a11y): fix aria-allowed-attr, invalid sidebar list structure, and session filter label mismatch on flow editor * [autofix.ci] apply automated fixes * improve translations * remove app-header-a11y --------- Co-authored-by: Olayinka Adelakun <olayinkaadelakun@Olayinkas-MacBook-Pro.local> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Olayinka Adelakun <olayinkaadelakun@mac.war.can.ibm.com> * label get-started close button and fix dark-mode placeholder contrast * remove testing change * improve the lint of the testcase --------- Co-authored-by: Olayinka Adelakun <olayinkaadelakun@Olayinkas-MacBook-Pro.local> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Viktor Avelino <64113566+viktoravelino@users.noreply.github.com> Co-authored-by: Olayinka Adelakun <olayinkaadelakun@mac.war.can.ibm.com> * fix(a11y): resolve WCAG 2.1 Level A and AA violations on settings general page * fix Biome issue * remove files that were added by incorrectly merging Release-1.11.0 * improve testcases --------- Co-authored-by: Viktor Avelino <viktor.avelino@gmail.com> Co-authored-by: Viktor Avelino <64113566+viktoravelino@users.noreply.github.com> Co-authored-by: Olayinka Adelakun <olayinkaadelakun@Olayinkas-MacBook-Pro.local> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Olayinka Adelakun <olayinkaadelakun@mac.war.can.ibm.com>

fix(a11y): add accessible names and hide decorative icons in Langflow…

0082610

…Counts

olayinkaadelakun self-assigned this Jun 17, 2026

github-actions Bot added the bug Something isn't working label Jun 17, 2026

[autofix.ci] apply automated fixes

dc4723e

github-actions Bot added bug Something isn't working and removed bug Something isn't working labels Jun 17, 2026

viktoravelino approved these changes Jun 22, 2026

View reviewed changes

github-actions Bot added the lgtm This PR has been approved by a maintainer label Jun 22, 2026

olayinkaadelakun merged commit 6fae209 into feat/a11y Jun 22, 2026
106 of 108 checks passed

olayinkaadelakun deleted the LE-1808 branch June 22, 2026 22:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(a11y): add accessible names and hide decorative icons in LangflowCounts - #13731

fix(a11y): add accessible names and hide decorative icons in LangflowCounts#13731
olayinkaadelakun merged 2 commits into
feat/a11yfrom
LE-1808

olayinkaadelakun commented Jun 17, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jun 17, 2026 •

edited

Loading

Review skipped

Uh oh!

github-actions Bot commented Jun 17, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 17, 2026

Uh oh!

codecov Bot commented Jun 17, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

olayinkaadelakun commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Screenshot (errors decreased by 2)

Uh oh!

coderabbitai Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

github-actions Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Test Coverage Advisor

Uh oh!

github-actions Bot commented Jun 17, 2026

Frontend Unit Test Coverage Report

Coverage Summary

Unit Test Results

Uh oh!

codecov Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

olayinkaadelakun commented Jun 17, 2026 •

edited

Loading

coderabbitai Bot commented Jun 17, 2026 •

edited

Loading

github-actions Bot commented Jun 17, 2026 •

edited

Loading

codecov Bot commented Jun 17, 2026 •

edited

Loading