Component Builder With Accessibility
Generate a reusable accessible UI component.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
Generate a reusable UI component with accessibility built in. Framework and language: [FRAMEWORK_AND_LANGUAGE]. Component: [COMPONENT_NAME]. Design tokens or style approach: [STYLING_APPROACH]. Behavior requirements: [BEHAVIOR_REQUIREMENTS]. Follow the standard shown in this mini example for a toggle button: it renders a native button element; exposes the pressed state with aria-pressed; shows a visible focus ring that meets contrast requirements; supports Space and Enter; has a label prop that is required in the type definition; and does not rely on color alone to show the state (it also changes an icon). For my component, deliver: 1. The accessibility contract in bullets: semantic element or ARIA pattern used (follow the established authoring practices pattern), keyboard interactions, focus management, labels and descriptions, and announcements. 2. The component code, typed, with props documented and sensible defaults. 3. Styles including focus, hover, disabled, high-contrast, and reduced-motion handling. 4. Usage examples (three) including an incorrect usage and why it fails. 5. Tests: unit tests for behavior and an automated accessibility check, plus a manual test script with keyboard and screen reader steps. Prefer native HTML elements over ARIA where possible. State any limits or browser support concerns.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into ChatGPT, Gemini, Claude or another assistant.