VisuallyHidden

Panoramica

VisuallyHidden esegue il rendering di uno span visivamente nascosto. Il suo contenuto rimane nell’albero di accessibilità e può fornire un nome accessibile. Accetta le props native di span, un ref di span e la composizione render di Base UI. Importa VisuallyHiddenProps dallo stesso punto di ingresso.

Utilizzo

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>
);

Usa un’etichetta visibile quando lo spazio lo consente. Per i controlli che accettano già aria-label, tale attributo è un altro modo per fornire un nome accessibile.

Contenuto nascosto

Inserisci il testo di supporto all’interno del wrapper. Evita di inserire al suo interno controlli attivabili con lo stato attivo: il wrapper rimane visivamente nascosto quando i relativi elementi figlio ricevono lo stato attivo. Non aggiunge un’area live, non rimuove i contenuti dalla tecnologia assistiva e non nasconde dati riservati. Usa id per associare descrizioni nascoste a aria-describedby. Gli attributi nativi, className, style e ref si applicano allo span nascosto o all’elemento fornito tramite render. Consulta accessibilità per i modelli di etichettatura e annuncio.

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.

Sviluppatori

App

API

Auto-ospitazione

Contribuire

Libreria UI

Panoramica

Utilizzo

Contenuto nascosto

Props

​Panoramica

​Utilizzo

​Contenuto nascosto

​Props

Panoramica

Utilizzo

Contenuto nascosto

Props