Accessibility
as a Constraint

1// Before: Manual ARIA (error-prone)
2function Dialog({ title, children, onClose }) {
3  const dialogRef = useRef();
4  const previousFocus = useRef();
5 
6  useEffect(() => {
7    previousFocus.current = document.activeElement;
8    dialogRef.current?.focus();
9 
10    const handleKeyDown = (e) => {
11      if (e.key === 'Escape') onClose();
12    };
13    document.addEventListener('keydown', handleKeyDown);
14 
15    return () => {
16      previousFocus.current?.focus();
17      document.removeEventListener('keydown', handleKeyDown);
18    };
19  }, []);
20 
21  return (
22    <div ref={dialogRef} role="dialog" tabIndex={-1}>
23      <h2>{title}</h2>
24      {children}
25    </div>
26  );
27}
28 
29// Missing:
30// - Focus trap (Tab exits dialog)
31// - aria-labelledby connection
32// - Click outside handling
33// - Body scroll lock
34// - Focus restoration fails if element unmounted

1// After: @a13y/react
2import { AccessibleDialog } from '@a13y/react';
3 
4function Dialog({ title, children, isOpen, onClose }) {
5  return (
6    <AccessibleDialog
7      isOpen={isOpen}
8      onClose={onClose}
9      title={title}  // Required by type system
10    >
11      {children}
12    </AccessibleDialog>
13  );
14}
15 
16// Includes automatically:
17// ✓ Focus trap with Tab/Shift+Tab cycling
18// ✓ Focus restoration (handles unmounted elements)
19// ✓ Escape key handling
20// ✓ Click-outside to close
21// ✓ Proper aria-labelledby / aria-describedby
22// ✓ Body scroll lock
23// ✓ Development-time validation