/aria-fix

name: aria-fix
description: Fix ARIA attributes and accessibility issues in web components.

Fix ARIA attributes and accessibility issues in web components.

Steps

1. Read the target component and identify accessibility issues. 2. Apply ARIA fixes by category:

• **Roles**: Add `role` attributes to custom interactive elements.
• **States**: Add `aria-expanded`, `aria-selected`, `aria-checked` for stateful components.
• **Properties**: Add `aria-label`, `aria-describedby`, `aria-labelledby`.
• **Live regions**: Add `aria-live` for dynamic content updates.

3. Fix interactive element accessibility:

• Add `tabIndex={0}` to custom interactive elements.
• Add keyboard event handlers (`onKeyDown` for Enter/Space).
• Ensure focus is visible with proper styling.
• Trap focus in modal dialogs.

4. Fix form accessibility:

• Associate labels with inputs.
• Add `aria-invalid` and `aria-describedby` for validation errors.
• Group related fields with `fieldset` and `legend`.

5. Fix semantic HTML:

• Replace `div` click handlers with `button` elements.
• Use proper heading hierarchy (h1 > h2 > h3).
• Use landmark elements (nav, main, aside, footer).

6. Verify fixes do not break existing functionality.

Format

ARIA Fixes Applied: <file>

Changes:
  - L<N>: Added role="button" and keyboard handler to clickable div
  - L<N>: Added aria-label="Close dialog" to icon button
  - L<N>: Added aria-live="polite" to status message container
  - L<N>: Replaced div with semantic <nav> element

Tests: verify with keyboard navigation and screen reader

Rules

• Prefer semantic HTML over ARIA attributes (a button over div with role=button).
• Never use `aria-hidden="true"` on focusable elements.
• Ensure every ARIA role has the required states and properties.
• Test keyboard navigation order matches visual order.
• Do not add ARIA attributes that duplicate native HTML semantics.