VisuallyHidden
VisuallyHidden
요소를 시각적으로 숨기되 화면 판독기(screen readers)에는 접근 가능하게 유지하는 유틸리티 컴포넌트예요.
출처: 문서
본문
사용법 (Usage)
VisuallyHidden은 콘텐츠를 시각적으로 숨기지만 화면 판독기에는 남겨 두는 유틸리티 컴포넌트예요.
예를 들어 ActionIcon 컴포넌트와 함께 사용할 수 있어요.
import { HeartIcon } from '@phosphor-icons/react';
import { ActionIcon, VisuallyHidden } from '@mantine/core';
function Demo() {
return (
<ActionIcon size="xl" variant="filled" color="red" aria-label="Like post">
<HeartIcon size={20} />
<VisuallyHidden>Like post</VisuallyHidden>
</ActionIcon>
);
}