Accessibility

import { Box } from '@twilio-paste/core/box';
import { Text } from '@twilio-paste/core/text';

function AccessibleContent() {
  return (
    <Box backgroundColor="colorBackground" padding="space60">
      <Text color="colorText">
        This text has sufficient contrast (WCAG AA compliant)
      </Text>
    </Box>
  );
}

import { Button } from '@twilio-paste/core/button';
import { Modal } from '@twilio-paste/core/modal';

function KeyboardAccessibleModal() {
  const [isOpen, setIsOpen] = React.useState(false);
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Open Modal (Enter/Space)
      </Button>
      
      <Modal 
        isOpen={isOpen} 
        onDismiss={() => setIsOpen(false)}
        ariaLabelledby="modal-heading"
      >
        <ModalHeader>
          <ModalHeading id="modal-heading">
            Accessible Modal
          </ModalHeading>
        </ModalHeader>
        <ModalBody>
          Tab to navigate, Escape to close
        </ModalBody>
      </Modal>
    </>
  );
}

import { Button } from '@twilio-paste/core/button';
import { Menu } from '@twilio-paste/core/menu';

function ScreenReaderFriendlyMenu() {
  return (
    <Menu>
      <MenuButton 
        variant="primary"
        aria-haspopup="true"
      >
        Actions
      </MenuButton>
      <MenuList aria-label="Actions menu">
        <MenuItem>Edit</MenuItem>
        <MenuItem>Delete</MenuItem>
        <MenuItem>Archive</MenuItem>
      </MenuList>
    </Menu>
  );
}

import { AlertDialog } from '@twilio-paste/core/alert-dialog';
import { Button } from '@twilio-paste/core/button';

function FocusManagedDialog() {
  const [isOpen, setIsOpen] = React.useState(false);
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Delete Item
      </Button>
      
      <AlertDialog
        isOpen={isOpen}
        onConfirm={() => {
          // Delete logic
          setIsOpen(false);
        }}
        onDismiss={() => setIsOpen(false)}
        heading="Confirm Deletion"
      >
        Are you sure you want to delete this item?
      </AlertDialog>
    </>
  );
}

import { Heading } from '@twilio-paste/core/heading';
import { Text } from '@twilio-paste/core/text';
import { Button } from '@twilio-paste/core/button';

function SemanticStructure() {
  return (
    <article>
      <Heading as="h1" variant="heading10">
        Article Title
      </Heading>
      <Text as="p">
        Paragraph content with proper semantic markup.
      </Text>
      <Button as="button" type="button">
        Submit
      </Button>
    </article>
  );
}

import { Label } from '@twilio-paste/core/label';
import { Input } from '@twilio-paste/core/input';
import { HelpText } from '@twilio-paste/core/help-text';

function AccessibleForm() {
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState('');
  
  return (
    <Box>
      <Label htmlFor="email" required>
        Email Address
      </Label>
      <Input
        id="email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        aria-describedby="email-help email-error"
        hasError={!!error}
      />
      <HelpText id="email-help">
        We'll never share your email.
      </HelpText>
      {error && (
        <HelpText id="email-error" variant="error">
          {error}
        </HelpText>
      )}
    </Box>
  );
}

import { Button } from '@twilio-paste/core/button';
import { PlusIcon } from '@twilio-paste/icons/esm/PlusIcon';
import { CloseIcon } from '@twilio-paste/icons/esm/CloseIcon';

function AccessibleIcons() {
  return (
    <>
      {/* Decorative icon - hidden from screen readers */}
      <Button variant="primary">
        <PlusIcon decorative />
        Add Item
      </Button>
      
      {/* Icon-only button - needs aria-label */}
      <Button 
        variant="secondary" 
        size="icon"
        aria-label="Close"
      >
        <CloseIcon decorative={false} title="Close" />
      </Button>
    </>
  );
}

import { Anchor } from '@twilio-paste/core/anchor';

function AccessibleLinks() {
  return (
    <>
      {/* Good: Descriptive link text */}
      <Anchor href="/docs/getting-started">
        Read the Getting Started guide
      </Anchor>
      
      {/* Avoid: Non-descriptive text */}
      {/* Click <Anchor href="/docs">here</Anchor> for docs */}
    </>
  );
}

import { Alert } from '@twilio-paste/core/alert';
import { Toast } from '@twilio-paste/core/toast';

function AccessibleAlerts() {
  return (
    <>
      {/* Alert with proper role */}
      <Alert variant="success">
        <strong>Success!</strong> Your changes have been saved.
      </Alert>
      
      {/* Toast notifications use aria-live */}
      <Toast variant="success">
        File uploaded successfully
      </Toast>
    </>
  );
}

# Install axe-core for accessibility testing
npm install --save-dev @axe-core/react

import React from 'react';

if (process.env.NODE_ENV !== 'production') {
  const axe = require('@axe-core/react');
  axe(React, ReactDOM, 1000);
}

import { useThemeContrastCheck } from '@twilio-paste/core/theme';

function ContrastChecker() {
  const {
    textContrastRating,
    numberOfTextFailures,
    totalFailures,
  } = useThemeContrastCheck();
  
  if (totalFailures > 0) {
    console.warn(`Found ${totalFailures} contrast failures`);
  }
  
  return null;
}

import { Theme } from '@twilio-paste/core/theme';

function App() {
  return (
    <Theme.Provider theme="default" disableAnimations>
      <YourApp />
    </Theme.Provider>
  );
}