cometchat-a11y
Ground truth: per-platform UI Kit +
docs/fundamentals. Official docs: https://www.cometchat.com/docs/fundamentals/overview · Docs MCP:claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp(or fetch the URL directly without MCP). Verify symbols against the installed package/source before relying on them.
Purpose
Accessibility for CometChat integrations. Out-of-the-box, the UI Kit components are mostly accessible — the kit's own buttons, inputs, and lists ship with semantic markup. Production gaps appear in the wiring around the kit: custom call surfaces, navigation, focus management on screen transitions, and contrast in custom themes.
Target: WCAG 2.1 AA. The skill writes code that meets this baseline.
The five gaps that trip integrations (any family)
- Color contrast in custom themes. A brand color picked for "looks nice in the brand book" may be 3.2:1 against the text — fails AA's 4.5:1 minimum.
- Focus management on chat screen entry. Tab/screen reader user lands on the chat screen but focus stays on the previous trigger button. They have to manually navigate into the message list every time.
- No live region announcement for new messages. Screen reader users don't know a new message arrived unless they navigate the message list and hear the new item.
- Keyboard-only users can't navigate the conversation list. Click handlers bound to
<div>instead of<button>skip keyboard events. - Reduced-motion users see decorative animations. Typing-indicator dots, message bubble entrance animations, transition effects — should respect
prefers-reduced-motion.
This skill addresses each one across families.