Name: cometchat-a11y
Author: cometchat

Accessibility (a11y) for CometChat UI Kit integrations across all families — React, React Native, Angular, Android (V5/V6), iOS, Flutter. Covers WCAG 2.1 AA targets, keyboard navigation in chat, screen reader announcements (live regions for new messages), color contrast, focus management on call scr

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. Reduced motion: honor prefers reduced motion (web) / the OS "reduce motion" setting (native) in any animation you add around the chat; don't force motion the user opted out of. Text scaling / zoom: the surface must remain usable at 200% zoom / large Dynamic Type — don't cap font sizes or clip at large text. RTL: direction correct for RTL locales (pairs with cometchat i18n ). Targets: your custom controls meet the minimum touch target size; don't shrink the kit's. Calls accessibility (if you use calling) Request camera/mic with clear, user visible prompts and reasons. Provide accessible labels for call controls you add (mute, end, camera). Where available, surface captions/transcription; ensure incoming call UI is announced and keyboard/AT operable. Test it Automated (web): run axe /Lighthouse on the chat screen — fix contrast, missing names, and ARIA misuse it flags. (Automated tools catch ~a third of issues; do the manual pass too.) Manual: tab through the whole flow with the mouse unplugged; drive it with VoiceOver / NVDA / TalkBack; zoom to 200%; toggle reduced motion; switch to dark. Fix what breaks in YOUR wiring; if a genuine kit component gap appears, verify against the component docs and report it (don't hand patch kit internals). Common pitfalls 1. Global CSS stripping focus rings or contrast inside .cometchat — scope resets away. 2. Icon only custom buttons with no label — add accessible names. 3. Unlabelled, collapsed, or unreachable chat container — size it and name it. 4. Animations ignoring reduced motion. 5. Contrast checked in one theme only — check light and dark. 6. Assuming automated tools are enough — they miss keyboard/reader flow; test manually. Verify it works The chat flow is fully keyboard operable with a visible focus indicator · a screen reader announces the surface, messages, and your controls · contrast passes AA in light and dark · the UI holds at 200% zoom / large type · reduced motion is honored · RTL mirrors correctly · axe/Lighthouse on the chat screen is clean of contrast/name/ARIA errors.