Yugen UI

VisuallyHidden

VisuallyHidden ẩn nội dung khỏi màn hình nhưng vẫn để trình đọc màn hình đọc được.

Áp class sr-only. Dùng asChild để gộp vào phần tử có sẵn; focusable để hiện lại khi nhận focus (skip link). Hằng visuallyHiddenClass dùng được trực tiếp trong className.

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { VisuallyHidden } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Nhấn Tab để thấy nút ẩn.

Skip link (focusable)

Nhấn Tab vào khung ví dụ: nút ẩn hiện ra khi nhận focus.

Bản phát hành 2.0 đã có. Đọc thêm về bản phát hành 2.0

Bổ sung ngữ cảnh cho liên kết

Người nhìn thấy "Đọc thêm"; trình đọc màn hình nghe "Đọc thêm về bản phát hành 2.0".

Cách dùng

Nên
  • Dùng cho nhãn của nút chỉ icon, chú thích bảng, ngữ cảnh liên kết.
  • Đặt focusable cho skip link.
Không nên
  • Không ẩn nội dung tương tác (trừ skip link focusable).
  • Không thêm cho phần tử đã có nhãn hiển thị — trình đọc màn hình sẽ đọc hai lần.

Props

Prop · KiểuMặc địnhMô tả
asChildbooleanMặc định: falseGộp class sr-only vào phần tử con thay vì render <span>.
focusablebooleanMặc định: falseHiện lại khi phần tử (hoặc con) nhận focus.
visuallyHiddenClass"sr-only"Mặc định: —Hằng class để dùng trực tiếp.