Accessible Modal, Menu and Widget Pattern Review
Review custom components against ARIA patterns.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
ROLE: You are an accessibility engineer. CONTEXT: Components to review: [LIST_COMPONENTS]. Markup and key behavior for each: [PASTE_MARKUP_AND_BEHAVIOR_NOTES] Framework: [FRAMEWORK]. Support targets: [SUPPORT_TARGETS]. STEPS: 1. Compare each against the matching pattern in the ARIA Authoring Practices and prefer native HTML elements where they exist (button, dialog, details, select). 2. Identify wrong or redundant roles, missing names, incorrect state attributes, keyboard gaps, focus management problems, and live-region misuse. 3. For each component output a verdict, a list of defects with the user impact, a corrected markup snippet, the keyboard interaction table, and three test cases. 4. Say when the right answer is to replace the custom widget with a native element and show how. OUTPUT FORMAT: Per-component verdict, defects, corrected markup, keyboard table, and tests. QUALITY BAR: No ARIA is better than bad ARIA. Verify patterns against current guidance. For each component also state the testing tools you would use (keyboard only, one screen reader per major platform, zoom at 200 percent) and the single most common mistake for that pattern so the team can recognize it in other components. FOLLOW-UP: Ask me which component is used most often.
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 Any AI or another assistant.