Accessibility

import * as Dialog from '@radix-ui/react-dialog';

<Dialog.Content>
  {/* Automatically has role="dialog" */}
  {/* Automatically has aria-modal="true" */}
</Dialog.Content>

import * as Switch from '@radix-ui/react-switch';

<Switch.Root>
  {/* Automatically has role="switch" */}
  {/* Automatically has aria-checked="true|false" */}
</Switch.Root>

import * as Accordion from '@radix-ui/react-accordion';

<Accordion.Trigger>
  {/* aria-expanded="true|false" - managed automatically */}
  {/* aria-controls="content-id" - linked to content */}
  {/* aria-disabled="true" - when disabled prop is set */}
</Accordion.Trigger>

import * as Tabs from '@radix-ui/react-tabs';

<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger value="tab1">
      {/* aria-controls="panel-tab1" */}
      {/* aria-selected="true|false" */}
    </Tabs.Trigger>
  </Tabs.List>
  
  <Tabs.Content value="tab1">
    {/* role="tabpanel" */}
    {/* aria-labelledby="trigger-tab1" */}
  </Tabs.Content>
</Tabs.Root>

import * as Dialog from '@radix-ui/react-dialog';
import { useRef } from 'react';

function SearchDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Search</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Content>
          {/* Focus automatically moves here when dialog opens */}
          <input type="text" placeholder="Search..." autoFocus />
          {/* Focus is trapped - Tab only cycles through dialog content */}
          {/* Focus returns to trigger when dialog closes */}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

import * as Toast from '@radix-ui/react-toast';

<Toast.Root>
  <Toast.Title>Success</Toast.Title>
  <Toast.Description>
    {/* Screen readers announce this automatically */}
    Your changes have been saved.
  </Toast.Description>
</Toast.Root>

import * as Dialog from '@radix-ui/react-dialog';

<Dialog.Content>
  {/* Title is used as aria-labelledby */}
  <Dialog.Title>Delete Account</Dialog.Title>
  
  {/* Description is used as aria-describedby */}
  <Dialog.Description>
    This action cannot be undone. This will permanently delete your account.
  </Dialog.Description>
</Dialog.Content>

import * as VisuallyHidden from '@radix-ui/react-visually-hidden';

function IconButton() {
  return (
    <button>
      <CloseIcon />
      <VisuallyHidden.Root>
        Close dialog
      </VisuallyHidden.Root>
    </button>
  );
}

import * as Label from '@radix-ui/react-label';
import * as Switch from '@radix-ui/react-switch';

function FormField() {
  return (
    <div>
      <Label.Root htmlFor="airplane-mode">
        Airplane mode
      </Label.Root>
      <Switch.Root id="airplane-mode">
        <Switch.Thumb />
      </Switch.Root>
    </div>
  );
}

import * as Checkbox from '@radix-ui/react-checkbox';

<div>
  <Checkbox.Root required id="terms">
    <Checkbox.Indicator>
      <CheckIcon />
    </Checkbox.Indicator>
  </Checkbox.Root>
  <label htmlFor="terms">
    I agree to the terms <span aria-label="required">*</span>
  </label>
</div>

import * as Form from '@radix-ui/react-form';

function EmailField() {
  return (
    <Form.Field name="email">
      <Form.Label>Email</Form.Label>
      <Form.Control type="email" required />
      <Form.Message match="valueMissing">
        Please enter your email
      </Form.Message>
      <Form.Message match="typeMismatch">
        Please enter a valid email
      </Form.Message>
    </Form.Field>
  );
}

/* Ensure focus indicators are visible */
.button:focus-visible {
  outline: 2px solid blue;
  outline-offset: 2px;
}

/* Don't remove focus indicators */
.button:focus {
  /* ❌ Never do this */
  outline: none;
}

import * as Toast from '@radix-ui/react-toast';

<Toast.Viewport>
  {/* Toast automatically uses role="status" or role="alert" */}
  <Toast.Root>
    <Toast.Description>
      {/* Announced to screen readers automatically */}
      File uploaded successfully
    </Toast.Description>
  </Toast.Root>
</Toast.Viewport>

import * as Dialog from '@radix-ui/react-dialog';

function AccessibleDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open Settings</Dialog.Trigger>
      <Dialog.Portal>
        {/* Overlay prevents interaction with background */}
        <Dialog.Overlay className="dialog-overlay" />
        <Dialog.Content>
          {/* Always include title */}
          <Dialog.Title>Settings</Dialog.Title>
          
          {/* Always include description */}
          <Dialog.Description>
            Manage your application preferences
          </Dialog.Description>
          
          {/* Content */}
          <form>{/* ... */}</form>
          
          {/* Provide a way to close */}
          <Dialog.Close aria-label="Close">×</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

import * as Tooltip from '@radix-ui/react-tooltip';

function AccessibleTooltip() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger aria-label="Settings">
          <SettingsIcon />
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content>
            {/* Tooltip content is announced to screen readers */}
            Application settings
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}

import * as Dialog from '@radix-ui/react-dialog';
import { forwardRef } from 'react';

interface CustomDialogProps {
  title: string;
  description: string;
  children: React.ReactNode;
}

export const CustomDialog = forwardRef<
  HTMLDivElement,
  CustomDialogProps
>(({ title, description, children }, forwardedRef) => {
  return (
    <Dialog.Content ref={forwardedRef}>
      {/* Always include title and description */}
      <Dialog.Title>{title}</Dialog.Title>
      <Dialog.Description>{description}</Dialog.Description>
      {children}
    </Dialog.Content>
  );
});