Foco cai no destino ao chegar de outra página; âncoras ignoram ?tipo=; movimento reduzido salta em todos os cliques; cronômetro da janela ampliada; degradê no topo de Projetos e legendas do mergulho com intervalos testados; vitrine acima da barra de cookies e com 2 paradas por projeto; reel-list.css no global; 3D montado em tarefas curtas, limitado a ~30 qps e estático com WebGL por software; pôsteres da vitrine de 330 para 158 KB; SC Plus regravado; scripts sem funções acima de complexidade 10.
33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { elementForHash } from "@/app/components/cinematic/fragment-nav";
|
|
|
|
/**
|
|
* 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.
|
|
* Quando a URL traz um `#id` que existe na página nova (de /privacidade para /#contact), o foco é do destino da
|
|
* âncora (quem chega a ele dá o foco); o contêiner não o toma, para o Tab seguir dali.
|
|
*/
|
|
export function useFocusOnNavigation(pathname: string) {
|
|
useEffect(() => {
|
|
const previous = shownPath;
|
|
shownPath = pathname;
|
|
if (previous === null || previous === pathname) return;
|
|
if (elementForHash(window.location.hash)) return;
|
|
document.getElementById("main-content")?.focus({ preventScroll: true });
|
|
}, [pathname]);
|
|
}
|