Tabs show focus outline after mouse click, and don't respond to keyboard navigation with tab

[maxfliri]

What should happen?

• when a tab is clicked on with a mouse, there should be no outline around the tab element; the outline should appear only when the tab is focused with the keyboard; this is the default behaviour for links and other focusable elements in chrome on Mac OS
• when a tab is clicked and then the tab key is pressed, the focus should move to the next tab

What happens instead?

• when I click on a tab, the focus outline appears around the tab element; this is inconsistent with the behaviour of other clickable elements in the page, and breaks our design
• tab navigation doesn't work on tabs: after clicking on a tab, when I press the tab key, the focus goes to the first focusable element in the page, rather that the next tab

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://stackblitz.com/edit/js-nzvfy9

This test case was adapted with minimal changes from the first example in the documentation page for tabs: https://get.foundation/sites/docs/tabs.html#basics

How to reproduce:

1. click on Tab 2 using your mouse/trackpad -> a blue outline appears around the tab
2. now press the tab key on the keyboard -> the focus doesn't go to the next tab

Context

I recently upgraded our project to use foundation 6.6.3; previously we were using version 6.3.1. In the old version, this was working as expected.

Your Environment

• Foundation version(s) used: 6.6.3
• Browser(s) name and version(s): Chrome 83
• Device, Operating System and version: Mac OS 10.15.5 on a macbook pro

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.

[DanielRuf]

Hi @maxfliri,

Thanks for reporting this.
Can you check which exact version introduced this and do you see if what-input is included?

[DanielRuf]

https://github.com/foundation/foundation-sites/blob/develop/package.json#L35

[maxfliri]

Hi,

Thanks for looking into this issue.

As it happens, I didn't have what-input included. I have now added it, and this fixed the outline rendering issue. For reference, I'm using webpack and babel, and adding what-input to the dependencies in package.json was not enough: I also had to add this line to the code:

import "what-input";

You can see this replicated here: https://stackblitz.com/edit/js-hcj19m

This fixed the outline rendering, which is now visible only when the tab is focused using the keyboard. Navigation with the tab key is still broken though.

Regarding versions:

• 6.3.1 works as expected, even without what-input: no outline when the element is clicked; the outline appears when the focus is moved with the keyboard; tabs can be navigated with the tab key.
• 6.4.0 shows the issue, but slightly differently than later version: when you click on the tab there is no outline, but the outline become visible if you move the cursor away from the tab; I think this is because the outline is suppressed by the css style when the element is in :hover state; this happens event if what-input is present; navigation with tab key is also broken in this version
• versions from 6.5.0 onwards show the same behaviour as the current version: outline works correctly only with what-input installed; navigation with the tab key doesn't work

[DanielRuf]

adding what-input to the dependencies in package.json was not enough: I also had to add this line to the code:

Exactly, you have to require / import the needed dependencies and install them.

[DanielRuf]

Navigation with the tab key is still broken though.

Hm, this should be normally not the case. Can you reproduce this with a simple codepen and using a CDN version like the one from https://unpkg.com/[email protected]/dist/?

• 6.3.1 works as expected, even without what-input: no outline when the element is clicked; the outline appears when the focus is moved with the keyboard; tabs can be navigated with the tab key.

Yes, we have done the change regarding the peer dependencies later, see my linked commit.

[maxfliri]

Can you reproduce this with a simple codepen

https://codepen.io/maxfliri/pen/LYGzOzG

[DanielRuf]

Works for me here: https://codepen.io/DanielRuf/pen/XWXeVYM

[maxfliri]

Still not working for me... Here is what I'm doing: after the page loads, I click on Tab 2 to make sure it has the focus, then I press the tab on the keyboard: the focus doesn't go to Tab 3; instead it goes to the console button in the bar at the bottom of the page.

I tested this with Chrome, Firefox and Safari, and I see the same behaviour in all three browsers.

[DanielRuf]

Ah, yes I can reproduce this. This might be a general issue for a long time. I'm not sure if we even call focus() there.

I see only a focus() call for the keyboard feature but not for mouse clicks. And there is some autoFocus option: https://github.com/foundation/foundation-sites/blob/develop/js/foundation.tabs.js

So far this issue was not reported as such, PRs which fix this are very welcome.

[apriljunge]

I think the foundation tabs work as they should. Tabs can be changed with left / right key, not tab key.
This is how the w3 describes how tabs should work https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-19 .

So I think this is no problem. I would suggest to close this ☺️

[DanielRuf]

I agree. Thanks for your feedback @apriljunge. Closing as suggested.