Add skip link

[marcinkrzeminski]

It's an a11y good practice to have a skip link.

It's might look like something like this:

templates/layout/base.twig

<a class="u-screen-reader-text" href="#content">
  {{ __('Skip to content', 'text-domain') }}
</a>

...
...

<main id="content" aria-label="{{ __('Content', 'text-domain') }}">
  {% block content %}
    {{ __('Sorry, no content', 'text-domain') }}
  {% endblock %}
</main>

src/styles/utilities/_hide.scss

.u-screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;

  &:focus {
    background-color: lighten($color-grey-very-light, 10%);
    clip: auto;
    clip-path: none;
    color: $color-black;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
  }
}