Menu

Individual skill

cometchat-a11y

Keep a CometChat integration accessible — the UI Kit is designed targeting WCAG 2.1 AA with keyboard navigation (verify per component in its docs; full conformance still needs manual testing), and this skill makes sure the HOST app doesn't break that, covering contrast, focus, screen-reader context, reduced motion, RTL, and calls accessibility. Cross-family. Triggers: 'is cometchat accessible', 'WCAG / 508 / ADA compliance', 'screen reader support', 'keyboard navigation', 'a11y audit', 'accessible chat', 'contrast/focus issues in chat'.

plugins/cometchat/cometchat-skills/skills/cometchat-a11y/SKILL.md

Read pinned source

Source commit d780783eba4ecc7c8b9429f95c9362df95f07c61

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
No
Repository scan complete
No
Skill scan complete
No
Observed behavior
Not checked yet
Last checked
Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
1,537
Repository last updated
Nov 7, 2026
License
Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Declared tags are partial or unavailable.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

> **Ground truth:** the UI Kit components are documented as **designed targeting WCAG 2.1 Level AA** with **keyboard navigation** built in (the Angular component docs state this most explicitly; note the docs' own caveat that full conformance still requires manual testing — do not assert a blanket AA/VPAT claim to the user without it). Treat AA as the design target, not a certified guarantee. Accessibility failures in a CometChat app are almost always **host-side regressions** — global CSS, a broken focus order, a container with no accessible name, or motion that ignores the user's preference. Verify component-level a11y claims against the component's own docs page (`cometchat-<family>-components` → docs-map); this skill owns the host-side discipline the kit can't control.

## Use this skill when
An accessibility review (WCAG / Section 508 / ADA / EN 301 549), a screen-reader or keyboard complaint, or "make our chat accessible." Procurement for public-sector, education, healthcare and large enterprises requires this.

## Start from what the kit gives you
The kit ships accessible components: keyboard-operable lists/composer, focus handling, and semantics **designed targeting** AA (the design target — not a certified guarantee; see above). On web it sets ARIA roles and names itself — the conversation/user rosters render as a labelled `listbox` and manage roving focus — so don't override or strip them. Your job is to **not break it** and to make the surrounding app equally accessible. Two rules first:
1. **Don't let global CSS leak into the `.cometchat` subtree** (web) — a global `outline:none`, a low-contrast override, a `text-align`/flex reset, or a Tailwind base can strip focus rings or break contrast the kit set correctly. Scope your resets away from the kit (`RULES.md` → CSS isolation).
2. **Give the chat container a real, labelled home** — a sized region (a11y needs a visible, non-collapsed surface too) with an accessible name (e.g. an `aria-label`/landmark on web, an accessibility label on native) so screen-reader users can find and enter it.

## The checklist (host-side)
- **Keyboard:** every path reachable and operable by keyboard — open a conversation, type, send, open thread, close. Don't trap focus; return focus sensibly when a panel/dialog closes. Don't remove focus outlines; if you restyle them, keep a visible focus indicator.
- **Screen reader:** the surface and its regions have accessible names; your own buttons around the kit have labels (not icon-only with no `aria-label`/accessibility label). New-message announcements: verify the kit's live-region behavior on your target reader (VoiceOver/NVDA/TalkBack) and don't suppress it with `aria-hidden` on an ancestor.
- **Contrast:** if you theme the kit (`cometchat-<family>-customization`), keep text/UI contrast at **AA** (4.5:1 text, 3:1 large text/UI). Check both light and dark themes — a brand color that passes on light can fail on dark.