Remove the "outline: none;" style from focused tabs

Open on Drupal.org →

Created on 31 January 2013, almost 12 years ago

Updated 29 April 2024, 7 months ago

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.

Proposed Resolution

Remove the outline: none; style.

Inital Report

Just horrible:

ul.quicktabs-tabs li a:focus {
  outline: none;
}

http://www.outlinenone.com/

If a theme really wants this, it's SO very easy to add it. It is, however, impossible to undo it.

🐛 Bug report

Status

Active

Version

3.0

Component

Code

Created by

🇳🇱Netherlands rudiedirkx

Live updates comments and jobs are added and updated live.

Accessibility
It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Incomplete comments

Sign in to follow issues

Merge Requests

!18Remove the "outline: none;" style from focused tabs
Open
🇺🇸United States dcam
updated 7 months ago

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment 7 months ago →
🇺🇸United States dcam
Merge request !18Remove the tab outline: none; style → (Open) created by dcam
Open in Jenkins → Open on Drupal.org →
Core: 9.5.x + Environment: PHP 8.1 & MySQL 5.7
last update 7 months ago
2 pass
Pipeline finished with Failed
7 months ago
#159954
Status changed to Needs review 7 months ago5:43pm 29 April 2024
Comment 7 months ago →
🇺🇸United States dcam
Comment 7 months ago →
🇺🇸United States dcam
I'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.
Status changed to RTBC about 2 months ago10:44pm 27 September 2024
Comment about 2 months ago →
🇨🇴Colombia kinyein
Hi, 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 about 2 months ago →
🇨🇴Colombia kinyein
Hi, 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.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024