<title>Top Stories | Vocal</title>

<nav>
  
  <ul>
    …
  </ul>
</nav>

<a class="selected" href="/top-stories">Top Stories</a>

mainRef.current.focus()

<nav aria-labelledby="main-navigation" role="navigation">
  <h2 id="main-navigation">Main navigation</h2>
  <ul>
    …
  </ul>
</nav>

<a aria-current="page" href="/top-stories">Top Stories</a>

<label>
  Email address
</label>

<span>
  Please enter a valid email address
</span>

<input
  class="has-error"
/>

emailRef.current.focus()

<label for="email">
  Email address
</label>

<span id="email-error">
  Please enter a valid email address
</span>

<input
  id="email" type="email"
  aria-describedby="email-error" aria-invalid="true"
/>

<button
  type="button"
  class="pressed"
>
  <svg>…</svg>
</button>

<button
  type="button"
>
  <svg>…</svg>
</button>

<button
  type="button"
  aria-label="View as a grid"
  aria-pressed="true"
>
  <svg aria-hidden="true">…</svg>
</button>

<button
  type="button"
  aria-label="View as a list"
  aria-pressed="false"
>
  <svg aria-hidden="true">…</svg>
</button>

<button
  type="button"
  aria-label="View as a grid"
  aria-pressed="false"
>
  <svg aria-hidden="true">…</svg>
</button>

<button
  type="button"
  aria-label="View as a list"
  aria-pressed="true"
>
  <svg aria-hidden="true">…</svg>
</button>

<div>
  Added to your Cart
</div>

<button
  type="button"
  aria-label="Add Nintendo Switch to your Cart"
>
  Add to Cart
</button>

<button
  type="button"
>
  Add to Cart
</button>

<div role="alert">
  <span aria-hidden="true">Added to your Cart</span>
  <span class="visually-hidden">
    Nintendo Switch has been added to your Cart
  </span>
</div>