<pre></pre><h1>Component size vs Visual size</h1>
<p>Some example buttons for focus appearance comparing what happens when you measure the underlying component vs visually.</p>

<p class="alert">OLD, do not reference!</p>

<p><button class="example1">Button 1</button> - default, passes both</p>

<p><button class="example2">Button 2</button> - drop shadow extends visual size, but not component size. Passes 'component'; fails 'visual'.</p>

<p><button class="example3">Button 3</button> - outline offset (-3px) leads to fail measured both by component and visuals.</p>

<p><button class="example3 alt3">Button 3</button> - outline offset (+3px) leads to passes both by component and visuals.</p>

<p><span class="padding"><button class="example4">Button 4</button></span> - button wrapped in a span, the span is providing the background. Passes 'component'; fails 'visual'.</p>

<p><button class="example5"><span>Button 5</span></button> - background provided within the component, expanded hit area. Passes both.</p>

<p><button class="example5b"><span>Button 5b</span></button> - background provided within the component, and the outline goes around the inner span. (Grey dashed border shows the button size.) Passes visual, fails component.</p>

<p><button class="example6">Button 6</button> - large border radius.</p>

<p><button class="example7">Button 7</button> - small border radius.</p>

<p>Example grabbed from <a href="https://codepen.io/aardrian/pen/vYOGpXb">Adrian's block links article</a>. The link is the heading (which looks like a link), but the focus indicator goes around the whole card. Visually, what is the component? (Without a self-referencial "whatever the outline goes around!")</p>
<div>
<article class="block reorder">
    <h3><a href="https://example.com/re-ordered" rel="nofollow">Art Visually Above Heading</a></h3>
    <img src="https://placekitten.com/680/380" width="680" height="380" alt="Kitten resting against a scratching post.">
    <p>
      This looks perfect. Just Photoshop out the dog, add a baby, and make the curtains blue. There are more projects
      lined up; charge extra the next time. Can you make the logo bigger? Yes, bigger. Bigger still. The logo is too
      big.
    </p>

  </article>
  
  <article class="blockalt reorder">
    <h3><a href="https://example.com/re-ordered" rel="nofollow">Art Visually Above Heading</a></h3>
    <img src="https://placekitten.com/680/380" width="680" height="380" alt="Kitten resting against a scratching post.">
    <p>
      This looks perfect. Just Photoshop out the dog, add a baby, and make the curtains blue. There are more projects
      lined up; charge extra the next time. Can you make the logo bigger? Yes, bigger. Bigger still. The <a href="#">logo</a> is too
      big.
    </p>

  </article>
</div>

  <p>From a visual point of view, I find it impossible to evaluate these two 'card' examples without knowing what the interactive element is. The HTML for each is the same, but the first one uses CSS to increase the hit area and the second does not.</p>

<h2>Conclusion</h2>
<p>Most examples (in usage, not here) will match the component size and visuals. However, using the underlying component allows for the focus indicator to go around the text content, not the whole visual component (although that wouldn't be a problem to do so).</p>

<p>Also, the default focus indicator (outline) aligns with the component metric, therefore it is easier to test. You could outline everything with CSS, and then tab through to check for differences. e.g.</p>
<pre>a:not(:focus), button:not(:focus), input:not(:focus) {
    outline: 2px red solid !important;
}</pre>

<img class="screenshot" src="https://alastairc.uk/tmp/highlight-outlines.png" alt="Screenshot of this page, with red outlines of every interactive component.">