Enable outlines for features on :focus-visible (keyboard only)#498
Merged
prushforth merged 1 commit intoMaps4HTML:mainfrom Oct 4, 2021
Malvoz:features-focus-visible-outline
Merged
Enable outlines for features on :focus-visible (keyboard only)#498prushforth merged 1 commit intoMaps4HTML:mainfrom Malvoz:features-focus-visible-outline
outlines for features on :focus-visible (keyboard only)#498prushforth merged 1 commit intoMaps4HTML:mainfrom
Malvoz:features-focus-visible-outline
Conversation
Member
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
strokeandoutlineon: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"]:focusselector to the feature focus styles.Final result:
focus-visible-path-stroke-none-removed.mp4