Selector de idioma

Código

Copiar el marcado

import "@luz-ds/catalog/components/lang-switch.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/lang-switch.min.css" integrity="sha384-/CoO68kAJcVIGedf4xHY5JsMuUcSTkQs3MhJyc+jKvjJO1IN62ztsedeqNDvsVUj" crossorigin="anonymous">

Un enlace por idioma, a la misma página en ese idioma, en la cabecera de cada página traducida. En cada página, marca el idioma actual con aria-current="page" y escribe la etiqueta en el idioma de la página.

<luz-lang-switch>
  <button class="luz-lang-switch__button" type="button" popovertarget="lang-menu">
    <span class="u-sr-only">Language: </span><span class="luz-lang-switch__name">English</span>
  </button>
  <nav class="luz-lang-switch__menu" id="lang-menu" popover aria-labelledby="lang-title">
    <p class="luz-lang-switch__title" id="lang-title">Language</p>
    <ul class="luz-lang-switch__list">
      <li><a class="luz-lang-switch__link" href="/" hreflang="en" lang="en" aria-current="page">English</a></li>
      <li><a class="luz-lang-switch__link" href="/es/" hreflang="es" lang="es">Español</a></li>
      <li><a class="luz-lang-switch__link" href="/ar/" hreflang="ar" lang="ar">العربية</a></li>
    </ul>
  </nav>
</luz-lang-switch>

Variantes y opciones

No hay variantes. Una propiedad personalizada coloca la lista.

Cómo funciona

Cambiar de idioma implica ir a otra página, así que el selector es una lista de enlaces. El botón la abre con el popovertarget nativo y @luz-ds/catalog solo le da estilo: no hay ningún script.

<luz-lang-switch> es una etiqueta que ningún script define; solo da un nombre al bloque en el marcado y en CSS, y no añade ningún rol: el significado lo aportan el botón y nav.

• Cada idioma se nombra en ese mismo idioma, con lang para que lo pronuncie un lector de pantalla y hreflang para indicar el idioma del enlace.
• La lista es un popover en la capa superior, fijo bajo la cabecera al final de la línea; se refleja en texto de derecha a izquierda.
• La propia página declara su idioma y dirección: <html lang="ar" dir="rtl">. Añade un <link rel="alternate" hreflang="…"> por idioma en el <head> para que los buscadores encuentren las demás versiones.
• Core cambia el texto en árabe a la sans serif del sistema y elimina el espaciado entre letras: la serif no tiene caracteres árabes y el espaciado rompe las ligaduras de la escritura.

Sin JavaScript

Nada cambia: el botón abre la lista con la API de popover y los enlaces siguen siendo enlaces. En navegadores sin la API de popover, el botón se oculta y los enlaces se muestran en una fila.

Teclado y ARIA

Pulsa Tab hasta el botón y Enter o Espacio para abrir la lista; Tab recorre los idiomas y Enter sigue el enlace seleccionado. Escape o un clic fuera cierra la lista.

• El navegador indica a las tecnologías de asistencia si la lista está abierta mediante popovertarget.
• El nombre del botón es «Idioma: English»: primero qué es y luego el texto visible (WCAG 2.5.3). Por debajo de 360 px solo se ve el globo, pero el nombre no cambia.
• El idioma actual es un enlace con aria-current="page".

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Úsalo en sitios cuyas páginas estén disponibles en dos o más idiomas, en el mismo lugar de la cabecera de cada página traducida.

Cuándo no usarlo

No lo añadas a páginas disponibles en un solo idioma, aunque el resto del sitio esté traducido.

• No elijas el idioma por el lector según los ajustes del navegador o su ubicación: deja que lo elija y enlaza cada página con sus otras versiones.
• No lo uses para traducir la página en el sitio mediante un script: cada idioma tiene su propia página y dirección.

No sustituye nada de LUZ. Hace innecesario usar un <select> con un script que cambie la dirección.

Qué hacer y qué no

Cómo escribir el contenido

Escribe el nombre de cada idioma como lo escriben sus hablantes: «English», «Español», «العربية», nunca «EN» ni una bandera.

• Escribe la etiqueta en el idioma de la página: «Language», «Idioma», «اللغة».
• Muestra los idiomas en el mismo orden en todas las páginas.
• Si algunas páginas no están traducidas, enlaza a la página traducida más cercana e indica en su idioma que el resto está en otro idioma.

Contraste y foco

El botón está sobre la página; la lista es una superficie elevada con borde y sombra.

Calculado a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo necesario es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.

• Foco: un contorno --luz-focus-ring de 2 px, por fuera del botón y justo por dentro de cada enlace, para que las esquinas redondeadas de la lista nunca lo recorten.
• El idioma actual aparece en negrita y subrayado, no solo con un color.

Tokens que usa

Los 20 tokens que leen las reglas de components/lang-switch.css del catálogo, agrupados por familia. Cada familia enlaza a su página, con los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color

--luz-brand-primary, --luz-divider, --luz-focus-ring, --luz-surface, --luz-surface-hover, --luz-surface-muted, --luz-text-muted, --luz-text-primary, --luz-text-secondary

Spacing and sizing

--luz-control-lg, --luz-space-2xs, --luz-space-xs, --luz-space-sm, --luz-space-md

Typography

--luz-font-sans, --luz-text-sm, --luz-text-md

Radius

--luz-radius-md

Shadows

--luz-shadow-md

Layout and breakpoints

--luz-bar-h

El teclado y ARIA están en la pestaña Código.