Accessibility Features

<summary
  aria-controls={`${id}-accordion-children`}
  aria-expanded={open}
  className="..."
  id={`${id}-label`}
>
  {/* Accordion trigger content */}
</summary>

<div
  aria-labelledby={`${id}-label`}
  id={`${id}-accordion-children`}
  role="region"
>
  {children}
</div>

<ul
  role="tablist"
  aria-label={ariaLabel ?? "Tabs"}
>
  <li
    role="tab"
    aria-selected={isActive}
    aria-controls={`panel-${tabIds[i]}`}
    tabIndex={isActive ? 0 : -1}
  >
    {title}
  </li>
</ul>

<div
  role="tabpanel"
  aria-labelledby={tabIds[i]}
  aria-hidden={!isActive}
  tabIndex={isActive ? 0 : -1}
>
  {content}
</div>

<TooltipBaseUI.Trigger
  aria-label={ariaLabel}
  onClick={handleClick}
>
  {children}
</TooltipBaseUI.Trigger>

const ariaLabel = useMemo(() => {
  if (isInteractive) {
    return undefined; // Interactive elements have their own labels
  }
  
  if (title && description) {
    return `${title}: ${description}`;
  }
  
  return title || description;
}, [title, description, isInteractive]);

<div
  aria-hidden="true"
  className="absolute top-5 right-5"
>
  <ArrowUpRight className="size-4" />
</div>

<button
  aria-label={name || `Color ${currentColor}`}
  aria-pressed={state === "copied"}
  aria-roledescription={state === "copied" ? "Copied" : "Copy"}
>
  {/* Color swatch */}
</button>

const handleKeyDown = (e: KeyboardEvent, currentIndex: number) => {
  if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
    e.preventDefault();
    const newIndex = e.key === "ArrowLeft"
      ? (currentIndex - 1 + tabCount) % tabCount
      : (currentIndex + 1) % tabCount;
    handleTabClick(newIndex);
    tabRefs.current[newIndex]?.focus();
  } else if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    handleTabClick(currentIndex);
  } else if (e.key === "Home") {
    e.preventDefault();
    handleTabClick(0);
    tabRefs.current[0]?.focus();
  } else if (e.key === "End") {
    e.preventDefault();
    handleTabClick(lastIndex);
    tabRefs.current[lastIndex]?.focus();
  }
};

<details
  open={open}
  onToggle={(e) => handleToggle(e)}
>
  <summary>{title}</summary>
  {children}
</details>

<a
  aria-label="Navigate to header"
  href={`#${encodeURIComponent(id)}`}
  onClick={(e) => {
    e.preventDefault();
    copyAnchorLink();
  }}
>
  <LinkIcon />
</a>

"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"

"rounded-sm focus-visible:outline-none focus-visible:ring-2 "
"focus-visible:ring-primary focus-visible:ring-offset-2"

tabIndex={isActive ? 0 : -1}

const hasHover = useHasHover();

const handleOpenChange = (nextOpen: boolean, eventDetails) => {
  if (hasHover) {
    setOpen(nextOpen);
  } else if (reason === "escape-key" || reason === "outside-press") {
    setOpen(false);
  }
};

<div role="list">
  <div role="listitem">
    {/* Step content */}
  </div>
</div>

<div role="region" aria-labelledby="accordion-label">
  {/* Accordion content */}
</div>

const variantConfig = {
  info: {
    icon: InfoIcon,
    defaultAriaLabel: "Info",
  },
  warning: {
    icon: WarningIcon,
    defaultAriaLabel: "Warning",
  },
  danger: {
    icon: DangerIcon,
    defaultAriaLabel: "Danger",
  },
};

<Callout variant="warning">
  Important message
</Callout>
// Announces: "Warning: Important message"

// Decorative icon hidden from screen readers
<ChevronRightIcon aria-hidden="true" />

// Content hidden from screen readers
<div aria-hidden={!isActive}>
  {inactiveContent}
</div>

colorVariants: {
  blue: "[--color-text:#133A9A] dark:[--color-text:#7196F4]",
  green: "[--color-text:#166E3F] dark:[--color-text:#6AE1A1]",
  red: "[--color-text:#9A1C13] dark:[--color-text:#F08B85]",
}

<button
  type="button"
  disabled={disabled}
  className={cn(
    "cursor-pointer transition-opacity hover:opacity-80",
    "data-disabled:cursor-not-allowed",
    "focus-visible:outline-none focus-visible:ring-2"
  )}
>
  {content}
</button>

<a
  href={href}
  className="
    focus-visible:outline-none 
    focus-visible:ring-2 
    focus-visible:ring-primary 
    focus-visible:ring-offset-2
  "
>
  {cta}
</a>