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.

tabindex="-1" on last element prevents Tab key from cycling back to the top

See original GitHub issue

Scenario: ~The last focusable element in the modal has attribute tabindex="-1" or CSS visibility: hidden and is such not tabbable by the browser.~ The last focusable element in the modal is within a parent that has style display: none and does not explicitly have tabindex="-1" set.

Expected Result: When using Tab key to navigate, this element is skipped, so the expectation is for focus to cycle back to the first tabbable element at the top of the modal. ~This behaviour is working as expected if I change the tabindex on the last element to 0.~

Actual Result: When using Tab key to navigate, the focus remains stuck on the last tabbable element in the modal and does not cycle back to the top.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
theKasheycommented, Sep 6, 2018

Should be fixed in 1.13.2

0reactions
theKasheycommented, Sep 7, 2018

Thank you in response. You helped to find and close quite important issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Preventing tab to cycle through address bar - Stack Overflow
shiftKey == true) then set the focus on the element with the highest tabindex. This would effectively prevent the address bar from ever...
Read more >
Using tabindex - web.dev
Press Tab to Focus Me! tabindex="-1" : Removes an element from the natural tab order, but the element can still be focused by...
Read more >
Trapping Focus Within An Element Using Tab-Key Navigation ...
Adding tabindex="-1" does not grant keyboard-based access to an element; but, it does allow the element to gain focus programmatically (by ...
Read more >
How to Prevent Tab Indexing on Specific Elements - W3docs
Solution with the tabindex attribute. The tabindex attribute allows making an element and areas having the element as its DOM anchor be focusable...
Read more >
Set tab order of controls - Windows Forms .NET - Microsoft Learn
Once the highest TabIndex has been focused, pressing Tab will cycle and focus the control with the lowest TabIndex value.
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