aria-keyshortcuts

components.page-layout.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['page-layout'],
  keyDown : function(e) {
    console.log(e.keyCode);
    if(event.keyCode==66 && event.ctrlKey) {
        console.log('ctrl+b was typed.');
      this.$('.item-d').focus();
    }
    if(event.keyCode==81 && event.ctrlKey) {
        console.log('ctrl+q was typed.');
      this.$('.item-b').focus();
    }
    if(event.keyCode==89 && event.ctrlKey) {
        console.log('ctrl+y was typed.');
      this.$('.item-a').focus();
    }
    if(event.keyCode==86 && event.ctrlKey) {
        console.log('ctrl+v was typed.');
      this.$('.item-f').focus();
    }
    if(event.keyCode==77 && event.ctrlKey) {
        console.log('ctrl+m was typed.');
      this.$('.item-g').focus();
    }
    if(event.keyCode==88 && event.ctrlKey) {
        console.log('ctrl+x was typed.');
      this.$('.item-c').focus();
    }
     if(event.keyCode==67 && event.ctrlKey) {
        console.log('ctrl+c was typed.');
      this.$('.item-e').focus();
    }
    
  }
});

controllers.application.js

import Ember from 'ember';

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

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
body {
  margin:0 auto;
  font-family:"Comic Sans MS", cursive, sans-serif;//"Indie Flower",
}
	
  .container {
    font-size: 12px;	
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    height: 100vh;
  }
  div.grid-container{
    border: 0.25rem solid black;
    border-radius: 0.5rem;
  }

  .item {
    border: 0.05rem solid black;
    border-radius: 0.25rem;
  }
.item:focus {
  border: none;
  background-color: #e35b44;
  color: white;
}
  .item-a {
    grid-area: logo;
    //background-color: green;
  }
  .item-b {
    grid-area: header;
    //background-color: yellow;
  }

  .item-c {
    grid-area: sidenav;
    //background-color: red;
  }
  .item-d {
    grid-area: main;
    //background-color: violet;
  }
  .item-e {
    grid-area: recents;
    //background-color: indigo;
  }
  .item-f {
    grid-area: footer;
    //background-color: orange;
  }
  .item-g {
    grid-area: social;
    //background-color: blue;
  }

  .grid-container {
    display: grid;
    width: 55vw;
    height: 45vh;
    
    grid-template-columns: 50px 110px 110px 110px 50px; 
    grid-template-rows: 40px 120px 40px ;
    grid-template-areas: 
     "logo header header header header"
     "sidenav main main main recents"
     "sidenav footer footer footer social";
    
    grid-column-gap: 0.15rem;
    grid-row-gap: 0.25rem;

    justify-items: stretch;
    align-items: stretch;
    justify-content: space-evenly;
    align-content: center; 

    
    grid-auto-columns: 3rem;
    grid-auto-rows: 3rem;

    
    grid-auto-flow:column;
  }

  .content {
    background-color: #77EDF4;
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
  }

templates.application.hbs

<br>
{{outlet}}
<br>
<br>

templates.components.page-layout.hbs

{{yield}}
<section class="container" >
	<section class="flex-item">
		<div tabindex=0 class="grid-container">
			<div tabindex=0 class="item item-a" aria-keyshortcuts="Control+Y"><div class="content"></div></div>
			<div tabindex=0 class="item item-b" aria-keyshortcuts="Control+Q"><div class="content"></div></div>
			<div tabindex=0 class="item item-c" aria-keyshortcuts="Control+X"><div class="content"></div></div>
			<div tabindex=0 class="item item-d" aria-keyshortcuts="Control+B"><div class="content"></div></div>
			<div tabindex=0 class="item item-e" aria-keyshortcuts="Control+C"><div class="content"></div></div>
			<div tabindex=0 class="item item-f" aria-keyshortcuts="Control+V"><div class="content"></div></div>
			<div tabindex=0 class="item item-g" aria-keyshortcuts="Control+M"><div class="content"></div></div>
      </div>
	</section>
</section>

templates.index.hbs

{{page-layout}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0",
    "ember-cli-sass": "5.5.1"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}