Le problème des routes virtuelles

Quand vous naviguez sur un site classique, le chargement d'une nouvelle page remet le focus tout en haut du document. Sur une SPA (React, Vue, Next.js), le changement de page est une illusion visuelle.

Si un utilisateur clique sur un lien en bas de page pour aller vers "Contact", et que la page change visuellement mais que son focus reste en bas... il est perdu.

La solution : usePathname & useRef

Dans Next.js, nous devons forcer le focus à remonter ou à aller sur le titre principal (h1).

// Exemple simplifié d'un composant Layout
'use client';
import { usePathname } from 'next/navigation';
import { useEffect, useRef } from 'react';

export default function Layout({ children }) {
  const pathname = usePathname();
  const mainRef = useRef(null);

  useEffect(() => {
    // On met le focus sur le main wrapper à chaque changement de route
    mainRef.current?.focus();
    // On remonte le scroll
    window.scrollTo(0, 0);
  }, [pathname]);

  // tabIndex="-1" permet de donner le focus programmatique à une div/main
  return (
    <main ref={mainRef} tabIndex={-1} className="outline-none">
      {children}
    </main>
  );
}

C'est une petite attention technique qui change tout pour la navigation au clavier.