Angular Accessibility Skill

Purpose

Enable Copilot to design, review, and refactor this Angular skill pack so that it consistently meets or exceeds WCAG 2.2 AA requirements across templates, components, and routes.

Capabilities

• •Audit Angular templates (*.component.html) for semantic structure, landmark usage, and proper heading hierarchy.
• •Recommend and apply appropriate ARIA roles, properties, and states when semantic HTML alone is insufficient.
• •Improve keyboard accessibility (tab order, focus visibility, focus trapping in modals, escape/enter/space behavior).
• •Ensure interactive components (button, modal, future components) expose accessible names, roles, and states.
• •Suggest accessibility-focused unit and integration tests (e.g. with Testing Library for Angular or DOM-level queries).
• •Align designs with the design tokens (color, spacing, typography, radius) to maintain sufficient contrast and touch targets.
• •Provide guidance on accessible error messages, validation, and status/live region announcements.
• •Interactively validate accessibility flows in a running Angular app using MCP Playwright browser tools such as mcp_microsoft_pla_browser_click, mcp_microsoft_pla_browser_type, mcp_microsoft_pla_browser_hover, mcp_microsoft_pla_browser_wait_for, and mcp_microsoft_pla_browser_snapshot to verify keyboard and screen-reader behavior.
• •Fetch up-to-date accessibility and Angular documentation via Context7 tools (mcp_context7_resolve-library-id, mcp_context7_get-library-docs from the io.github.upstash/context7 server) before recommending ARIA patterns, CDK a11y utilities, or other library-specific solutions.

Constraints

• •Follow WCAG 2.2 AA as the baseline standard.
• •Prefer semantic HTML elements (button, nav, main, section, header, footer) before introducing ARIA.
• •Do not introduce visual-only cues that are not backed by text, icons with labels, or programmatic names.
• •Avoid patterns that break keyboard navigation (e.g. tabindex misuse, click-only handlers without keyboard equivalents).
• •Keep implementations aligned with Angular best practices (standalone components, templates, bindings).

Principles

• •Perceivable: Text, icons, and controls must be clearly visible under the design tokens, including in high-contrast scenarios.
• •Operable: Every interactive element must be fully usable via keyboard and assistive technology.
• •Understandable: Component APIs, labels, and instructions should be clear, consistent, and predictable.
• •Robust: Markup and behaviors should work well across assistive technologies and user agents.

Example Focus Areas in This Repo

• •Application shell and routes in src/app/app.component.ts and src/app/app.routes.ts.
• •Button and modal behavior and markup in src/app/components/button and src/app/components/modal.
• •Future components and pages that reuse the design tokens in design-system/tokens.