skills.rest
langflow-ai
langflow-aiOFFICIAL
Explore all skills by this author →
Website𝕏@langflow_aiGitHub

ibm-a11y-testing-guide

Guide writing Langflow frontend accessibility tests with axe and IBM Equal Access.

154k|10.0k|Updated Feb 8, 2023
Search Tags:#wcag#Jest#playwright#aria# accessibility#AXe#ibm-equal-access
One-click install
npx skills add https://github.com/langflow-ai/langflow --skill ibm-a11y-testing-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ibm-a11y-testing-guide
Source: https://github.com/langflow-ai/langflow/tree/main/.agents/skills/ibm-a11y-testing-guide
Command: npx skills add https://github.com/langflow-ai/langflow --skill ibm-a11y-testing-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend accessibility testing requires running multiple engines and understanding component-specific pitfalls, but developers often stop at a single axe scan and miss real WCAG Level 1 violations. This Skill provides the reference knowledge to choose the right test layer and debug violations across the Langflow UI.

Core Features & Use Cases

  • Engine Selection Guidance: Decides when to use Jest+axe, Playwright page.runA11yScan, or the Python route scanner based on UI surface complexity.
  • POUR Checklist & Rule Gap Reference: Maps WCAG criteria to specific axe-vs-IBM rule gaps and component gotchas for AG Grid, Radix, and modals.
  • Use Case: When adding a new settings page with an editable data grid, consult this Skill to write both Jest unit tests and Playwright stateful scans, then debug any IBM-only violations like missing accessible names on icon-only columns.

Quick Start

Use the ibm-a11y-testing-guide skill to review my new Playwright accessibility test for the global variables settings page and identify which IBM rules I should verify beyond axe.

Frequently Asked Questions about ibm-a11y-testing-guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write accessibility tests for React components in Jest?▼

Render the component with React Testing Library and call axe(container) from @/utils/a11y-test. Assert with toHaveNoViolations(). Note that color-contrast is disabled in jsdom since layout cannot be measured.

What is the difference between axe-core and IBM Equal Access for accessibility testing?▼

axe-core runs in Jest via jsdom and catches contrast, labels, and basic ARIA issues. IBM Equal Access is stricter on ARIA structure and keyboard semantics, catching real WCAG Level 1 violations like tabbable elements with presentation roles that axe silently passes.

How do I run an IBM accessibility scan in Playwright?▼

Call page.runA11yScan(label) after navigating to the route and triggering the target state. Set RUN_A11Y=true to run the scan and RUN_A11Y_ASSERT=true to fail on new violations. The scan runs aChecker.getCompliance on the live DOM.

Why does AG Grid fail keyboard accessibility tests on disabled paging buttons?▼

Disabled paging buttons must use tabindex=-1, never inert or disabled, because AG Grid relies on its own tab guards. Breaking those guards traps reverse Shift+Tab entry, violating WCAG 2.1.2 No Keyboard Trap.

When should I use Playwright instead of Jest for accessibility tests?▼

Use Playwright when the surface needs real browser layout, routing, app state, modals, tables, focus order, or full-page keyboard interactions. Use Jest for primitives or components that render correctly in jsdom without full app routing.

How do I baseline known IBM accessibility violations that cannot be fixed?▼

Run the scan once to generate the report, then copy offending results into tests/a11y/baselines/{label}.json with ruleId, reasonId, and path.dom fields. The filterReport marks matching entries as ignored so the scan passes while the debt is tracked.

Related Skills

Explore More Software Engineering Skills→
orenmagidorenmagid

cabinet-accessibility

Evaluate .tsx UI components against WCAG guidelines for accessibility issues.

Community
Advanced
mouayadakelmouayadakel

accessibility-test-generator

Generate accessibility tests for axe-core violations, keyboard navigation, focus traps, and ARIA attributes.

Community
Intermediate
omarrohit20omarrohit20

Axe-core Accessibility

Automate axe-core accessibility scans with Playwright for WCAG 2.1 AA compliance.

Community
Advanced
EngineerWithAIEngineerWithAI
4

screen-reader-testing

Validate web application accessibility with VoiceOver, NVDA, and JAWS.

Official
Intermediate