On keydown trigger next tab index (focus next element)
<p>I am having a bootstrap's dropdown menu (I implemented only styles without Javascript)... hence I need to port to angular2 some js functionality.</p>

<p>One is keyboard accessibility.</p>

<p>So far I have:</p>

<pre><code>&lt;div (keydown)="onMenuKeydown($event)" ....&gt;
    &lt;ul class="dropdown-menu"&gt;
        &lt;li&gt;&lt;a href="#"...&gt;option 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"...&gt;option 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"...&gt;option 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>In my controller I have this:</p>

<pre><code>onMenuKeydown(event: KeyboardEvent){
    if(event.keyCode === 40){
        /*event.srcElement.nextSibling.*/
        event.preventDefault();
    }
}
</code></pre>

<p>What I would like is that on arrow down it simulates or triggers the TAB key (so it should focus next element) and on arrow key up to simulate the SHIFT-TAB key (previous tabindex)</p>

<p>I have the <code>event.srcElement</code> and have <code>nextSibling</code>property but it doesn't have the method focus... so cannot do <code>event.srcElement.nextSibling.focus();</code>.</p>

<p>What would be the best solution here?</p>