native-like styles for interactive features

[Malvoz]

• Add stroke to interactive features on :hover (in conjunction to :focus). This enables users to see the entire hit area of the interactive feature that is being hovered.
• Remove the fixed stroke-width: 5 (currently applied on :focus) such that the highlighting inherits (and does not override) the initial stroke-width of a feature.
• Remove outline on :focus as imposed by our outline reset because stroke takes care of the highlighting of interactive features, no need to also have an additional outline.
• Remove stroke animations. In the spirit of the W3C TAG guidelines for custom components we should keep styles to a bare minimum. If authors want animations they should implement it themselves (even though I'm aware author-provided CSS is not yet supported).

Comparison

Interaction steps as displayed in the videos below:

1. Hover Norway, Sweden, Finland, Russia with the mouse
2. Focus Russia with the keyboard

Before feature-styles-before.mp4

After feature-styles-after.mp4

Thoughts? Personally, I'm not sure about:

• Add stroke to interactive features on :hover (in conjunction to :focus). This enables users to see the entire hit area of the interactive feature that is being hovered.

I think it's a nice addition and makes it clear where the clickable area of an interactive feature is, but it may also feel "chatty". Either way, the highlighting of features may be subject to user-preferences: #297.

[Malvoz]

I've pushed 769e145 to use the LinkText system color for highlighting interactive features (if supported, else fall back to black), so the videos above are not accurate in terms of the stroke color on focus/hover.

This makes features more link- or button-like in terms of highlighting, and the color may vary depending on the OS.

It'd be nice if we could ensure that these "highlight strokes" always have sufficient contrast, but I'm not sure there's a proper way to do that in CSS. color-contrast() may help, but that's not supported in any browsers atm I think, so I'm not sure it'd work as I imagine.

[prushforth]

I think this works. As you say, we'll need to support prefs, somehow.

[prushforth]

I'll merge 'soon', but the PE demo will break if I merge now.

[Malvoz]

Pushed bd668e8 to use the #0000EE color as a fallback instead of #000000 as it is the color specified for :link in phrasing content under UA presentational hints.

[prushforth]

This is good work. I'm pretty sure I pushed Ahmad to include the thick black highly visible stroke on focus (maybe not the animation, though). I do like the addition to hover. Fully agree we don't need both the stroke and the outline; the stroke alone is good information, although sometimes you might miss a teeny outlier piece of the geometry without the outline. I also appreciate that each <feature> hover/focus stroke is rendered with the link color unless otherwise specified by the author, giving us the natural idea that there is something potentially link-ish about all features.