9

In my app's tab loop, the <html> tag occupies a tab stop. I'm looking to remove the <html> tag from the tap loop.

I tried adding tabindex="-1" to the <html> tag, but on IE11 at least, that did not seem to remove the element from the tab loop. I'm close to spinning my own logic using JS to "skip" to the next focusable element if document.activeElement === <html>, but I'm wondering if there's an easier way.

The solution needs to be supported cross the major browsers: IE11, Edge, FF, Chrome, Safari.

Any ideas?

sir_thursday
  • 5,270
  • 12
  • 64
  • 118
  • 2
    Can you provide more code? – Pararera Nov 21 '18 at 19:49
  • I don't believe more code would be useful. It's literally just adding `tabindex="-1"` attribute to the `` element. – sir_thursday Nov 21 '18 at 20:26
  • Very odd. What doctype are you using? (HTML5 I assume?) and this was happening before adding tabindex="-1"? And only in IE11 or also Chrome/FF? – jacob.mccrumb Nov 26 '18 at 21:04
  • 1
    @sir_thursday I tried all possible ways I could create an HTML document but tabbing did never focus on `` tag. Can you provide a minimal, viable code to replicate the issue? – Dipen Shah Nov 27 '18 at 03:26
  • See this example it may help you : https://stackoverflow.com/questions/1987927/javascript-jquery-remove-from-tabindex/1987947 – DINA TAKLIT Nov 29 '18 at 15:41

2 Answers2

3

I visited HTML specification for tabindex attribute: https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute

Below is the second para:

When the attribute is omitted, the user agent applies defaults. (There is no way to make an element that is being rendered be not focusable at all without disabling it or making it inert.)

As it is clearly mentioned that the only way to make any element not focusable is by making it disable or make it invisible from DOM.

I am still searching and will post an update on this.

Moreover, I also tried to replicate this issue and could not do it on IE.(did not try to replicate on other browser).

Update 1:

I found the difference in tabIndex between HTML4 AND HTML5:

It is stated that though HTML5 allows adding tabIndex attributes on any element, it may not have any effect. This is applicable to HTML element also. My I know, how do we know if an HTML element is focused?

user3840170
  • 26,597
  • 4
  • 30
  • 62
Raja Malik
  • 66
  • 6
1

Well according to my simple research i have found that you can use You can use tabindex="-1".

The W3C HTML5 specification supports negative tabindex values.

You can use also,which works for most browsers: 

element.removeAttribute('tabindex');

I find this way with jquery but i'm not sure about 

$('#yourelment').prop('tabIndex', -1);

Please check those link for more details :

DINA TAKLIT
  • 7,074
  • 10
  • 69
  • 74