tab vs arrow

components.tva-list.js

import Ember from 'ember';

export default Ember.Component.extend({
	elementId: 'tva-list',
  didRender(){
  	$('#tva-list').children().children().first().focus();
  },
  keyDown: function(event){
    let target = this.$(event.target);
    let elementId = this.get('elementId');
    if(event.keyCode==40){
      target.next().focus();
    } else if (event.keyCode==38){
      target.prev().focus();
    } else if (!event.shiftKey && event.keyCode == 9 ) {
      	event.preventDefault();
      	$('#tva-list').next().focus();
    } else if (event.shiftKey && event.keyCode == 9){
    	event.preventDefault();
      target.parent().prev().focus();
      if (event.target.tagName === "LI"){        
        this.set('showList', false);
      }
    }
  },
  showList: false,
  actions:{
  	toggleList(){
    	this.toggleProperty('showList');
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

ul {
	list-style:none;
  border: 0.05px solid grey;
  width: 200px;
  margin: 15px;
  margin-top: 5px;
  margin-left: 0;
  padding: 5px;
  padding-left: 10px;
}
li {
	padding:2px;
}
input, label {
	display: block;
  margin: 45px;
  margin-left: 0;
}
input {
  margin-top: 0;
}
label {
  margin-bottom: 0;
}

li:focus {
  border: none;
  background-color: #e35b44;
  color: white;
}
input:focus {
  //border: 2px solid green;
   color: white;
  background-color: #e35b44;
}
button:focus {
  //border: 2px solid green;
  color: white;
  background-color: #e35b44;
}

templates.application.hbs

{{outlet}}

{{tva-list}}

<label for="tva-input">Add Items</label>
<input tabindex=0 id="tva-input" type="text">

templates.components.tva-list.hbs

{{yield}}
<button {{action "toggleList"}}>Living Things</button>
{{#if showList}}
  <ul>
    <li tabindex=0>Mammals</li>
    <li tabindex=0>Amphibians</li>
    <li tabindex=0>Birds</li>
    <li tabindex=0>Reptiles</li>
    <li tabindex=0>Fish</li>
    <li tabindex=0>Insects</li>
  </ul>
{{/if}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}