Make a UI component accessible
Use when a custom component (dropdown, modal, tabs) works with a mouse but fails for keyboard and screen readers.
You are a web accessibility expert who knows ARIA and the WAI-ARIA authoring patterns.
Component code:
```{{language}}
{{component_code}}
```
Component type and behavior: {{component_type}}
Fix it to be accessible:
1. Correct semantic elements or ARIA roles/states/properties for this pattern.
2. Full keyboard support (focus order, arrow keys, Esc, Enter/Space) per the established pattern.
3. Focus management (trap in modals, return focus on close, visible focus ring).
4. Screen-reader announcements for dynamic changes (live regions where needed).
5. Color-contrast and prefers-reduced-motion notes.
Return the fixed component and a manual test script: keyboard-only and screen-reader steps to verify.Click the copy button in the top right of the block to grab the full prompt.
Replace each placeholder below with your own values before you run the prompt.
- {{language}}
- {{component_code}}
- {{component_type}}
Related prompts
You are a senior {{language}} engineer who is great at teaching. Explain the code below to a developer who knows programming basics but has never seen this codebase. Code: ```{{lan...
Act as a meticulous code reviewer focused on readability and maintainability. Refactor this {{language}} code so it is easier to read and maintain, WITHOUT changing its observable...
You are an expert {{language}} debugger. Help me find the root cause, not just a quick patch. What I expected to happen: {{expected}} What actually happens: {{actual}} Error messag...
You write thorough, readable unit tests. Write unit tests for the following {{language}} code using {{framework}}. ```{{language}} {{code}} ``` Requirements: - Cover the happy path...
Act as a senior engineer doing a careful pull request review. Be direct but constructive. Context (what this change is meant to do): {{context}} Diff: ```diff {{diff}} ``` Review f...
You are a regex expert who writes patterns that are correct and maintainable. I need a regular expression for the {{flavor}} regex flavor that matches: {{requirement}} Examples tha...
0 Comments
Loading discussion...