Enable outline
s for features on :focus-visible
(keyboard only)
#498
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In #478 outlines were removed for both pointing device- and keyboard users because we introduced link-like styles for features (using
stroke
). However, because we can't (at least don't, atm) ensure sufficient contrast of strokes I think we should add back (or really not remove) outlines for keyboard users (usingfocus:not(:focus-visible)
), because currently it can be really hard to track what is being focused. @prushforth had some concerns around this in #478 (comment).These changes makes it easier for keyboard users to identify what they've focused, even if that means setting both
stroke
andoutline
on:focus-visible
(which wouldn't be desirable in a native implementation - only outline would be visible/change on focus in a standardized map viewer, so unless there's a way to "wrap" outlines to SVG shapes I think we have to go with this for now).Current styles on master branch:
feature-current--focus-styles.mp4
With these changes we're now showing outlines on keyboard focus:
focus-visible-path-stroke-none.mp4
Although not all focusable paths show an outline, had to remove
if(layer.outlinePath) p.path.style.stroke = "none"
, and add a very genericpath[tabindex="0"]:focus
selector to the feature focus styles.Final result:
focus-visible-path-stroke-none-removed.mp4