27965 2015-02-05 07:51:29 +0000 [Shadow]: Shadow host with tabindex=-1, all descendent tree should be ignored for tab navigation 2015-05-27 03:06:43 +0000 1 1 1 Unclassified WebAppsWG HISTORICAL - Component Model unspecified PC All RESOLVED MOVED a11y_focus P2 normal --- 28552 1 kochi hayato chaals dglazkov hayato mike public-webapps public-webapps-bugzilla oldest_to_newest 117704 0 kochi 2015-02-05 07:51:29 +0000 In the current Shadow DOM spec, basically focusable nodes in a shadow tree are inserted after their shadow host in the tab navigation order. This means that when shadow host has "tabindex=-1", the host itself is skipped in the order, but right after the host the descendant nodes in its shadow tree will be visited. This is probably not the behavior that a component author or user would expect. 118020 1 chaals 2015-02-19 06:00:33 +0000 I'm not immediately clear why this would be unexpected... A couple of scenarios: - A date picker should have a tabindex at its root, so this doesn't arise. - A sound mixer may well begin with a bunch of non-interactive material, and be the main component on a page. So it seem logical that it doesn't have a tabindex at the root (although it might well be a landmark, in screen reader navigation terms). Am I missing something obvious? (That seems quite possible) 118171 2 kochi 2015-02-26 06:10:12 +0000 Let me explain an example. Suppose I have an component (which is out of control of mine) 2 focusables contained in a shadow. <login-extras> |#shadow-root | <input type=checkbox> save cookie | <a href="http://example.com/help">Help</a> </login-extras> I put it in some form: <form> Name: <input> Password: <input type=password> <login-extras></login-extras> <input type=submit value="login"> </form> And want to skip <login-extra> for typical cases, only require name and password then user can hit login button. So I put tabindex=-1 in <login-extras> <form> Name: <input> Password: <input type=password> <login-extras tabindex=-1></login-extras> <input type=submit value="login"> </form> Actually, this doesn't skip the checkbox and help link. Demo: http://jsfiddle.net/4y3xntx8/ 118177 3 chaals 2015-02-26 10:43:04 +0000 Thanks for the example. I *think* the general idea makes sense - changing the shadow root's tabindex should apply to whatever is in the component. There is an analagous situation in aria. I'll have a look what they say, but I suspect their answer will be "build JS that manages this", which doesn't really help in this case… (There is a problem with the example: the functionality inaccessible for keyboard. The normal interaction pattern would be to fill in the things you want, then hit enter to submit the form.) 120516 4 hayato 2015-05-27 03:06:43 +0000 Moved to https://github.com/w3c/webcomponents/issues/86