question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Suppress the outline caused by tabindex

See original GitHub issue

I’ve updated slick-slider to the current version and was bothered by an outline around my slick-slides that I could’t recognize in style. Even the browsers dev-tools suppressed the declaration and the computed style. It’s hard to troubleshoot a style that’s not listed, however, by removing attributes and declaring style="border:none;outline:none;" I found the attribute tabindex to cause the outline during selection as the browsers define it.

For more accessibility I appreciate this attribute’s introduction. However, I don’t think that a visual outline is desired around some carousel’s slides, also because the outline is moving with the dragged slides. To access an element by tabbing and at that don’t see anything highlighted is another bad behaviour, maybe it’s good to have an option enabling or disabling tabindexes.

For the moment, I added the following rule to my stylesheet

.slick-slide[tabindex] {
  outline: none;
}

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:4
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
sethrubensteincommented, Sep 7, 2015

This was driving me crazy. Thanks for the fix.

0reactions
leggomuhgreggocommented, Apr 27, 2016

This is fixed in the master

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tabindex, outlines only with tab button - css - Stack Overflow
I noticed that elements with tabindex have an outline, both on tab focus and on click. I would remove outlines on click (or...
Read more >
Quick tip: Never remove CSS outlines - The A11Y Project
Using the CSS rule :focus { outline: none; } to remove an outline on an object causes the link or control to be...
Read more >
Control focus with tabindex - web.dev
Control focus with tabindex · Check if your controls are keyboard accessible · Insert an element into the tab order · Remove an...
Read more >
HTML Roving tabindex Attribute Explained with Examples
You use the HTML tabindex attribute to set an element's tab position, and it usually indicates that an element can be tabbed with...
Read more >
Remove tabindex=-1 from RadButton? - Telerik Forums
Buttons (more precisely - inputs that are hidden by span) by default are assigned tabindex -1. This causing these button to drop off...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found