Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

tabindex, bugs in description, REALITY of tabindex in ALL browsers #3505

Closed
Nadya678 opened this issue Feb 25, 2018 · 16 comments
Closed

tabindex, bugs in description, REALITY of tabindex in ALL browsers #3505

Nadya678 opened this issue Feb 25, 2018 · 16 comments
Labels
topic: focus

Comments

@Nadya678
Copy link

Nadya678 commented Feb 25, 2018 •
edited
Loading

https://www.w3.org/TR/html51/editing.html#the-tabindex-attribute

The tabIndex IDL attribute must reflect the value of the tabindex content attribute. Its default value is 0 for elements that are focusable and -1 for elements that are not focusable.

should be:
... are not tabbable but are focusable by mouse, touch and by JS.

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.)

The reality of ALL browsers is other. <span/> and <div/> and most of elements without set tabindex are not focusable (via click and JS too. please check). This sentence should be removed or improved.

REALITY for "standard" elements:

  • no tabindex attribute: not focusable, not tabbable (clicking of this element focuses nearest parent that is focusable).

  • tabindex="-1" or other less than 0: focusable but not tabbable

  • tabindex="0" or greater: focusable and tabbable.

This behaviour is used in many of websites and should be correctly described because is compatible in Cr, Moz, IE, EDGE and more browsers in standard mode (quirks mode not tested).

Only IE11 has bug. <span/> elements inside focusable elements also retrieve focus but it is reported bug.
@domenic
Copy link
Member

domenic commented Feb 25, 2018

The link you gave is to an outdated fork of the HTML Standard that is often modified by introducing bugs that do not match browsers (see https://annevankesteren.nl/2016/01/film-at-11). Would you mind checking if the issue is present in the actual HTML Standard that we work on in this repository?

@domenic
Copy link
Member

domenic commented Feb 25, 2018

It's also worth noting that you can focus an element using el.focus() even if it can't be focused via normal clicking/tabbing/etc.

@Nadya678
Copy link
Author

Nadya678 commented Feb 25, 2018 •
edited
Loading

@domenic: thus can you please point me a valid not outdated spec? I can check it. Or... valid GitHub project to report the bug in spec?

@domenic
Copy link
Member

domenic commented Feb 25, 2018

It's linked at the top of this repository: https://html.spec.whatwg.org/.

@Nadya678
Copy link
Author

Nadya678 commented Feb 25, 2018 •
edited
Loading

@domenic Errors are still present.

Page 740 (PDF version - only one readable version for me):

The tabIndex IDL attribute must reflectp90 the value of the tabindex p739 content attribute. Its default value is 0 for elements that are focusable and −1 for elements that are not focusable.

should be:

The tabIndex IDL attribute must reflectp90 the value of the tabindex p739 content attribute. Its default value is 0 for elements that are focusable and −1 for elements that are not tabbable but still focusable via scripts, click and touch events.

Also no word about sending focus to parent if clicked and any parent is focusable.

@Nadya678
Copy link
Author

Nadya678 commented Feb 25, 2018 •
edited
Loading

BTW.

Standard that is often modified by introducing bugs that do not match browsers (see https://annevankesteren.nl/2016/01/film-at-11)

It means that we have HTML5 and HTML五? http://adrianroselli.com/wp-content/uploads/2015/01/HTML5_Chinese.png

@domenic
Copy link
Member

domenic commented Feb 25, 2018

Parent focus is handled by the focusing steps.

Can you give an example of an element that is focusable but for which el.tabIndex === -1?

@domenic
Copy link
Member

domenic commented Feb 25, 2018

I guess this issue has a long history; see #1786 and the links therein.

@Nadya678
Copy link
Author

Nadya678 commented Feb 25, 2018 •
edited
Loading 

span:focus
{
   color:green;
   background:yellow;
}
<html>...
   <span tabindex="-1">test</span>
...

Is not tabbable but focusable by mouse. Please remove tabindex and then is not focusable. Do you need any JSFiddle or Codepen?

@domenic
Copy link
Member

domenic commented Feb 25, 2018

That isn't about the default value. The default value of el.tabIndex only is involved when the tabindex="" attribute is not set in markup. You are overriding the default in your example, so the sentence you quote does not apply.

@Nadya678
Copy link
Author

and −1 for elements that are not focusable? It is not logic. What value will be for focusable and not tabbable?

@Nadya678
Copy link
Author

more sense will have sentence:

The tabIndex IDL attribute must reflect the value of the tabindex content attribute. Its default value is 0 for elements that arefocusable and null for elements that are not focusable. Because what value is provided for my example for <span/> element?

@domenic
Copy link
Member

domenic commented Feb 25, 2018

I don't quite understand your question, but I'll repeat by asking if you think this section of the spec is a bug, then you need to produce an example showing the bug. Such an example needs to involve not setting the tabindex="" content attribute (so the default applies), observing el.tabIndex to be -1 (so that in particular the clause saying that the default is -1 applies), and the resulting element being focusable (so that we have a bug).

Can you produce such an example? If not, the spec seems accurate, at least in this part. (There are still related bugs, see #1786 and links therein, but that particular part would be OK.)

@domenic
Copy link
Member

domenic commented Feb 25, 2018 •
edited
Loading

I've gotten back to a computer, and had time to put together a test case showing that the spec is accurate:

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>

<span></span>
<input>
<script>
 "use strict";
 console.clear();
 console.log(document.querySelector("span").tabIndex); // logs -1
 console.log(document.querySelector("input").tabIndex); // logs 0
</script>

This will output -1 like the spec says:

  • el.tabIndex is determined by reflecting the tabindex="" content attribute
  • The tabindex="" content attribute is not set, so we use the default
  • Since the span is not focusable, the default is -1, so that gets output for span
  • Since the input is focusable, the default is 0, so that gets output for input

Since the spec seems correct here, let me close this issue. If I've missed something, I'm happy to reopen.

@domenic domenic closed this as completed Feb 25, 2018
@Nadya678
Copy link
Author

Nadya678 commented Feb 25, 2018 •
edited
Loading

Thanks for explanation. We cannot change it (compatibility) but it will be more logic if element.tabIndex will equal to tabindex attribute. Like input.value is equal (before changes) to attribute value.

But I know, we cannot change it due to compatibility.

BTW. Can you please contact W3C to mark old draft as outdated like other outdated documents?

@annevk
Copy link
Member

annevk commented Feb 26, 2018

@Nadya678 is https://html.spec.whatwg.org/multipage/ more readable? Seems unfortunate if using the PDF is a necessity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
topic: focus
Milestone
No milestone
Development

No branches or pull requests
3 participants
@domenic @annevk @Nadya678