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:

• at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused control;
• at least as large as a 4 CSS pixels border along the shortest side, and no thinner than 2 CSS pixels.

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:

Outlines

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

No visible border, adding a dark outline on focus.

Example 1 Example 1 Example 1 Example 1

Example 2 - 4px left border (passes)

Example 2 Example 2 Example 2 Example 2

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 2 Example 2 Example 2 Example 2

Example 3 - dark border, light outline (passes)

150px wide, outline method:

Example 3 Example 3 Example 3 Example 3

Example 4 - left-hand indicator (passes)

Focus uses border-left-width: 4px:

Example 4
Example 4
Example 4
Example 4

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

Focus uses border-left-width: 2px:

Example 4b
Example 4b
Example 4b
Example 4b

Example 5 (passes)

Focus uses border-width: 0 2px:

Example 5
Example 5
Example 5
Example 5

Example 5b (passes and more)

Focus uses border-width: 0 4px:

Example 5
Example 5
Example 5
Example 5

Example 5c (passes due to the new metric)

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

Example 5
Example 5
Example 5
Example 5

Example 6 (NOT passing)

Focus uses border-bottom-width: 2px:

i i i i

Example 7 (passes)

Focus uses border-bottom-width: 4px:

i i i i

More content to tab to.