Components with same functionality are identified consistently

When the same action is labeled differently across pages — 'Save' on one page, 'Submit' on another, 'X' vs 'Close' in modals — voice control users cannot reliably activate components by speaking the label they see, and screen reader users build an incorrect model of the interface. WCAG 2.2 SC 3.2.4 (Consistent Identification) is a Level AA requirement. The cost of inconsistency compounds with every repeated interaction for users who depend on assistive technology.

Extract shared interactive components into a single reusable source so their label and appearance cannot drift.

// components/CloseButton.tsx — single definition, no label variants
export function CloseButton({ onClose }: { onClose: () => void }) {
  return (
    <button
      onClick={onClose}
      aria-label="Close"
      className="..."
    >
      <XIcon aria-hidden="true" />
    </button>
  )
}

// Use the same component in modals, drawers, and overlays:
<CloseButton onClose={() => setOpen(false)} />

Audit the codebase for close, submit, delete, and save actions. Anywhere the same operation has different labels in different contexts, consolidate to the shared component.

• ID: accessibility-wcag.operable.consistent-identification

• Severity: high

• What to look for: Enumerate every relevant item. Find recurring components like buttons, links, or icons that perform the same function across different pages (e.g., "Submit", "Close", "Delete"). Verify they have the same label and appearance.

• Pass criteria: At least 1 of the following conditions is met. The same action is always labeled the same way and looks the same across all pages. Single-page applications with no repeated functional components automatically pass this check.

• Fail criteria: The same action is labeled differently on different pages (e.g., "Save" on one page, "Submit" on another for the same operation).

• Skip (N/A) when: The application has only one page and no reusable functional components that appear across multiple views. Single-page apps with a single functional context pass by default.

• Detail on fail: Example: "Close button in modal uses label 'X' on dashboard, 'Close' on pricing page, and 'Cancel' on settings page"

• Remediation: Create reusable components with consistent labels:

  // components/SubmitButton.tsx
  export function SubmitButton({ children = 'Submit' }) {
    return <button type="submit">{children}</button>
  }
  

  Use the same component everywhere to ensure consistency.