fix: add visible focus state to actions menu for A11y

[benhammondmusic]

Description

This PR adds a visible focus state to the actions menu. This creates a more accessible experience for keyboard users who might be using the TAB key to navigate through websites, and matches the visual styling to the mouse user's "hover" state. More info on why this is required for accessibility reasons here: w3.org

Here is a screen recording showing behavior via keyboard and then via mouse for reference:

Specifically:

• removes outline: none which was preventing the browser's default focus indication on the <summary> element
• additionally adds the same highlighted styling that mouse users get on "hover" to the focused actions menu's collapsed <svg> and to each focused <a> option in the expanded menu

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

I have deployed a test react app here for testing: https://reverent-kilby-656ff9.netlify.app/ which uses my fork for vega-embed

This has been tested on the following browsers, which all show the expected styling and built-in browser focus ring when tabbed into focus using the keyboard, and proper display for normal click/touch to expand menu. Note: I have not been able to test on Windows, ChromeOS or Android.

Mac OS11

• Safari
• Chrome
• Firefox
• Edge

iOS

• Chrome
• Safari

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• My changes generate no new warnings (the only warning were already occurring on the next branch: The input spec uses Vega-Lite v4, but the current version of Vega-Lite is v5.2.0.)
• existing unit tests pass locally with my changes

[benhammondmusic]

@domoritz

[domoritz]

Thank you! This is a great improvement. I would like to make a few small tweaks before we merge, though.

First, can we only show the outline on the menu button when the user uses keyboard navigation? I don't like the look when it's activated with the mouse. Maybe focus-visible can work here.

Second, can you think of ways to support navigation with cursors in the popup menu? I noticed https://observablehq.com supports it in their menu.

The second isn't needed to merge, though.

[benhammondmusic]

Thank you! This is a great improvement. I would like to make a few small tweaks before we merge, though.

First, can we only show the outline on the menu button when the user uses keyboard navigation? I don't like the look when it's activated with the mouse. Maybe focus-visible can work here.

Second, can you think of ways to support navigation with cursors in the popup menu? I noticed https://observablehq.com supports it in their menu.

The second isn't needed to merge, though.

Happy to make changes; I think maybe what you're seeing as outline on the menu button using the mouse might be a browser thing since on all the browsers I checked the mouse didn't add a focus ring, only the keyboard (I added some mouse hovering at the end of my screen recording gif above). Can you let me know know what browser/OS configuration you saw that behavior in so I can test?

[domoritz]

Here is what I am seeing in Safari on macOS looking at http://localhost:3000/test-vl.html.

Screen.Recording.2022-01-18.at.12.07.21.mov

[benhammondmusic]

Updated:

• default browser ring isn't used on the <summary>
• default browser ring is used on the sub <a> menu options
• The summary svg receives the css "hover" styles on focus to indicate focus visually
• that highlight is removed if user tabs forward to a sub menu item.

Here are screen grabs of safari and chrome on mac

Screen.Recording.2022-01-18.at.10.25.11.PM.mov

Screen.Recording.2022-01-18.at.10.25.55.PM.mov

[benhammondmusic]

While we are at it, I believe the color contrast fails A11y as well; the measured color of the <svg> is #DADADA, which when I plugged it into a calculator https://webaim.org/resources/contrastchecker/ gives a contrast ratio of 1.39:1. "WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components"

Filed an issue #840

[domoritz]

Separate pull request. I suspect the contrast is too low when the menu button is faded out. I'm not sure we want to change that, though. Maybe we can detect if the user requests high contrast. Anyway, let's discuss in a separate pull request.

[domoritz]

Did you try focus-visible?

[benhammondmusic]

Did you try focus-visible?

I looked into it; it seems like Safari doesn't support it yet (there is a development implementation of it so it looks promising it will be adopted). But I couldn't get it to work.

[domoritz]

Ahh, I just played a bit more with it and focus-visible seems like the thing we really need. It was actually enabled in Webkit by default 6 weeks ago so it could come in the next Safari release https://trac.webkit.org/changeset/286783/webkit. I think we can just show the focus ring in Safari until they add support for focus-visible. I'll make a pull request and you can take a look.

[domoritz]

Here #841.

[domoritz]

I can't move the focus to the action menu in Firefox. How are you doing it?

[frankelavsky]

Hi @domoritz -- you can see a discussion about Tab navigation in Firefox on MacOS here. Firefox is actually respecting MacOS keyboard accessibility settings. I was able to recreate your navigation issue locally and then resolve it by following the settings outlined in that stack overflow article.

[domoritz]

Done in #841