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 を追加することは、これを行う簡単な方法です。