Bileşenler

VisuallyHidden

İçeriği gözden gizler, ekran okuyucuya açık tutar.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Yalnız ikonlu düğme

İkon süstür (aria-hidden); düğmenin adını gizli metin verir. Ekran okuyucu “Kapat, düğme” der.

import { Icon, VisuallyHidden } from '@bigbang/ui';

export default function IconButton() {
  return (
    <button type="button" className="inline-flex size-10 items-center justify-center rounded-md border border-line-default">
      <Icon name="x" />
      <VisuallyHidden>Kapat</VisuallyHidden>
    </button>
  );
}

Atlama bağlantısı

focusable içerik odak aldığında görünür. Klavye kullanıcısı Tab ile bağlantıya gelir ve ana içeriğe atlar.

Bu örneğe Tab ile ulaşın; bağlantı odakta görünür.

import { Text, VisuallyHidden } from '@bigbang/ui';

export default function SkipLink() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Text size="sm" tone="subtle">
        Bu örneğe Tab ile ulaşın; bağlantı odakta görünür.
      </Text>
      <VisuallyHidden focusable render={<a href="#main" className="rounded-md bg-surface-raised px-md py-xs text-fg-link" />}>
        İçeriğe geç
      </VisuallyHidden>
    </div>
  );
}

Tablo başlığı

render={<caption />} tabloya görünmez bir ad verir.

Öğe listesi
Öğe	Değer
Metin örneği	Metin örneği

import { VisuallyHidden } from '@bigbang/ui';

export default function TableCaption() {
  return (
    <table className="type-body-md text-fg-default">
      <VisuallyHidden render={<caption />}>Öğe listesi</VisuallyHidden>
      <thead>
        <tr>
          <th className="pe-xl text-start">Öğe</th>
          <th className="text-start">Değer</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td className="pe-xl">Metin örneği</td>
          <td>Metin örneği</td>
        </tr>
      </tbody>
    </table>
  );
}

Arama alanı etiketi

Görünür etiketi olmayan bir alana gizli etiket verir. Yer tutucu etiket yerine geçmez.

import { VisuallyHidden } from '@bigbang/ui';

export default function SearchLabel() {
  return (
    <label className="flex items-center gap-sm">
      <VisuallyHidden>Ara</VisuallyHidden>
      <input type="search" placeholder="Ara" className="type-body-md h-10 rounded-md border border-line-default bg-surface-raised px-md" />
    </label>
  );
}