Focus visible - testing new size metric (8th Jan 2021)

A few examples of focus styles, highlighting the difference for a thickness metric.

The new size metric being considered is:

Minimum area: The area of the focus indicator is either:

A key factor of the second metric is that it does not vary with the width of a wide control (or height of a narrow tall control).

In comparison to the current metric you can see the difference surface areas involved:

Example 1px perimeter 8px * shortest side 4px * shortest side 3px * shortest side
(of bounding box)
100px square 396px 800px 400px 300px
20px tall * 150px wide 336px 160px 80px 60px
100px radius 314px NA NA 300px
19px wide 25px tall 84px 171px 76px 57px


Example 1 - no border, adding dark outline (passes)

No visible border, adding a dark outline on focus.

Example 2 - 4px left border (passes)

Example 2b - 8px left border (passes current and over-passes proposed)

Dark button, adding a 8px dark outline on focus, which basically doubles the thickness:

Example 3 - dark border, light outline (passes)

150px wide, outline method:

Example 4 - left-hand indicator (passes)

Focus uses border-left-width: 4px:

Example 4b - left-hand indicator (NOT passing)

Focus uses border-left-width: 2px:

Example 5 (passes)

Focus uses border-width: 0 2px:

Example 5b (passes and more)

Focus uses border-width: 0 4px:

Example 5c (passes due to the new metric)

Focus uses border-width: 0 0 2px 0:

Example 6 (NOT passing)

Focus uses border-bottom-width: 2px:

Example 7 (passes)

Focus uses border-bottom-width: 4px:

More content to tab to.