Accessibility Bug Hunter for AI Coding Agents

Audit this React checkout form for accessibility issues and create a Cursor prompt to fix it. Focus on labels, form errors, keyboard navigation, focus states, screen reader behavior, ARIA usage, loading states, and validation behavior. Preserve existing checkout logic and do not rewrite unrelated files.

=== ACCESSIBILITY BUG HUNTER REPORT ===

Original request: Audit this React checkout form for accessibility issues and create a Cursor prompt to fix it.

Component/page: React checkout form

UI pattern: Form, checkout flow, payment-adjacent workflow

Interpreted accessibility goal: Identify and fix accessibility barriers that could prevent users from completing checkout using keyboard, screen reader, or assistive technology.

Confirmed facts:

• The target is a React checkout form.
• The focus areas are labels, form errors, keyboard navigation, focus states, screen reader behavior, ARIA usage, loading states, and validation behavior.
• Existing checkout logic must be preserved.
• Unrelated files should not be rewritten.

Assumptions:

• The form contains required fields and validation.
• The form may include address, contact, shipping, or payment-related fields.
• The form may display loading and error states.

Unknowns to inspect:

• whether every input has a connected label
• whether error text is associated with invalid fields
• whether focus moves after failed submission
• whether disabled and loading states are announced
• whether all controls are keyboard operable
• whether ARIA is correct or unnecessary

Accessibility issue summary: Checkout forms are high-impact accessibility targets because inaccessible labels, validation errors, focus behavior, or keyboard support can prevent users from completing purchases or account actions.

Prioritized issues:

1. Missing or disconnected form labels

Severity: High

Affected users: Screen reader users, voice control users, users with cognitive disabilities

Why it matters: Users may not know what each field requires.

Recommended fix: Use explicit label elements connected to inputs with htmlFor/id. Do not rely on placeholder text as the only label.

Acceptance criteria: Every form control has a programmatically associated accessible name.

Testing method: Navigate with a screen reader or inspect the accessibility tree to confirm each field name is announced.

2. Error messages not associated with invalid fields

Severity: High

Affected users: Screen reader users, keyboard users, users with cognitive disabilities

Why it matters: Users may not know which field failed validation or how to fix it.

Recommended fix: Use aria-invalid="true" on invalid fields and connect error text with aria-describedby. Consider moving focus to the first invalid field or an error summary after failed submission.

Acceptance criteria: Each invalid field exposes its error message programmatically.

Testing method: Submit the form with empty required fields and verify that errors are announced or discoverable.

3. Weak focus visibility or unpredictable focus order

Severity: High

Affected users: Keyboard-only users and low-vision users

Why it matters: Users may lose track of their position in the form.

Recommended fix: Preserve or improve visible focus indicators and ensure tab order follows the visual and logical order.

Acceptance criteria: Every interactive element has a visible focus state and can be reached in logical order.

Testing method: Complete the form using only Tab, Shift+Tab, Enter, and Space.

Semantic HTML recommendations:

• Use form, label, input, select, textarea, button, fieldset, and legend where appropriate.
• Use button type="submit" for the submit action.
• Avoid clickable divs or spans for form actions.
• Use fieldset and legend for grouped radio buttons or checkboxes.

ARIA review:

• Use aria-invalid only when fields are invalid.
• Use aria-describedby for helper and error text.
• Use aria-live carefully for form-level success or error messages.
• Avoid redundant roles on native controls.
• Avoid aria-hidden on focusable elements.

Keyboard and focus review:

• All controls must be reachable by keyboard.
• Submit must work by keyboard.
• Focus should not be lost after validation.
• Focus should move predictably to the first invalid field or error summary.
• Loading state should not create a keyboard trap.

Form accessibility review:

• Required fields should be communicated in text.
• Helper text should be associated with relevant fields.
• Error text should be specific and actionable.
• Autocomplete attributes should be considered for name, email, address, postal code, and payment-adjacent fields when appropriate.

Dynamic content review:

• Loading state after submit should be communicated.
• Server errors should be visible and announced.
• Success state should be clear.
• Validation changes should not be overly noisy.

Remediation plan:

1. Inspect all form controls and connect labels.
2. Add IDs for helper text and error text.
3. Add aria-describedby where needed.
4. Add aria-invalid for invalid fields only.
5. Improve focus handling after failed submission.
6. Confirm submit/loading/disabled states are communicated.
7. Verify keyboard-only completion.
8. Add or recommend tests for labels, errors, focus, and submission behavior.

AI coding agent prompt: Inspect the React checkout form for accessibility issues before editing. Preserve existing checkout business logic, validation behavior, payment behavior, API calls, and styling conventions. Do not rewrite unrelated files. Prefer semantic HTML before ARIA. Ensure every form control has a connected label, invalid fields use aria-invalid only when invalid, helper and error text are connected with aria-describedby, and validation errors are visible and programmatically associated. Ensure keyboard users can reach and operate every control, visible focus states are preserved or improved, and focus moves predictably after failed submission. Communicate loading, disabled, success, and error states accessibly. Avoid unnecessary ARIA and do not expose sensitive payment or personal data. Add or recommend tests for labels, validation errors, keyboard submission, and focus behavior. Return files inspected, issues fixed, tests added or run, manual QA steps, and remaining risks.

Accessibility test plan:

• Complete the form using keyboard only.
• Confirm every input has an announced label.
• Submit with empty required fields.
• Confirm errors are associated with fields.
• Confirm focus moves predictably.
• Confirm focus indicator is visible.
• Confirm loading and disabled states are understandable.
• Confirm no console errors or broken validation behavior.
• Run existing tests if available.
• Perform a screen reader smoke test if possible.

Verification checklist:

• all form controls have accessible names
• errors are associated with invalid fields
• required fields are communicated
• focus is visible
• tab order is logical
• submit works by keyboard
• loading and error states are understandable
• ARIA is valid and not excessive
• existing checkout logic is unchanged

Compliance caution: This is a WCAG-aware remediation plan, not a legal compliance guarantee. Formal compliance requires manual testing, assistive technology testing, expert review, and jurisdiction-specific legal guidance.