A few examples of focus styles, highlighting the issues with default indicators, and generally compiling test-cases.
There are a few documented examples of where the default focus styles really fall down, including the more recent updates. Adriand Roselli highlighted some in Avoid default browser focus styles.
Default controls before the examples.
, Link, , , , .
Video controls:
Area with overflow:
An area with content that overflows, which in some (all?) browsers triggers a focusable area.
The following need to be viewed in the browser to see the issues.
, Link,
A link with white text link on a white background. (Firefox uses currentColor to define the outline color). And another one in case you missed that: link. (Only the foreground of the text-link and it's background are changed, not the outline.)
A link on a grey / patterned background: Link, borrowed from Adrian Roselli.
A dark button: , , .
An input with a dark background:
, just added after noticing the border radius example below barely changes in Edge/Chrome.
There were questions about what basis to take the size from. E.g. target size, component size (in the HTML), visual size.
Conceptually, some key examples are:
, the component appears larger than the default outline.
, less area than the default outline.
, a bounding box measure would make an outline not pass.
, a less extreme version.
, we have allowed for this type of indicator as it creates extra size,
for example the same thing can appear reasonable with different hues: (background
to outline contrast = 2.2 ∶ 1).
, checking the maths of the exception.
, checking the maths of the exception.
i, One character (e.g. i) with a thick bottom border.
.
.
.
.
plus 1px outline.
plus 1px outline, but with solid background.
but with solid background and 2px outline.
A link which breaks over a couple of lines:
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.