Technique - Two color focus indicator

[alastc]

Draft technique from @DavidMacDonald, preview version.

[detlevhfischer]

Step 1: Load a page with light and dark interactive elements and/or light and dark backgrounds

As the test should generally apply to any page I think this request is unnecessary / potentially misleading.

The thought has crossed my mind if this Technique would be more useful for authors if it demonstrated a more targeted application of that focus style - e.g., scoped to main - I guess in many cases authors opting for this approach will choose other means of indicating focus for some parts of the page, such as navigation menus.

[alastc]

Good points Detlev, I did a couple of updates including:

• Changing the description to use a background color rather than contrast with the button. From testing various methods, for an color outside the component, it is the background that matters more than the color of the component.
• Added a missing quote that sorted out the styling in the bottom half.
• Updating the procedure to be more inline with previous examples such as G195.
• Moved the working example into the repo.

Preview V2.

It occurred to me that this test has to be quite specific, it is not testing for 2.1.1, and we are assuming that a dual indicator has sufficient contrast, so there is no need for a specific contrast check...

@DavidMacDonald it says that you can't apply two colors via outline, you can apply multiple box-shadows, e.g. this power-focus styles gist I created for stylus.

Any objection to using something like that? We could combine it with outline rather than using multiple box-shadows if you prefer. I just thought it might be useful to apply a two-outline style approach as well as a dashed-border approach.

[DavidMacDonald]

@alastc I added Alastair's example.