VisuallyHidden

Hides its content from sight, and keeps it for screen readers, such as the name of a button that shows only a mark.

<script>
  import Button from '@brumate/ui/Button.brm';
  import VisuallyHidden from '@brumate/ui/VisuallyHidden.brm';
  import Icon from '../../src/components/Icon.brm';
</script>

<Button class="ui-button ui-icon-button">
  <Icon name="close" />
  <VisuallyHidden>Close</VisuallyHidden>
</Button>

as renders another element, such as as="a" for a link that skips to the content.
With focusable, the content shows while it has focus.