Visualmente oculto

Resumen

VisuallyHidden representa un span oculto visualmente. Su contenido permanece en el árbol de accesibilidad y puede proporcionar un nombre accesible. Acepta props nativas de span, una ref de span y composición de Base UI con render. Importe VisuallyHiddenProps desde el mismo punto de entrada.

”Uso”

import { Button } from 'twenty-ui/primitives/input';
import { VisuallyHidden } from 'twenty-ui/primitives/accessibility';
import { IconPlus } from 'twenty-ui/icon';

type AddRecordActionProps = { onAdd: () => void };

export const AddRecordAction = ({ onAdd }: AddRecordActionProps) => (
  <Button onClick={onAdd}>
    <IconPlus aria-hidden />
    <VisuallyHidden>Add record</VisuallyHidden>
  </Button>
);

Use una etiqueta visible cuando el espacio lo permita. Para los controles que ya aceptan aria-label, ese atributo es otra forma de proporcionar un nombre accesible.

Contenido oculto

Coloque texto complementario dentro del contenedor. Evite colocar controles que puedan recibir el foco dentro de él: el contenedor permanece visualmente oculto cuando sus elementos secundarios reciben el foco. No añade una región activa, no elimina contenido de la tecnología de asistencia ni oculta datos confidenciales. Use id para asociar descripciones ocultas con aria-describedby. Los atributos nativos, className, style y ref se aplican al span oculto o al elemento proporcionado mediante render. Consulte accesibilidad para ver patrones de etiquetado y anuncio.

”Props”

ReactNode

Content hidden visually while remaining available to assistive technology.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

Element or render function composed with the hidden span props and ref.

Desarrolladores

Aplicaciones

API

Autoalojamiento

Contribuir

Biblioteca de IU

Resumen

”Uso”

Contenido oculto

”Props”

​Resumen

​”Uso”

​Contenido oculto

​”Props”

Resumen

”Uso”

Contenido oculto

”Props”