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.