feat: add accessible web UI agent and components for improved accessiblity

[deleonio]

Accessible Web UI

Most developers want to build accessible UIs. The problem is never intention — it's
cognitive load. ARIA, keyboard contracts, focus management, label associations… getting
it right requires expertise most teams don't have spare time to develop.

This PR ships a Copilot agent + companion skill that take that burden off your plate.
You describe the UI. The agent closes every accessibility gap automatically.

---

What's included

agents/accessible-web-ui.agent.md — a specialized Copilot agent that:

• Queries the KoliBri MCP server for verified component specs before writing a
  single line — no guessing, no hallucinated props
• Generates minimal, runnable, WCAG 2.2 AA–compliant code using self-contained
  web components that enforce labels, error associations, and keyboard behavior
  by design — not by convention
• Hands off to accessibility.agent.md for
  deep WCAG audits or to any framework agent for React / Angular / Vue adaptation

skills/accessible-web-components/SKILL.md — the knowledge base behind the agent:

• Explains why accessible web components are the sustainable answer to HTML5's gaps
• Documents KoliBri's component contract, MCP workflow, and anti-patterns to avoid
• Contains the full component reference table with the accessibility gap each component closes

---

The idea in one sentence

Accessibility shouldn't require expertise at the call site —
it should be baked into the component API so the accessible path is the only path.

---

Why this is good for you as a developer

• ✅ Ship accessible UIs without becoming a WCAG expert overnight
• ✅ Every generated form has labels, every error is associated, every modal traps focus — automatically
• ✅ Works in vanilla HTML, React, Angular, Vue — same components, same accessibility contract
• ✅ One less thing to review in PR, one less regression in the next audit

---

Checklist

• accessible-web-ui.agent.md — frontmatter complete (name, description,
  model, tools, mcp-servers, handoffs)
• accessible-web-components/SKILL.md — frontmatter valid, description in range
• File names lowercase with hyphens
• No non-existent file references
• README updated via npm run build

[Copilot]

Copilot wasn't able to review this pull request because it exceeds the maximum number of files (300). Try reducing the number of changed files and requesting a review from Copilot again.

[aaronpowell]

It looks like you've incorrectly branched from the main branch not staged, and as a result all the materialised plugins are included in this PR.

You can attempt to fix this with a rebase:

git fetch origin staged
git rebase --onto origin/staged origin/main <branch name>
git push --force-with-lease

If that does not resolve it, you can run npm run plugin:clean which will delete the materialised plugins and you can commit that change.

[github-actions]

🔍 Skill Validator Results

2 resource(s) checked | ✅ All checks passed

Full output

Only one of --plugin, --skills, or --agents can be used at a time.

Note: Errors were found. These are currently reported as warnings and do not block merge. Please review and address when possible.

[deleonio]

Hi @aaronpowell,

My base branch is “staged” and I've pushed our commit. Do you know why the “Validate README.md” command failed? When I run the commands locally, it works without any errors.

[aaronpowell]

Here's the diff of what's incorrect - https://github.com/github/awesome-copilot/actions/runs/23893539686/job/69672520114?pr=1191#step:8:21

The readme reports that there's a docs folder when there isn't one.