C
Storybook
F6Shipped

Accessibility

WCAG 2.2 AA target for all Charply surfaces. Radix handles component behavior — this foundation covers design rules, keyboard expectations, and extension constraints.

Our approach

Accessible components are the baseline. Full journeys — sign in, generate, insert reply — still need keyboard testing and correct composition in each screen.

Design-time

Contrast, labels, hierarchy, touch targets

Components

Radix primitives, focus rings, ARIA defaults

Surfaces

Popup, side panel, content script isolation

Design considerations

Visuals

  • •Do not use color alone — pair errors with text and icons
  • •Check contrast in both light and dark themes
  • •Extension supporting text: 12px min; body: 14px

Interaction

  • •Design focus, hover, active, selected, and disabled states
  • •Disabled controls leave tab order — put help on adjacent active elements
  • •One primary action per surface

Comprehension

  • •Visible labels on every form field
  • •Logical heading hierarchy per panel
  • •Descriptive button and link text

Extension surfaces

  • •Dense popup (450×600) — scannable headings, short copy
  • •Content scripts must not break host page semantics

Engineering considerations

Prefer semantic HTML and Radix

import { Button, Dialog, DialogTitle, Label, Input } from "@charply/design"

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" aria-invalid={hasError} />

{/* DialogTitle is required for screen readers */}
<DialogTitle>Confirm delete</DialogTitle>

Keyboard navigation

ComponentExpected behavior
Button / LinkEnter / Space activates
TabsArrow keys navigate; Home / End jump
SwitchSpace toggles when focused
DialogEscape closes; Tab cycles within
TooltipShows on focus; supplemental only

Content scripts

Extension isolation rules

  • Scope theme to .webreply-theme-* only
  • Never set :root or body styles
  • Portal UI must be focusable and labeled
  • No global CSS resets in host pages

Guidelines

docs/design/foundation/accessibility.md

Do

  • ✓Test popup and side panel flows with keyboard only before shipping
  • ✓Include `DialogTitle` in every dialog
  • ✓Use `EmptyState` with clear title + action for zero-data views
  • ✓Run contrast checks when introducing new surface color combinations

Don't

  • ✗Use placeholder as the only field label
  • ✗Remove focus rings without an accessible alternative
  • ✗Import full Tailwind preflight into content scripts
  • ✗Rebuild Dialog/Tabs/Switch behavior outside Radix
  • ✗---

Further reading