validating-accessibility

To check React components for accessibility issues, scan .tsx files to detect semantic HTML violations, missing ARIA labels, improper form wiring, and keyboard navigation gaps. This validation catches inaccessible patterns like div-based buttons and icon-only controls lacking context-rich labels.

Semantic HTML should replace role="button" div patterns to ensure native keyboard navigation and screen reader compatibility. Using true <button> elements provides built-in focus management and interaction handling that div patterns lack, preventing accessibility failures in interactive elements.

Add action-and-target aria-labels to icon-only buttons in React to provide screen reader context for controls lacking visible text. Icon-only interactive elements require context-rich aria-labels to explain their function, ensuring keyboard and assistive technology users understand the control's purpose.

This accessibility validation works with shadcn Form and Radix dialog components by enforcing their specific patterns. It mandates Radix-based AlertDialog and Dialog usage for modals and encourages shadcn Form components to ensure proper label, ID, and ARIA wiring in React applications.

Valid tabIndex values for accessible React interactive elements are restricted to 0 and -1. Restricting tabIndex prevents positive values that disrupt natural tab order, ensuring keyboard navigation follows the visual DOM flow for screen reader and keyboard-only users.

You can verify accessibility compliance using targeted grep-style code scans to find common violations. These inline verification scan patterns detect issues like onClick handlers on divs, positive tabIndex values, role="button" attributes, and icon-only buttons missing required aria-labels.