Contenteditable about tabbable HOT 8 CLOSED

Can you find any evidence in a spec that this is the case? And have you tested across browsers?

from tabbable.

Not sure if these are the correct and most up-to-date documents, but:

From the html5 user Interaction section

Modulo platform conventions, it is suggested that for the following elements, the tabindex focus flag be set:

• [snip]
• Editing hosts

And from the ContentEditable spec

editing host: An editing host is a node that is an HTML element with a contenteditable attribute set to something else than the false state.

I've also tested on the latest Chrome, Firefox and Edge, and all allow tabbing into contenteditable

from tabbable.

@felipeochoa: Thanks for digging into it a little. Sounds like the right plan to me.

from tabbable.

@felipeochoa I'm open to a PR adding this. When I started looking into it I ran into some problems making it non-trivial:

• In test environments I'm getting contenteditableElement.tabIndex === -1, which makes us unable to test those elements. I see this result in the current Jest suite, which uses jsdom; so I tried switching over to Karma and Firefox but saw the same thing.
• How should elements behave if they are inheriting contenteditable from a parent?

Until you or someone else is able to take care of these problems, what I'd recommend is applying tabindex="0" to your contenteditable elements so they will be recognized.

from tabbable.

@davidtheclark I updated the code pen to check both things out. It seems like children who inherit contenteditable don't get tabbed into natively and have contentEditable set to inherit, so that won't be a problem (just exclude them from tabbable).

I confirmed your first point in both Firefox and Chrome, though IE11 and Edge both actually report tabindex = 0 (see the updated pen). This point looks harder/impossible to resolve, since there's no apparent way to distinguish between <div contenteditable></div> and <div contenteditable tabindex="-1"></div> -- even though the browser allows tabbing into one but not the other. There's an existing bug in Firefox for this, and I filed one with Chromium.

I suppose for the time being tabindex="0" it is!

from tabbable.

@felipeochoa Excellent digging. If you think it would help others in your situation to add a note to the README, I'd welcome a PR.

from tabbable.

Thanks! Submitted PR #8

from tabbable.

Closed by #8.

from tabbable.