web-accessibility

# Web Accessibility (WCAG 2.1) Build accessible web applications that work for everyone. ## ARIA Patterns ### Button ```tsx <button type="button" aria-pressed={isPressed} aria-disabled={isDisabled} onClick={handleClick} > Toggle Feature </button> ``` ### Modal Dialog ```tsx <div role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description" > <h2 id="modal-title">Confirm Action</h2> <p id="modal-description">Are you sure you want to proceed?</p> <button onClick={onConfirm}>Confirm</button> <button onClick={onCancel}>Cancel</button> </div> ``` ### Navigation Menu ```tsx <nav aria-label="Main navigation"> <ul role="menubar"> <li role="none"> <a role="menuitem" href="/home">Home</a> </li> <li role="none"> <button role="menuitem" aria-haspopup="true" aria-expanded={isOpen} > Products </button> {isOpen && ( <ul role="menu" aria-label="Products submenu"> <li role="none"> <a role="menuitem" href="/products/new">New</a> </li> </ul> )} </li> </ul> </nav> ``` ## Keyboard Navigation ### Focus Management ```tsx import { useEffect, useRef } from 'react'; function Modal({ isOpen, onClose, children }) { const modalRef = useRef<HTMLDivElement>(null); const previousFocus = useRef<HTMLElement | null>(null); useEffect(() => { if (isOpen) { previousFocus.current = document.act...