Skip to content

Enable outlines for features on :focus-visible (keyboard only) #498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 4, 2021
Merged

Enable outlines for features on :focus-visible (keyboard only) #498

merged 1 commit into from
Oct 4, 2021

Conversation

Malvoz
Copy link
Member

@Malvoz Malvoz commented Jul 27, 2021

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 (using focus: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 and outline 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 generic path[tabindex="0"]:focus selector to the feature focus styles.

Final result:

focus-visible-path-stroke-none-removed.mp4

@Malvoz Malvoz requested a review from prushforth July 27, 2021 19:41
@prushforth prushforth merged commit 14375f2 into Maps4HTML:main Oct 4, 2021
@Malvoz Malvoz deleted the features-focus-visible-outline branch October 4, 2021 14:56
@prushforth
Copy link
Member

@Malvoz this commit reveals an untested regression. If you look at this page, it shows the tile boundaries, which it shouldn't. I'll open an issue for the regression, but can you take a look at a fix for this? Thanks!

@Malvoz Malvoz mentioned this pull request Oct 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants