This is an issue for users who use their keyboard to navigate through the page via the TAB key. When a user reaches the Quicktabs tab list they receive no visual feedback that they've arrived there. That's because the focus outline has been removed from the tab links. At best this may cause a little confusion because the user wonders why focus suddenly disappeared. At worst, the user may have no idea where their focus is on the page, for instance if focus jumped way down the page to the Quicktabs from the previous focusable element.
The visual indication of the tab changing from one to another is not sufficient to indicate focus either. That's because some styles may not be accessible in the first place. For instance, the tab borders of the Tabs Bar style have very low color contrast. Some users may not be able to see the tab change. So while the initial tab focus is the primary problem the tabs style may not do anything to make up for it. The tabs must be allowed to have a focus outline.
This problem is further compounded by the fact that the CSS selector for removing focus outlines has high specificity. Not only does it override any theme's existing focus outline behavior, it's a pain to try and correct.
Remove the outline: none; style.
Just horrible:
ul.quicktabs-tabs li a:focus {
outline: none;
}
If a theme really wants this, it's SO very easy to add it. It is, however, impossible to undo it.
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | imagen_2024-09-27_173153505.png | 3.66 KB | kinyein |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes, plain diff MR !18
Comments
Comment #1
rudiedirkx commentedComment #2
dcam commentedComment #4
dcam commentedComment #5
dcam commentedI'd like to point out that if you're going to fix this problem, then now is the time to do it. This is kind of a backward-incompatible change. But the module is still technically in alpha, even if the alpha phase has lasted 7 years. It might be unfriendly to long-time users to do it, but technically everyone should be watching for possible BC breaks when they update.
Comment #6
kinyein commentedHi, I reviewed this and the first tab has the outline by default when you're using tab key to navigate on the page, so it works.
Comment #7
smustgrave commentedThanks!