Commit Graph

6 Commits

Author SHA1 Message Date
7dd634790a feat: a11y (#13561)
* 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) (#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 (#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 (#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 (#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 (#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 (#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 (#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 (#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>
2026-06-25 18:33:53 +00:00
f625ef29e7 test: add playwright code coverage (#12294)
add playwright code coverage
merge frontend code coverage
use merged frontend for codeCov

add make command
update CI
2026-03-23 20:50:01 +00:00
0ddfed3c43 Feat: add storybook setup (#10721)
* feat(storybook): add Storybook setup and Button component stories

- Add Storybook configuration files (.storybook/main.ts, preview.ts, css.d.ts)
- Add Button component stories with interaction testing
- Add Storybook dependencies and scripts to package.json
- Support dark mode in stories via decorator
- Include play functions for automated interaction testing

* ci(storybook): add GitHub Pages deployment workflow

- Add automated deployment workflow for Storybook
- Deploy on push to main when Storybook files change
- Support manual trigger via workflow_dispatch
- Use official GitHub Actions for Pages deployment

* fix(storybook): align Storybook versions and fix TypeScript issues

- Update all @storybook/* packages from ^8.4.7 to ^8.6.14 to match main storybook version
- Fix CSS type declarations in css.d.ts (Record<string, string> instead of Record<string, never>)
- Remove @ts-ignore comments from preview.ts (CSS imports now properly typed)
- Fix darkMode type issue in button.stories.tsx with proper ArgTypes type assertion

* feat(storybook): replace Button stories with Dropdown component stories

- Remove Button stories (shadcn already has documentation)
- Add comprehensive Dropdown component stories showcasing:
  - Default, with value, combobox mode
  - With metadata, disabled, loading states
  - Many options, searchable filtering
  - Dark mode support
- Add store initialization decorator for Storybook
- Include interaction testing with play functions

* feat(storybook): add SettingsPage stories and remove dropdown stories

- Remove dropdown component stories
- Add SettingsPage stories with router, store, and dark mode decorators
- Include variants: default, with general settings, and dark mode

* feat(storybook): fix SettingsPage stories to show full page and add play functions

- Fix router setup to properly render SettingsPage with nested routes
- Add Routes configuration for all settings sub-pages (General, MCP Servers, Global Variables, Shortcuts, Messages)
- Add play functions to test page visibility and navigation
- Add stories for different routes: Default, WithGeneralSettings, NavigateToShortcuts, NavigateToGlobalVariables, DarkMode

* revert(storybook): restore SettingsPage stories to original working version

- Revert to simpler router setup without Routes configuration
- Remove play functions and complex routing
- Restore original three stories: Default, WithGeneralSettings, DarkMode

* feat(storybook): add stories for ShortcutsPage and GlobalVariablesPage with tables

- Add ShortcutsPage stories showing the shortcuts table
- Add GlobalVariablesPage stories showing the global variables table
- Include store setup for shortcuts data
- Add play functions to verify table visibility
- Support dark mode for both pages

* fix(storybook): add QueryClientProvider to GlobalVariablesPage stories

- Add QueryClientProvider decorator to support React Query hooks
- Configure QueryClient with retry disabled for Storybook

* fix(storybook): remove WithGeneralSettings story to fix nested router error

- Remove WithGeneralSettings story that was causing nested Router error
- Keep Default and DarkMode stories only

* feat(storybook): enhance SettingsPage stories with multiple states and logic variations

- Add stories showcasing different store configurations (autoLogin, hasStore)
- Demonstrate conditional General settings visibility logic
- Add interactive sidebar navigation story
- Show full configuration with all features
- Include play functions to verify state-based behavior
- Showcase how page adapts to different user/auth states

* fix(storybook): initialize Zustand stores synchronously in SettingsPage stories

- Set store state before component render instead of in useEffect
- Ensures stores are accessible when SettingsPage component mounts
- Fixes state access errors in Storybook

* feat(storybook): add story to verify store state accessibility

- Add VerifyStoreState story that demonstrates accessing Zustand store state
- Verify store values match expected configuration
- Show that state is accessible from play functions

* fix(storybook): remove router from SettingsPage stories to fix errors

- Remove MemoryRouter decorator that was causing errors
- Keep store setup and dark mode decorators
- Stories now work without router dependency

* fix(storybook): add router back to SettingsPage stories for useNavigate support

- Add MemoryRouter back to support useCustomNavigate hook in PageLayout
- Router is needed for navigation hooks to work properly
- Keep router at decorator level to avoid nested router errors

* fix(storybook): fix router decorator order in SettingsPage stories

- Move router decorator to be outermost (last in array)
- Decorators run bottom-to-top, so router should wrap everything
- Ensures useNavigate context is available to all components

* feat(storybook): add PlaygroundPage story as example for complex page stories

- Add PlaygroundPage story demonstrating how to create stories for complex pages
- Include darkMode toggle control as example for interactive story controls
- Set up decorators for query client, router, and theme switching
- Hide publish elements (Theme buttons, Built with Langflow) in story view
- Center chat title header in story view
- Configure Storybook preview and CSS types

This story serves as a reference for creating stories for full page components
rather than simple UI components, which are already documented in shadcn docs.

* chore(storybook): remove SettingsPage stories

Keep only PlaygroundPage story as the example for complex page stories.

* chore: restore pyproject.toml to match main branch

* chore: restore pyproject.toml to match main branch

* Revert "chore: restore pyproject.toml to match main branch"

This reverts commit a2b75a4028f1f046bc84a8d7999d53a2cb720fc9.

* chore: remove src/frontend/pyproject.toml as it doesn't exist in main

* fix gitignore and add make commands

* update package-json

* chore(storybook): migrate from v8.6.14 to v10.1.0

- Update all Storybook packages to v10.1.0
- Replace @storybook/addon-essentials with @storybook/addon-docs
- Remove @storybook/addon-interactions (moved to core)
- Remove @storybook/blocks and @storybook/test (consolidated)
- Fix import in PlaygroundPage.stories.tsx to use @storybook/react
- Update tsconfig.json moduleResolution to 'bundler' for better compatibility
- Add explicit types configuration for @storybook/react

* fix: update package-lock.json to sync with package.json

* fix: regenerate package-lock.json with all optional dependencies

---------

Co-authored-by: Olfa Maslah <olfamaslah@Olfas-MacBook-Pro.local>
Co-authored-by: Cristhian Zanforlin <criszl@MacBook-Pro-di-Cristhian.local>
Co-authored-by: Olfa Maslah <olfamaslah@macbookpro.war.can.ibm.com>
2025-11-26 20:39:05 +00:00
f24a064baa chore: Improve and expand Makefile help commands (#10184)
* Improve and expand Makefile help commands

Enhanced the help output in Makefile and Makefile.frontend with clearer formatting, color, and categorized command lists. Added specialized help targets for backend, frontend, testing, Docker, and advanced commands to improve developer onboarding and usability.

* Update Makefile
2025-10-10 19:29:04 +00:00
6bf60ece71 ci: add frontend test execution, reporting, and coverage in workflow (#8815)
* chore: add jest-junit dependency for improved test reporting

- Updated package.json and package-lock.json to include jest-junit version 16.0.0, enhancing test reporting capabilities in the project.

* chore: enhance Jest configuration for improved test coverage and CI reporting

- Added coverage collection settings, including coverage thresholds and report formats.
- Configured CI-specific options for Jest, including the use of jest-junit for test reporting and adjusted worker settings for better performance in CI environments.

* chore: update frontend test command for CI mode to ensure proper environment variable usage

- Modified the test command in the Makefile to set CI=true for accurate test execution in CI environments.

* chore: enhance frontend CI workflow with test reporting and coverage uploads

- Replaced the frontend dependency installation step with a command to run unit tests in CI mode.
- Added steps to publish test results using junit report and to comment on pull requests with coverage summaries.
- Implemented artifact upload for coverage reports to improve visibility and tracking of test coverage over time.

* chore: add frontend dependency installation step to CI workflow

- Introduced a step to install frontend dependencies using npm ci in the GitHub Actions workflow.
- This enhancement ensures that all necessary packages are available before running frontend unit tests, improving the reliability of the CI process.

* chore: update junit report action version in CI workflow

- Upgraded the junit report action from v5 to v5.5.1 in the GitHub Actions workflow to leverage the latest features and improvements for test result reporting.

* chore: add Jest unit test workflow for frontend

- Introduced a new GitHub Actions workflow to run Jest unit tests for the frontend.
- The workflow includes steps for checking out the repository, setting up the Node.js environment, running tests, publishing test results, adding coverage comments on pull requests, and uploading coverage reports.
- This enhancement improves the CI process by ensuring comprehensive testing and reporting for frontend components.

* chore: integrate Jest unit tests into CI workflow

- Added a new job to the CI workflow to run frontend unit tests using Jest.
- Updated the changes filter to include Jest test files, ensuring they are recognized during the CI process.
- This enhancement improves the testing coverage and reliability of the frontend components.
2025-07-01 20:38:10 +00:00
ff00eb582f fix: improves table formatting in the playground and adds Jest tests (#8743)
* feat(tests): add Jest configuration and setup for testing environment

- Introduced Jest configuration file to set up testing environment with TypeScript support and JSDOM.
- Added setupTests.ts for global test configurations, including mocks for ResizeObserver and IntersectionObserver.
- Updated package.json and package-lock.json to include Jest and related dependencies.
- Implemented utility functions for processing markdown content, including handling tables and <think> tags.
- Added comprehensive tests for markdown utility functions to ensure proper functionality.

* refactor(makefile): separate frontend commands into a dedicated Makefile

- Removed frontend-related targets from the main Makefile and created a new Makefile.frontend to manage frontend-specific commands.
- Updated the main Makefile to include a reference to the new frontend Makefile and added a help message for frontend commands.
- This restructuring improves organization and clarity for managing backend and frontend build processes.
2025-06-30 21:13:04 +00:00