<p>Testing to see what the default behaviors are around button/link focus styles.</p>

<h2>default button</h2>
<div>
  <button>button</button>
</div>
<ul>
  <li>shows focus style on tab:
    <ul>
      <li>chrome (mac): yes ✅</li>
      <li>firefox (mac): yes ✅</li>
      <li>safari: yes ✅</li>
    </ul>
  </li>
  <li>shows focus style on click:
    <ul>
      <li>chrome (mac): no ❌ when browser zoom is 100%, otherwise yes ✅</li>
      <li>firefox (mac): no ❌</li>
      <li>safari: no ❌</li>
    </ul>
  </li>
</ul>

<h2>custom button</h2>
<div>
  <button class="custom">button</button>
</div>
<ul>
  <li>shows focus style on tab
    <ul>
      <li>chrome (mac): yes ✅</li>
      <li>firefox (mac): yes ✅</li>
      <li>safari: yes ✅</li>
    </ul>
  </li>
  <li>shows focus style on click:
    <ul>
      <li>chrome (mac): yes ✅</li>
      <li>firefox (mac): no ❌</li>
      <li>safari: yes ❌</li>
    </ul>
  </li>
</ul>

<h2>default link</h2>
<div>
  <a href="#">link</a>
</div>
<ul>
  <li>shows focus style on tab
    <ul>
      <li>chrome (mac): yes ✅</li>
      <li>firefox (mac): yes ✅</li>
      <li>safari: yes ✅</li>
    </ul>
  </li>
  <li>shows focus style on click:
    <ul>
      <li>chrome (mac): no ❌</li>
      <li>firefox (mac): no ❌</li>
      <li>safari: no ❌</li>
    </ul>
  </li>
</ul>

<h2>custom link</h2>
<div>
  <a href="#" class="custom">link</a>
</div>
<ul>
  <li>shows focus style on tab
    <ul>
      <li>chrome (mac): yes ✅</li>
      <li>firefox (mac): yes ✅</li>
      <li>safari: yes ✅</li>
    </ul>
  </li>
  <li>shows focus style on click:
    <ul>
      <li>chrome (mac): yes ✅</li>
      <li>firefox (mac): yes ✅</li>
      <li>safari: no ❌</li>
    </ul>
  </li>
</ul>

.custom:focus {
  outline: 2px solid black;
}