WCAG 2.2 AA & RGAA 4 components — with audit documentation

Accessible usage

import { KonformButton } from "@konform/ui";

// ✅ Primary — default accessible button
<KonformButton>Submit form</KonformButton>

// ✅ Icon-only with aria-label
<KonformButton aria-label="Close dialog" variant="ghost">
  <CloseIcon aria-hidden="true" />
</KonformButton>

// ✅ Loading state with status announcement
<KonformButton loading loadingText="Saving your changes">
  Save
</KonformButton>

Accessible usage

import { KonformInput } from "@konform/ui";

// ✅ Standard input with label association
<KonformInput
  id="email"
  label="Email address"
  type="email"
  placeholder="you@example.com"
/>

// ✅ Required with error message
<KonformInput
  id="name"
  label="Full name"
  required
  error="This field is required."
/>

Accessible usage

import { KonformModal } from "@konform/ui";

// ✅ Focus trap + ARIA dialog + Escape to close
<KonformModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Confirm action"
  description="This action cannot be undone."
  footer={
    <KonformButton onClick={() => setIsOpen(false)}>
      Confirm
    </KonformButton>
  }
>
  <p>Are you sure you want to proceed?</p>
</KonformModal>