18. Accessibility w React

// ŹLE: div soup — niewidomy nie wie co to jest
function BadNav() {
  return (
    <div className="nav">
      <div className="nav-item" onClick={goHome}>Strona główna</div>
      <div className="nav-item" onClick={goProducts}>Produkty</div>
    </div>
  );
}

// DOBRZE: semantyczny HTML
function GoodNav() {
  return (
    <nav aria-label="Nawigacja główna">
      <ul>
        <li><a href="/">Strona główna</a></li>
        <li><a href="/products">Produkty</a></li>
      </ul>
    </nav>
  );
}

function Modal({ isOpen, onClose, title, children }) {
  const firstFocusable = useRef(null);

  useEffect(() => {
    if (isOpen) {
      firstFocusable.current?.focus();  // Focus wchodzi do modala
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      onKeyDown={e => e.key === 'Escape' && onClose()}
    >
      <h2 id="modal-title">{title}</h2>
      <button ref={firstFocusable}>Pierwsze działanie</button>
      {children}
      <button onClick={onClose}>Zamknij</button>
    </div>
  );
}