Keyboard can be used to navigate to disabled tab
matthew-white opened this issue · comments
When a tab is disabled, its <li> element has pointer-events: none;, so clicking it has no effect. However, the tab link can still be focused and navigated into using the keyboard (using the tab and enter keys).
This is different from how a disabled link works. A disabled link can be focused using the keyboard, but it cannot be navigated into because we prevent default in that case. We don't have a generic mechanism for calling preventDefault() on a disabled link, but in each case in which a link is disabled, we prevent default on click (or at least I think we do). Doing so can be as simple as specifying @click.prevent in the template. For a link, I'm pretty sure that preventing default on click also prevents default when the enter key is pressed.
However, we don't do anything like that for the links of disabled tabs, at least in the cases I'm seeing. In FormHead and UserHome, it is possible to use the keyboard to navigate into the links of disabled tabs. I think we should prevent that possibility.
To be clear, I don't think it's a huge deal that that's possible, because the user could always use the URL bar to attempt the same navigation, and we redirect the user to the homepage when they attempt to visit a page that they don't have access to. However, I think it'd be confusing for a user using the keyboard to accidentally navigate into one of these links and be redirected to the homepage. I think it'd be better for keyboard use to be disabled in this case just as mouse use is.
I also wanted to note one other thing I'm noticing, which is that disabled buttons seem to work slightly differently from both disabled links and the links of disabled tabs. While both types of links can be focused, it seems like disabled buttons can't be focused (at least in Chrome). Should we match that behavior for disabled links and the links of disabled tabs?
Notes for QA: To verify this change, use the tab key on the keyboard to navigate to a disabled navigation tab. For example, if you create a new form, many tabs will be disabled until you publish the form draft. You should be able to use the keyboard to focus each of those tabs, though that focus probably won't be apparent on-screen. If you press Enter or space after focusing a disabled tab, nothing should happen. You should not navigate to a different page if you press Enter or space.
It's ending up that I'm resolving this as part of resolving #648. Disabled elements intersect with tooltips for reasons I'll explain in that PR.
For a link, I'm pretty sure that preventing default on click also prevents default when the enter key is pressed.
I've confirmed that this is the case. See https://css-tricks.com/when-a-click-is-not-just-a-click/
Tested with Success!
Tested with Success!