Evandro Fonseca Junior
6ac87824f3
Legenda do mergulho até Projetos cobrir a cena; transição de página sem blur e com fundo escuro; foco no conteúdo ao trocar de página; listas com marcador e dois pesos de título; vídeos da SEV e da SC Plus regravados sem quadros brancos; scrub a 12-15 fps (-30%); vitrine com uma parada de Tab e setas, contador no celular e CSS sob demanda; âncoras num módulo só (fragment-nav); FramePulse com setInterval; CSS morto removido.
29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
/**
|
|
* Caminho já exibido neste documento. Fica fora do componente porque o template da raiz remonta quando o primeiro
|
|
* segmento da rota muda (de / para /cases), e a carga inicial precisa seguir distinta de uma troca de página.
|
|
*/
|
|
let shownPath: string | null = null;
|
|
|
|
/** Os testes reproduzem vários documentos dentro de um só. */
|
|
export function resetFocusOnNavigation() {
|
|
shownPath = null;
|
|
}
|
|
|
|
/**
|
|
* Depois de uma troca de página no navegador (o `pathname` mudou), o foco vai para o contêiner do conteúdo
|
|
* (`#main-content`, o mesmo destino do link "Pular"): leitor de tela e teclado seguem da página nova, não do link
|
|
* clicado na antiga. Sem rolar a página (preventScroll) e sem nada na carga inicial, que não tem página anterior.
|
|
*/
|
|
export function useFocusOnNavigation(pathname: string) {
|
|
useEffect(() => {
|
|
const previous = shownPath;
|
|
shownPath = pathname;
|
|
if (previous === null || previous === pathname) return;
|
|
document.getElementById("main-content")?.focus({ preventScroll: true });
|
|
}, [pathname]);
|
|
}
|