VisuallyHidden（视觉隐藏）

VisuallyHidden 是一个用于渲染视觉上隐藏但会在辅助设备上显示的文本的组件，例如屏幕阅读器。

用法

import { VisuallyHidden } from '@wordpress/components';

function Example() {
    return (
        <VisuallyHidden>
            <label>Code is Poetry</label>
        </VisuallyHidden>
    );
}

最佳实践

VisuallyHidden 渲染的元素具有 position: absolute 样式。使用此组件时，请注意 堆叠上下文。尽管 VisuallyHidden 不可见，但它仍可能影响布局。一个例子是，VisuallyHidden 可能会忽略祖先元素的 overflow 样式，因为它采用了其堆叠上下文的 overflow。一个已知的副作用是可能出现意外的滚动条。要修复此类问题，请在 VisuallyHidden 更直接的父级上引入堆叠上下文。添加 position: relative 通常是一种简单的方法。