use dual focus indicator

[mayank99]

the readme claims "Accessible, consistent focus outlines."

this is actually not true, as different browsers have a different idea of what Highlight entails. moreover, even within browsers that do have a consistent idea of Highlight, they will not be perfect alone if the background doesn't have enough contrast.

a dual Canvas+CanvasText focus indicator works more consistently and has a better chance of being always accessible. it will always adapt to the color-scheme (light or dark) and will also have maximum contrast. basically the 3px CanvasText outline is surrounded by a 1px Canvas shadow on both sides, avoiding contrast issues with the element's background or the page background.

combined, these styles should pass WCAG SC 1.4.11, 2.4.7, 2.4.12, 2.4.13 in most cases

i initially didn't want to use box-shadow because many elements bring their own box-shadow. but with the current appraoch, the outline is always present, so we have a "fallback" of sorts, even if the box-shadow gets removed by the developer or in forced-colors.