Focus appearance testing

Hi everyone,

A little conversation started at the end of the last meeting about how to test focus-appearance. We had been talking about ‘intrinsic’ size (based on the component) and considering target-size as a measure.

Gundula raised visual size as a way of testing, which I have to admit bewildered me because I thought that would be the hardest way to evaluate a focus indicator.

To support discussion (hopefully on the Friday call), I created a little test page to show the differences between using the underlying element size, and the visual size:
https://codepen.io/alastc/full/eYGoKyP


There is obviously no perfect answer, we’re looking for the approach with the least common oddities.

As I was thinking about this, it occurred to me that a simple bit of CSS could be used to show what the default outline size would be (which wraps the border-box). You could then tab through the page looking for indicators which don’t meet that size. (Screenshot in the page above.)

Kind regards,

-Alastair

--

@alastc / www.nomensa.com<http://www.nomensa.com>