<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content</p>
  </article>
</main>

<button onClick={handleClick}>Click me</button>

<div onClick={handleClick}>Click me</div>
<div role="button" tabIndex={0}>Click me</div>

<Button aria-label="Close dialog">
  <XIcon />
</Button>

<Input
  type="email"
  aria-label="Email address"
  aria-required="true"
  aria-invalid={hasError}
/>

<nav aria-label="Breadcrumb">
  <Breadcrumb />
</nav>

<aside aria-label="Sidebar navigation">
  <Sidebar />
</aside>

<Field>
  <FieldLabel htmlFor="password">Password</FieldLabel>
  <Input
    id="password"
    type="password"
    aria-describedby="password-help password-error"
  />
  <FieldDescription id="password-help">
    Must be at least 8 characters
  </FieldDescription>
  {error && (
    <FieldError id="password-error">
      {error}
    </FieldError>
  )}
</Field>

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

// For important updates
<div aria-live="assertive" aria-atomic="true">
  {errorMessage}
</div>

<Button
  aria-pressed={isActive}
  aria-expanded={isOpen}
  aria-disabled={isDisabled}
>
  Toggle
</Button>

<Dialog open={isOpen}>
  <DialogContent aria-modal="true">
    {/* Dialog content */}
  </DialogContent>
</Dialog>

// Custom button component
<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={handleKeyDown}
  aria-pressed={isPressed}
>
  Custom Button
</div>

// Loading state
<div role="status" aria-live="polite">
  Loading...
</div>

// Progress indicator
<div role="progressbar" aria-valuenow={progress} aria-valuemin={0} aria-valuemax={100}>
  {progress}%
</div>

// Components automatically include focus styles
<Button className="focus-visible:ring-2 focus-visible:ring-ring">
  Button
</Button>

<form>
  <Input type="text" autoFocus /> {/* First field */}
  <Input type="email" />          {/* Second field */}
  <Button type="submit">Submit</Button> {/* Submit button */}
</form>

// Dialog component handles focus trapping automatically
<Dialog open={isOpen}>
  <DialogContent>
    {/* Focus is trapped within dialog */}
    <Input autoFocus />
    <Button>Close</Button>
  </DialogContent>
</Dialog>

useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      openCommandMenu();
    }
  };

  window.addEventListener("keydown", handleKeyDown);
  return () => window.removeEventListener("keydown", handleKeyDown);
}, []);

const handleKeyDown = (e: React.KeyboardEvent) => {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    handleClick();
  }
  if (e.key === "Escape") {
    handleClose();
  }
};

<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={handleKeyDown}
>
  Click me
</div>

<a
  href="#main-content"
  className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4"
>
  Skip to main content
</a>

<main id="main-content">
  {/* Main content */}
</main>

// ✅ Good contrast
<div className="bg-primary text-primary-foreground">
  {/* Primary colors have sufficient contrast */}
</div>

// ❌ Check custom colors
<div className="bg-[#cccccc] text-[#ffffff]">
  {/* Verify contrast ratio */}
</div>

// ❌ Bad - Color only
<span className="text-red-500">Error</span>

// ✅ Good - Color + icon/text
<span className="text-destructive">
  <AlertCircle /> Error: Invalid input
</span>

// Form field with error
<Input
  aria-invalid="true"
  className="border-destructive"
  aria-describedby="error-message"
/>
<span id="error-message" className="text-destructive">
  <AlertCircle /> This field is required
</span>

// ✅ Good
<button onClick={handleClick}>Click me</button>

// ❌ Bad
<div role="button" onClick={handleClick}>Click me</div>

// Base HTML is accessible
<form action="/api/submit" method="POST">
  <Input name="email" type="email" required />
  <Button type="submit">Submit</Button>
</form>

// JavaScript enhances with better UX
const handleSubmit = async (e) => {
  e.preventDefault();
  // Enhanced submission
};

// ✅ Good
<Button aria-label="Delete user account for [email protected]">
  <TrashIcon />
</Button>

// ❌ Bad
<Button aria-label="Delete">
  <TrashIcon />
</Button>

<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input
    id="email"
    type="email"
    aria-invalid={hasError}
    aria-describedby={hasError ? "email-error" : undefined}
  />
  {hasError && (
    <FieldError id="email-error" role="alert">
      {errorMessage}
    </FieldError>
  )}
</Field>

{isLoading ? (
  <div role="status" aria-live="polite">
    <Spinner aria-label="Loading data" />
    <span className="sr-only">Loading...</span>
  </div>
) : (
  <DataTable data={data} />
)}

// Focus first field in modal
<Dialog open={isOpen}>
  <DialogContent>
    <Input autoFocus /> {/* Focus on open */}
  </DialogContent>
</Dialog>

// Return focus on close
const handleClose = () => {
  setIsOpen(false);
  // Focus returns to trigger button automatically
};

// Screen reader only
<span className="sr-only">Additional context</span>

// Visually hidden but accessible
<div className="sr-only focus:not-sr-only">
  Skip to content
</div>

// Truly hidden
<div aria-hidden="true">
  Decorative content
</div>