shop icon indicating copy to clipboard operation
shop copied to clipboard

Enter and space keys actions + scroll on focus

Open murielsilveira opened this issue 9 years ago • 2 comments

Olá!

I watched to @robdodson talk about accessibility and started to play around with the shop to learn more about the subject. Turns out that I notice two things that I found a little strange.

1. Enter and space keys actions

I checked the WAI-ARIA Authoring Practices about button and link tags. For buttons, both actions - enter and space - triggers a click. And for the link, just enter executes the link. On the shop, when I'm navigating using just the tab key, everything is ok. But when I tried to access a menu item, the home link or even the shop now button, it just works with the enter key. When I had hit space I got a scroll. The only action that worked with space was the cart button. I'm not sure what should be the correct behaviour on all cases. But I think that at least on the shop now button and on the menu it should have worked, right?

2. Scroll on focus

Again, I'm navigating around, using the tab key. And when the focus goes to an element that it's off the viewport, the page scrolls to a point that I can see what was focused, awesome! But them I hit the end of the page and started to go backwards (using shift + tab). At the point where the focus goes to the cart button the scroll do not respond anymore (gif). I also notice that if the focus is on some menu item - in a point where with the next tab press the focus continues on the menu - and the menu is not visible, the scroll doesn't respond neither. I imagine that it's something that could be improved.

That is it :)

murielsilveira avatar May 29 '16 01:05 murielsilveira

Hi there

  1. Enter and space keys actions

That is the expected behavior. Some anchors visually look like buttons but they are anchors for SEO purposes.

  1. Scroll on focus

I can see the issue and I think that could be improved. The header has made it such that the browser thinks that those items are in the viewport, so there's nothing to bring into view.

blasten avatar May 31 '16 17:05 blasten

+1 to Shift+Tab scroll problem. When I use keyboard to focus back up to "Shop", it's out of view. The browser doesn't scroll back up which is expected native behavior. (Tested on Mac Chrome and Mac Firefox.)

weboverhauls avatar Jun 03 '16 21:06 weboverhauls