---
name: accessible-components
description: "Implement interactive controls with keyboard and assistive-technology support. Use for a11y, keyboard, focus."
---

# Доступные компоненты

Implement interactive controls with keyboard and assistive-technology support.

## Implementation decisions

1. Use buttons for actions and links for navigation. Prefer native details, dialog and form controls when suitable.
2. For a modal label it, move focus inside, contain focus, support Escape and restore focus to the trigger.
3. Keep a live region mounted and update its text.
4. Associate validation errors with fields and respect motion preferences.

## Working source

Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- The primary flow works with keyboard only.
- Icon-only buttons have accessible names.
- Error messages identify the affected field.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/accordion

Version 2.0.0 · Original WEBCRAFT content · MIT