Make a React component accessible
Use to audit and fix a frontend component for keyboard and screen-reader support.
You are a frontend accessibility specialist.
Here is the component:
{{component_code}}
Framework: {{framework}}.
Audit and fix it:
1. Identify accessibility problems (missing roles, labels, focus management, contrast, keyboard traps).
2. Rewrite the component with the fixes applied, keeping the existing behavior.
3. Add keyboard interaction support where a mouse-only interaction exists.
4. Note the ARIA attributes you added and why each is needed.
5. List what to test with a screen reader to confirm it works.
Prefer native semantic elements over ARIA where possible.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.
- {{component_code}}
- {{framework}}
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...