Accesibilidad

@lh-ui/react comparte con el resto de bibliotecas de la familia el mismo contrato de accesibilidad: etiquetas semánticas, atributos ARIA e interacción de teclado están definidos en @lh-ui/share/core, y todas las plataformas los implementan de forma idéntica. Esta biblioteca garantiza además que no aparezcan las trampas de a11y habituales del ecosistema React.

Semántica y ARIA

• LhSwitch renderiza <div role="switch" aria-checked>, y no un checkbox disfrazado visualmente
• LhSelect el activador es role="combobox", el panel desplegado es role="listbox", las opciones son role="option", y el resaltado de teclado se sincroniza con aria-activedescendant
• LhDialog es role="dialog" aria-modal; el título ofrece a la vez un respaldo de aria-label y la asociación precisa de aria-labelledby
• LhTooltip vincula la sugerencia al activador con aria-describedby
• LhTag, cuando es clicable, pasa a role="button" y responde a Enter / Space
• LhFormItem renderiza el mensaje de error como role="alert" cuando falla la validación, y establece aria-invalid

Interacción de teclado

Componente	Teclas
LhButton / LhTag	Enter / Space disparan el clic
LhSwitch	Enter / Space conmutan
LhSelect	ArrowUp / ArrowDown resaltan opciones, Enter selecciona, Escape cierra
LhDialog	Escape cierra (solo responde la capa superior de la pila)
LhTooltip	Escape cierra

Cuando se superponen varias capas emergentes, useLhOverlayStack mantiene una pila del orden de apertura y Escape solo cierra la capa superior, evitando que una sola pulsación cierre todas las capas.

Gestión del foco

• LhDialog, al abrirse, usa useLhFocusTrap para mantener el foco dentro del diálogo (Tab / Shift+Tab no escapan); al cerrarse, el foco vuelve al activador
• LhFormItem, al hacer clic en la label, enfoca el primer elemento enfocable del área de contenido (focusControl), porque el comportamiento nativo de envolver con una label no es fiable en controles compuestos

Iconos decorativos

LhIcon es decorative por defecto: emite aria-hidden="true" y permanece invisible para los lectores de pantalla. Cuando se necesita semántica, se pasa decorative={false} + ariaLabel:

<LhIcon name="search" decorative={false} ariaLabel="Buscar" />

En ese caso se renderiza <svg role="img" aria-label="Buscar">.

Seguridad en StrictMode

Todos los componentes son seguros bajo React StrictMode: la limpieza de los efectos y el montaje repetido se tratan de forma idempotente (registro / desmontaje de la pila de capas, comprobación del titular del bloqueo de desplazamiento, liberación del focus trap).

Coherencia de la familia

El comportamiento de accesibilidad está registrado en docs/设计语言基线.md y constituye el contrato unificado de ambas líneas de sangre (web / nativa). Todas las plataformas lo implementan a partir de la misma lógica de @lh-ui/share/core, con atributos aria y semántica de teclas idénticos.