Toolbar menu accessible and navigable with keyboard

Maybe you could work together with #2886151: Make toolbar work with a keyboard ?

@flocondetoile I feel your solution is much much better than mine. I made a small tweak to enable backward tabbing through the menu items. I'm attaching an interdiff I believe I did this right.

rerroling against the last dev

Rerroling against the last dev.

Somebody can explain me how can I test this functionality? I tried with tab in the menu but nothing happens, the only think that I see is the menu item in green once you made click in a menu item.

I haven't had a chance to test this patch yet. But to test you should be able to tab through all the menu items with the keyboard just as you can with a mouse. With clear indication where the focus currently is.

Hi @smustgrave, for me it doesn't work, I'm not able to use the tab with the menu, can you check this later, please? We are planning to release a new version soon and will be great if we can include this issue.

Made some tweaks and it appears to be working for me now. Used Drupal 8.4 core and 8.x-1.20 version of admin_toolbar.

I was able to apply the patch cleanly on my local environment. I don't understand the drupal tester well enough to know what the issue was. Apologies

@smustgrave I'm rerroling against the last dev.

In firefox 56 is not working and is working in chrome 61.

And I'm having the following issue: Try to drag a menu item out of the menu with the mouse and then go with the mouse over another menu item, you will see something like this.

I can look into this in a few hours but I can confirm I'm seeing the error you mentioned. As far as FF goes it seems to work for me.

Hopefully this addresses the issue you saw.

Still not working in firefox, what is your firefox version?

Using 56.0.2 (64-bit)

I have the same version in mac and it doesn't works, let's wait to see if another user can test the patch.

Merci @flocondetoile.

Now the other thing that I think that need a review is the mouse over color. Its fine the green or we need another color for this? I not very skilled in usability.

So the color contrast is perfect. One thing I noticed is say you start tabbing and the focus is on the 'Extend' tab it displays blue as expected. But if you over Structure or another tab that drops down the 'Extend' tab is still blue. I'm not sure if this is an issue, because the focus is still on the 'Extend' tab but the mouse is over something else.

I see two things.

1-. The menu arrow disappear once the menu is green.

2-. Strange behaviour (blink) when the mouse is in the position (see the image) and you are trying to use the tab to see the menu items.

1. Have a fix for the arrow disappearing. But this raises the question when the dropdown expands should we use the chevron-down.svg vs chevron-right.svg?

2. I'm not sure I understand the issue you mentioned.

@smustgrave for:

1-. I think that chevron-right.svg is fine (as I says I'm not a usability expert).

2-. Put the mouse in the position (or near) indicated by the arrow and then use the tab to reach the options in the Structure menu and you will see the menu blinking.

Attached the fix for the first issue. Not able to reproduce the blinking issue though.

@smustgrave works fine, to see the other issue just put the mouse pointer in the position indicated by the arrow and try to use the tab to navigate in the menu, you will see the problem.

Hopefully this fixes the issue. I decided instead of using the 'focused' custom class just to reuse the hover-intent option that's already there. So when I held the mouse over the 'Comment Types' link or any link and started tabbing I noticed that nested expanded links were no longer showing.

Great job @smustgrave, we are planning to revert this commit https://www.drupal.org/node/2908747#comment-12277530 on #2908747: Add a config to disable the hoverintent functionality if we revert the commit this will affect your last patch?

@flocondetoile the commit is to allow the hovert-intent to be optional, but we will revert it (so will be by default in the module), in case that we revert the commit this patch will continue working?

I think that yes because you say that you use the hovert-intent and if we revert the commit the hover-intent will be always available, but I just asking the question because I'm not very skilled with jquery.

I just want to know that if we revert the patch that made overt-intent optional this patch will work fine. Maybe I will revert today the patch for the optional overt-intent .

Well thanks to @all, this will be available in the next release, maybe for the next week ;-)

Glad we were able to get it working! This will go along way to getting this module adopted by government agencies (Which have to be 508).

@smustgrave What is 508? And I have a question, is not better to use the arrows to move across the menu? If I need to go to the Reports menu I need to use a lot of tabs.

https://www.dhs.gov/compliance-test-processes

The current rule states that a tab has to be used. Arrows makes sense but it's not what someone with any motor disability would use first.

@smustgrave do you think that we need to write something about this in the module description? In that case, can you write some words about this?

I can fully test it and emailsend you something