Accessibility

// Example: Focus-visible styling in UIBlox components
// All interactive elements have clear focus indicators

<Button>
  Click me
</Button>
// Focus ring appears on keyboard navigation (Tab)
// but not on mouse click (focus-visible behavior)

// CSS applied automatically:
// focus-visible:outline-none
// focus-visible:ring-2
// focus-visible:ring-[#3d9fdf]
// focus-visible:ring-offset-2

// Good: Icon + color + text for error state
<div className="flex items-center gap-2 text-red-400">
  <AlertCircleIcon className="h-4 w-4" aria-hidden="true" />
  <span>Please enter a valid email address</span>
</div>

// Good: Success state with multiple indicators
<Alert variant="success">
  <CheckCircleIcon className="h-4 w-4" aria-hidden="true" />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Your changes have been saved.</AlertDescription>
</Alert>

// Bad: Color only (avoid this)
<span className="text-red-500">Invalid input</span>

// Complete accessible form example
function ContactForm() {
  const [errors, setErrors] = useState({});

  return (
    <form aria-label="Contact form" noValidate>
      {/* Input with label and description */}
      <div className="space-y-2">
        <label htmlFor="name" className="text-sm font-medium text-white">
          Full name <span className="text-red-400" aria-hidden="true">*</span>
          <span className="sr-only">(required)</span>
        </label>
        <Input
          id="name"
          type="text"
          required
          aria-required="true"
          aria-invalid={errors.name ? "true" : "false"}
          aria-describedby={errors.name ? "name-error" : undefined}
        />
        {errors.name && (
          <p id="name-error" className="text-sm text-red-400" role="alert">
            {errors.name}
          </p>
        )}
      </div>

      {/* Checkbox with proper labeling */}
      <div className="flex items-center gap-2">
        <Checkbox
          id="terms"
          aria-describedby="terms-description"
        />
        <label htmlFor="terms" className="text-sm text-[#e2e8f0]">
          I agree to the terms and conditions
        </label>
      </div>
      <p id="terms-description" className="sr-only">
        By checking this box, you agree to our terms of service and privacy policy.
      </p>

      {/* Select with proper labeling */}
      <div className="space-y-2">
        <label htmlFor="country" className="text-sm font-medium text-white">
          Country
        </label>
        <Select
          id="country"
          options={countries}
          placeholder="Select your country"
          aria-required="true"
        />
      </div>

      {/* Submit with loading state */}
      <Button
        type="submit"
        disabled={isSubmitting}
        aria-busy={isSubmitting}
      >
        {isSubmitting ? "Submitting..." : "Submit"}
      </Button>
    </form>
  );
}

// Screen reader utilities in UIBlox

// Visually hidden but announced by screen readers
<span className="sr-only">
  Opens in a new window
</span>

// Hide decorative elements from screen readers
<svg aria-hidden="true" className="h-4 w-4">
  {/* decorative icon */}
</svg>

// Announce dynamic content
<div aria-live="polite" aria-atomic="true">
  {statusMessage}
</div>

// Skip link for keyboard users (add to your layout)
<a
  href="#main-content"
  className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4
             focus:z-50 focus:px-4 focus:py-2 focus:bg-[#1a73b5] focus:text-white
             focus:rounded-lg"
>
  Skip to main content
</a>