-1

I am testing an application in firefox. When I hit tab it focuses the body of Firefox. If I it tab again then the next item in header. Now while next item is having focus if I do shift + tab it goes back to body and if I do shift + tab again it comes back to same item. It didn't move focus to address bar and goes in loop between body and next item if I keep pressing shift + tab.

I added code at body since it shows me focus at body when i checked for active element 

  %body{tabindex: -1}

I tried using tabindex: -1 and -moz-user-focus: ignore at body but no luck. I dont get this issue with other browsers.

Any idea how do I fix this issue?

User7354632781
  • 2,174
  • 9
  • 31
  • 54
  • `tabindex: -1` - that looks like you're trying to set the tabindex in CSS - having said that, I can't ever get body to get focus using tab/shift-tab, so you must've done something wrong in your code – Jaromanda X Feb 16 '17 at 22:13
  • sorry i am new to this. I added tabindex -1 in the html.haml file. is there a different attribute i can use? – User7354632781 Feb 16 '17 at 22:17
  • `I added tabindex -1 in the html.haml file` - sorry, but I have no idea what that means - perhaps show the relevant piece of "code" - *preferably added into the question because in a comment code is generally unreadable* – Jaromanda X Feb 16 '17 at 22:18
  • %body{tabindex: -1} This is where i added tabindex. when i check for document.activelement it shows me the focus is at body – User7354632781 Feb 16 '17 at 22:19
  • `tabindex` is an HTML attribute. You must add it directly to the HTML, as in: ``. It can also be set via JavaScript like this: `objectReference.tabIndex = 2;`. The `` element can't receive the focus in the first place. Your syntax is completely wrong. – Scott Marcus Feb 16 '17 at 22:20
  • perhaps you need to explain a bit more about your source environment, because `%body{tabindex: -1}` is not HTML, CSS or JAVASCRIPT - and the attribute is `tabIndex` - note the CAPITAL I – Jaromanda X Feb 16 '17 at 22:21

1 Answers1

2

Your syntax is completely wrong.

tabindex is an HTML attribute. There are two ways to set this:

  • Add it directly to the HTML, as in: <input type="text" tabindex="2">
  • It can also be set via JavaScript like this: objectReference.tabIndex = 2;

The <body> element can't receive the focus in the first place, so I'm not sure what you are seeing there.

Lastly, there are known issues with Firefox and tabindex:

Here's an article that discusses cross-browser tabindex

Community
  • 1
  • 1
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71