[SpeedDial] items should be accessible by tab key

[brianchirls]

For accessibility by users with screen readers or who for whatever reason cannot use a mouse or touch, these items should be usable by keyboard combinations.

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

You should be able to tab to the FAB and then navigate by keyboard to the action icons, which can then in turn be activated with the Enter key.

Current Behavior

You can tab to the FAB, and the action buttons become visible. But if you try to move around with arrow keys or tab, the FAB is deselected. There is no way to reach the action buttons.

Examples

The behavior can be tested on the component demo page

Context

I'm trying to build an accessible web app. For comparison, here's another implementation that behaves a little better in this respect. https://codepen.io/jh3y/pen/NNegMz

For reference, see this quick guide to testing keyboard accessibility: https://a11yproject.com/posts/navigate-using-just-your-keyboard/

[mbrookes]

@brianchirls The logic is there from the original implementation, but a subsequent PR must have broken it.

Do you want to try and fix it? You could always git bisect to narrow down when it stopped working if it isn't immediately obvious from the code.

[brianchirls]

I did notice some tabIndex stuff in the code that indicated it should have been in there. So, yeah good call on bisect.

I'm on deadline and won't have time to dive into the code for probably at least three weeks. So if someone else would like to take a crack at it in the meantime, please go ahead.

[mbrookes]

The problem was introduced in #10843. I'm amazed the problem hasn't been noticed sooner!

Cc: @shssoichiro any ideas?

[brianchirls]

@mbrookes I noticed some other funkiness happening with Tooltips. I wonder if they're related issues. I'll try to isolate those and file separately when I can in the next few weeks.

[mbrookes]

Sorry, slight disconnect on my part. The main FAB should be accessible by tab key, and the speed-dial actions by cursor keys. That was working, a regression was introduced with #10843.

[shssoichiro]

@mbrookes Sorry, this slipped through my notifications. Unfortunately I haven't even looked at the SpeedDial component. Nothing in that PR stands out to me as something that should break that arrow navigation, either. The only thing that really even looks suspect is the movement of the EventListener on the Tooltip from outside the Manager to inside, although I don't have a good understanding of the intricacies ofEventListener or Manager.

Ironically, my name is on that PR, but the majority of those changes are from @oliviertassinari.

[oliviertassinari]

Ironically, my name is on that PR, but the majority of those changes are from @oliviertassinari.

@shssoichiro It's true. I have been continuing a lot of pull requests this year.

[eps1lon]

This will be addressed in #12725.

We will consider the dial as a menu. The actions will therefore be navigatable via arrow keys following https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html

[mbrookes]

We will consider the dial as a menu.

To be pedantic, we already do (or rather did) it just got broken by #10843. #12725 is more of a refactor, while also fixing the regression.