Accessibility
Focus rings, keyboard navigation, ARIA attributes, and color contrast. The baseline a11y requirements every Canvas surface must meet.
Focus ring
Every interactive element gets a visible focus indicator on keyboard focus. The kit's Pressable colours the browser's own ring with the palette's ring token, 2px off the control; a field paints its own ring-coloured border instead, and a full-bleed row draws the ring just inside itself so its container cannot clip it.
Anatomy. The ring appears on keyboard focus only (the browser's :focus-visible), never on a mouse click, and follows the control's border-radius. Chromium paints it in the ring colour; Firefox and Safari keep their own ring colour unless the page loads the CSS hand-off, whose :focus-visible rule draws a solid 2px ring in --ring everywhere.
Use Tab to move through these controls. Focus input moves real focus into the field; no ring is painted onto an unfocused control.
Focus example
Keyboard shortcuts
Standard keyboard patterns used across Canvas components.
ARIA essentials
Minimum ARIA attributes required on common Canvas patterns.
Overview
Activity
Overview selected
Notifications
The control announces its current checked state.
Cross-platform support
Canvas components announce their role and state to assistive tech on iOS, Android, and the web from one codebase, and the role follows the control each platform draws: a one-setting Checkbox is the switch on iOS and Android and announces as one there, while a selection Checkbox stays a checkbox everywhere. react-native-web does not forward accessibilityState or accessibilityValue to the DOM, so each component also carries the matching aria-* attribute (React Native maps it back to the native state). You get VoiceOver, TalkBack, and web screen-reader support from one codebase.
Email updates
Standalone Checkbox uses the platform's appropriate control.
Example value
35%
Color contrast
Canvas tokens are designed for WCAG AA contrast (4.5:1 for normal text, 3:1 for large text). Verify contrast when customizing theme colors.