skills.rest
Endava
EndavaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

fix-accessibility

Audit and fix accessibility issues in BEEQ StencilJS components.

160|24|Updated Feb 22, 2023
Search Tags:#accessibility#keyboard navigation#wcag#e2e testing#focus management#aria#stenciljs
One-click install
npx skills add https://github.com/Endava/BEEQ --skill fix-accessibility-endava
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fix-accessibility
Source: https://github.com/Endava/BEEQ/tree/main/.agents/skills/fix-accessibility
Command: npx skills add https://github.com/Endava/BEEQ --skill fix-accessibility-endava

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you audit and repair accessibility issues in BEEQ StencilJS components so they work better for keyboard users, screen readers, and users who depend on clear semantic structure.

Core Features & Use Cases

  • ARIA and Semantics Fixes: Add or correct labels, roles, states, and relationships for interactive components.
  • Keyboard and Focus Behavior: Restore expected navigation, focus trapping, and focus return patterns for dialogs, drawers, tabs, and similar widgets.
  • Testing Support: Write or update accessibility E2E tests to verify WCAG-relevant behavior and prevent regressions.
  • Use Case: Use this Skill when a component fails axe checks, a PR review flags missing accessibility attributes, or a user reports that a BEEQ component is difficult to operate without a mouse.

Quick Start

Use the fix-accessibility skill to audit the bq-button component at packages/beeq/src/components/button/bq-button.tsx and report the accessibility issues with concrete fixes.

Frequently Asked Questions about fix-accessibility

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

FAQPage Schema
How do I fix WCAG 2.1 Level AA accessibility issues in StencilJS components?▼

To fix WCAG accessibility issues in StencilJS components, audit ARIA labels, roles, focus management, and color contrast to validate semantic HTML and screen reader behavior.

What causes keyboard navigation and focus trapping failures in web components?▼

Keyboard navigation failures in web components stem from missing focus return patterns, incorrect state attributes, or broken ARIA relationships within interactive widgets like dialogs and tabs.

Can I automate accessibility E2E testing to prevent WCAG regressions?▼

Yes, you can automate accessibility E2E testing to prevent WCAG regressions by writing tests that verify keyboard navigation, focus management, and screen reader behavior for interactive components.

Does this accessibility remediation process work with BEEQ bq-* components?▼

Yes, this accessibility remediation process works with BEEQ bq-* components, applying targeted fixes to semantic HTML, ARIA roles, and live regions to satisfy WCAG 2.1 Level AA requirements.

When should I update ARIA labels and live regions for screen reader compatibility?▼

You should update ARIA labels and live regions for screen reader compatibility when a component fails axe checks, a PR review flags missing accessibility attributes, or users report difficulty operating without a mouse.

Related Skills

Explore More Software Engineering Skills→
mattobeemattobee

fixing-accessibility-issues

Fixes WCAG violations in UI code from axe-core scans and audits with validated workflows.

Community
Advanced
hiyenwonghiyenwong
2

accessibility-wcag

Audit web interfaces for WCAG 2.2 conformance and provide remediation guidance.

Community
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
brianlovinbrianlovin
357

rams

Analyze UI components for WCAG violations and visual design inconsistencies.

Community
Advanced