Building Accessible React Components: A Senior Developer's Guide

// ❌ Poor accessibility
<div onClick={handleClick}>Click me</div>

// ✅ Accessible approach
<button onClick={handleClick} aria-label="Submit form">
  Click me
</button>

const SearchInput = ({ onSearch }) => {
  const [query, setQuery] = useState('');
  const searchId = useId();

  return (
    <div role="search">
      <label htmlFor={searchId} className="sr-only">
        Search projects
      </label>
      <input
        id={searchId}
        type="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        aria-describedby={`${searchId}-description`}
        placeholder="Search projects..."
      />
      <div id={`${searchId}-description`} className="sr-only">
        Enter keywords to search through project titles and descriptions
      </div>
    </div>
  );
};

const DropdownMenu = ({ items, onSelect }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [focusedIndex, setFocusedIndex] = useState(-1);

  const handleKeyDown = (e) => {
    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        setFocusedIndex(prev => 
          prev < items.length - 1 ? prev + 1 : 0
        );
        break;
      case 'ArrowUp':
        e.preventDefault();
        setFocusedIndex(prev => 
          prev > 0 ? prev - 1 : items.length - 1
        );
        break;
      case 'Enter':
      case ' ':
        e.preventDefault();
        if (focusedIndex >= 0) {
          onSelect(items[focusedIndex]);
          setIsOpen(false);
        }
        break;
      case 'Escape':
        setIsOpen(false);
        break;
    }
  };

  return (
    <div className="dropdown">
      <button
        aria-expanded={isOpen}
        aria-haspopup="listbox"
        onClick={() => setIsOpen(!isOpen)}
        onKeyDown={handleKeyDown}
      >
        Select an option
      </button>
      {isOpen && (
        <ul role="listbox" onKeyDown={handleKeyDown}>
          {items.map((item, index) => (
            <li
              key={item.id}
              role="option"
              aria-selected={index === focusedIndex}
              className={index === focusedIndex ? 'focused' : ''}
              onClick={() => onSelect(item)}
            >
              {item.name}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

const StatusBadge = ({ status, children }) => {
  const statusConfig = {
    success: {
      color: 'text-green-800',
      bg: 'bg-green-100',
      icon: '✓',
      ariaLabel: 'Success'
    },
    error: {
      color: 'text-red-800',
      bg: 'bg-red-100',
      icon: '✗',
      ariaLabel: 'Error'
    },
    warning: {
      color: 'text-yellow-800',
      bg: 'bg-yellow-100',
      icon: '⚠',
      ariaLabel: 'Warning'
    }
  };

  const config = statusConfig[status];

  return (
    <span
      className={`inline-flex items-center px-2 py-1 rounded-full text-sm font-medium ${config.color} ${config.bg}`}
      role="status"
      aria-label={`${config.ariaLabel}: ${children}`}
    >
      <span aria-hidden="true" className="mr-1">
        {config.icon}
      </span>
      {children}
    </span>
  );
};

import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
import { SearchInput } from './SearchInput';

expect.extend(toHaveNoViolations);

describe('SearchInput Accessibility', () => {
  test('should not have any accessibility violations', async () => {
    const { container } = render(
      <SearchInput onSearch={jest.fn()} />
    );
    
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  test('should be keyboard navigable', () => {
    const onSearch = jest.fn();
    const { getByRole } = render(<SearchInput onSearch={onSearch} />);
    
    const input = getByRole('searchbox');
    fireEvent.keyDown(input, { key: 'Enter' });
    
    expect(onSearch).toHaveBeenCalled();
  });
});

const Modal = ({ isOpen, onClose, children }) => {
  const modalRef = useRef(null);
  const previousFocusRef = useRef(null);

  useEffect(() => {
    if (isOpen) {
      previousFocusRef.current = document.activeElement;
      modalRef.current?.focus();
      
      // Trap focus within modal
      const handleKeyDown = (e) => {
        if (e.key === 'Escape') {
          onClose();
        }
        
        if (e.key === 'Tab') {
          trapFocus(e, modalRef.current);
        }
      };
      
      document.addEventListener('keydown', handleKeyDown);
      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        previousFocusRef.current?.focus();
      };
    }
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div
      className="modal-overlay"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
    >
      <div
        ref={modalRef}
        className="modal-content"
        tabIndex={-1}
      >
        {children}
      </div>
    </div>
  );
};