- From: Ryosuke Niwa <notifications@github.com>
- Date: Tue, 02 Feb 2016 07:23:05 -0800
- To: w3c/webcomponents <webcomponents@noreply.github.com>
- Message-ID: <w3c/webcomponents/issues/375/178630606@github.com>
Let's say we have the following DOM (nobody should be setting `tabindex` like this here but I can't come up with a better example for now): ```html <contect-card> Name first: <input id="first" slot="name" tabindex="1"> Middle name: <input id="middle" slot="name" tabindex="4"> Last name: <input id="last" slot="name" tabindex="2"><br> Email: <input id="email" tabindex="3"> </contect-card> <input id="search" type="search" tabindex="5"> ``` and let's say `contect-card`'s shadow DOM is defined as follows: ```html <dl> <dt>Email</dt> <dd><slot name="email"></slot></dd> <dt>Name</dt> <dd><slot name="name"></slot></dd> </dl> ``` Then the composed three will look like ```html <my-nameinput> <dl> <dt>Email</dt> <dd><input id="first" slot="name" tabindex="1" ><input id="middle" slot="name" tabindex="4" ><input id="last" slot="name" tabindex="2"></dd> <dt>Name</dt> <dd><input id="email" tabindex="3"></dd> </dl> </my-nameinput> <input id="search" type="search" tabindex="5"> ``` In this composed tree, the tab focusing order should be `#first`, `#last`, `#middle`, `#email`, then `#search` because shadow root and slot each defines its own focus scope/group. --- Reply to this email directly or view it on GitHub: https://github.com/w3c/webcomponents/issues/375#issuecomment-178630606
Received on Tuesday, 2 February 2016 15:23:58 UTC