Defina o idioma e a direção do documento no servidor. Renderize <html lang={locale} dir={direction}> a partir da rota para que tecnologias assistivas, o algoritmo bidirecional do navegador e os estilos :lang() recebam os valores corretos já na primeira renderização na tela. Não detecte a localidade no código de cliente após a hidratação.
Rótulos dos componentes
Passe os textos traduzidos pela prop labels do componente. Rótulos com contagens usam modelos de texto como "{index} of {count}"; passe locale ao formatar números. formatLabel substitui marcadores de posição nomeados e formata valores numéricos com Intl.NumberFormat.
Direção e posicionamento
A direção vem do dir do elemento no DOM. O comportamento do teclado usa resolveDirection(element) para acompanhar essa direção; uma prop de direção explícita pode substituí-la. O side de Popup é físico (top, bottom, left, right). O align de Popup é lógico (start, center, end), portanto acompanha a direção da escrita.
Tratamento personalizado do teclado
Se um campo usa IME, espere a composição terminar antes de tratar teclas de navegação. Verifique isComposingKeyEvent(event) antes de responder a Enter, setas ou Escape; isso também abrange navegadores que informam o código de tecla 229 após o fim da composição.
Tipografia e alternativa de idioma
A folha de estilos seleciona fontes e quebras de linha adequadas a cada sistema de escrita por meio de :lang(). Substitua --font-sans-ja, --font-sans-zh-hans ou --font-sans-ar quando sua aplicação fornecer fontes próprias. Envolva os textos em inglês não traduzidos com lang="en" dir="ltr" para preservar a pronúncia em inglês, a seleção de fontes e a ordem do texto dentro de outra localidade.