Mirage: BGA styles

4.16 components.visually-hidden Visually hidden

Make an element visually hidden, but accessible to screen readers, etc.

Examples

Default styling

.visually-hidden--off

Turns off the visually-hidden effect.

.visually-hidden--focusable

Makes an element visually hidden by default, but visible when receiving focus.

.visually-hidden--focusable:focus

A focused, and visible, element.

Markup: components/visually-hidden/visually-hidden.twig

<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"visually-hidden </span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>
  </span><span class="hljs-template-variable">{{content}}</span><span class="xml">
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</span>

Source: components/visually-hidden/_visually-hidden.scss, line 1