add tabindex to labels on open screen and listen to keydown event to trigger same functionality as onclick.

add handlebar helper for addition to use with iteration to set tabindex from index plus some starting number.
add dev script to package.json

app/scripts/helpers/add.js

@@ -0,0 +1,6 @@
+const Handlebars = require('hbs');
+
+// inspired by https://stackoverflow.com/questions/22103989/adding-offset-to-index-when-looping-through-items-in-handlebars/39588001#39588001
+Handlebars.registerHelper('add', (lvalue, rvalue) => (
+    parseInt(lvalue) + parseInt(rvalue)
+));

app/scripts/helpers/index.js

@@ -1,3 +1,4 @@
+require('./add');
 require('./cmp');
 require('./ifeq');
 require('./ifneq');

app/scripts/views/open-view.js

@@ -24,20 +24,30 @@ const OpenView = Backbone.View.extend({
     events: {
         'change .open__file-ctrl': 'fileSelected',
         'click .open__icon-open': 'openFile',
+        'keydown .open__icon-open': 'labelOnKeydown',
         'click .open__icon-new': 'createNew',
+        'keydown .open__icon-new': 'labelOnKeydown',
         'click .open__icon-import-xml': 'importFromXml',
+        'keydown .open__icon-import-xml': 'labelOnKeydown',
         'click .open__icon-demo': 'createDemo',
+        'keydown .open__icon-demo': 'labelOnKeydown',
         'click .open__icon-more': 'toggleMore',
+        'keydown .open__icon-more': 'labelOnKeydown',
         'click .open__icon-storage': 'openStorage',
+        'keydown .open__icon-storage': 'labelOnKeydown',
         'click .open__icon-settings': 'openSettings',
+        'keydown .open__icon-settings': 'labelOnKeydown',
         'click .open__pass-input[readonly]': 'openFile',
         'input .open__pass-input': 'inputInput',
         'keydown .open__pass-input': 'inputKeydown',
         'keyup .open__pass-input': 'inputKeyup',
         'keypress .open__pass-input': 'inputKeypress',
         'click .open__pass-enter-btn': 'openDb',
+        'keydown .open__pass-enter-btn': 'labelOnKeydown',
         'click .open__settings-key-file': 'openKeyFile',
+        'keydown .open__settings-key-file': 'labelOnKeydown',
         'click .open__last-item': 'openLast',
+        'keydown .open__last-item': 'labelOnKeydown',
         'dragover': 'dragover',
         'dragleave': 'dragleave',
         'drop': 'drop'
@@ -287,6 +297,37 @@ const OpenView = Backbone.View.extend({
         }
     },
 
+    labelOnKeydown: function(e) {
+        const code = e.keyCode || e.which;
+        if (code === Keys.DOM_VK_RETURN) {
+            this.labelOnEnter(e);
+        }
+    },
+
+    labelOnEnter: function(e) {
+        if ($(e.target).hasClass('open__icon-open')) {
+            this.openFile();
+        } else if (($(e.target).hasClass('open__icon-new'))) {
+            this.createNew();
+        } else if (($(e.target).hasClass('open__icon-demo'))) {
+            this.createDemo();
+        } else if (($(e.target).hasClass('open__icon-more'))) {
+            this.toggleMore();
+        } else if (($(e.target).hasClass('open__icon-storage'))) {
+            this.openStorage(e);
+        } else if (($(e.target).hasClass('open__icon-settings'))) {
+            this.openSettings();
+        } else if (($(e.target).hasClass('open__icon-import-xml'))) {
+            this.importFromXml();
+        } else if (($(e.target).hasClass('open__pass-enter-btn'))) {
+            this.openDb();
+        } else if (($(e.target).hasClass('open__settings-key-file'))) {
+            this.openKeyFile(e);
+        } else if (($(e.target).hasClass('open__last-item'))) {
+            this.openLast(e);
+        }
+    },
+
     importFromXml: function() {
         if (!this.busy) {
             this.closeConfig();

app/templates/open.hbs

@@ -2,30 +2,30 @@
     <input type="file" class="open__file-ctrl hide-by-pos" />
     <div class="open__icons">
         {{#if canOpen}}
-        <div class="open__icon open__icon-open">
-            <i class="fa fa-lock open__icon-i"></i>
-            <div class="open__icon-text">{{res 'openOpen'}}</div>
-        </div>
+            <div class="open__icon open__icon-open" tabindex="1">
+                <i class="fa fa-lock open__icon-i"></i>
+                <div class="open__icon-text">{{res 'openOpen'}}</div>
+            </div>
         {{/if}}
         {{#if canCreate}}
-        <div class="open__icon open__icon-new">
-            <i class="fa fa-plus open__icon-i"></i>
-            <div class="open__icon-text">{{res 'openNew'}}</div>
-        </div>
+            <div class="open__icon open__icon-new" tabindex="2">
+                <i class="fa fa-plus open__icon-i"></i>
+                <div class="open__icon-text">{{res 'openNew'}}</div>
+            </div>
         {{/if}}
         {{#if canOpenDemo}}
             {{#ifeq demoOpened false}}
-            <div class="open__icon open__icon-demo">
-                <i class="fa fa-magic open__icon-i"></i>
-                <div class="open__icon-text">{{res 'openDemo'}}</div>
-            </div>
+                <div class="open__icon open__icon-demo" tabindex="3">
+                    <i class="fa fa-magic open__icon-i"></i>
+                    <div class="open__icon-text">{{res 'openDemo'}}</div>
+                </div>
             {{/ifeq}}
         {{/if}}
         {{#if showMore}}
-        <div class="open__icon open__icon-more">
-            <i class="fa fa-ellipsis-h open__icon-i"></i>
-            <div class="open__icon-text">{{res 'openMore'}}</div>
-        </div>
+            <div class="open__icon open__icon-more" tabindex="4">
+                <i class="fa fa-ellipsis-h open__icon-i"></i>
+                <div class="open__icon-text">{{res 'openMore'}}</div>
+            </div>
         {{/if}}
         {{#if showLogo}}
             <div class="open__icon open__icon-more">
@@ -36,31 +36,31 @@
     </div>
     <div class="open__icons open__icons--lower hide">
         {{#each storageProviders as |prv|}}
-        <div class="open__icon open__icon-storage svg-btn" data-storage="{{prv.name}}">
-            {{#if prv.icon}}<i class="fa fa-{{prv.icon}} open__icon-i"></i>{{/if}}
-            {{#if prv.iconSvg}}<div class="open__icon-svg">{{{prv.iconSvg}}}</div>{{/if}}
-            <div class="open__icon-text">{{res prv.name}}</div>
-        </div>
+            <div class="open__icon open__icon-storage svg-btn" data-storage="{{prv.name}}" tabindex="{{add @index 5}}">
+                {{#if prv.icon}}<i class="fa fa-{{prv.icon}} open__icon-i"></i>{{/if}}
+                {{#if prv.iconSvg}}<div class="open__icon-svg">{{{prv.iconSvg}}}</div>{{/if}}
+                <div class="open__icon-text">{{res prv.name}}</div>
+            </div>
         {{/each}}
         {{#if canImportXml}}
-        <div class="open__icon open__icon-import-xml">
-            <i class="fa fa-code open__icon-i"></i>
-            <div class="open__icon-text">{{ res 'openXml' }}</div>
-        </div>
+            <div class="open__icon open__icon-import-xml" tabindex="10">
+                <i class="fa fa-code open__icon-i"></i>
+                <div class="open__icon-text">{{ res 'openXml' }}</div>
+            </div>
         {{/if}}
         {{#if canOpenDemo}}
             {{#if demoOpened}}
-            <div class="open__icon open__icon-demo">
-                <i class="fa fa-magic open__icon-i"></i>
-                <div class="open__icon-text">{{res 'openDemo'}}</div>
-            </div>
+                <div class="open__icon open__icon-demo" tabindex="11">
+                    <i class="fa fa-magic open__icon-i"></i>
+                    <div class="open__icon-text">{{res 'openDemo'}}</div>
+                </div>
             {{/if}}
         {{/if}}
         {{#if canOpenSettings}}
-        <div class="open__icon open__icon-settings">
-            <i class="fa fa-cog open__icon-i"></i>
-            <div class="open__icon-text">{{res 'settings'}}</div>
-        </div>
+            <div class="open__icon open__icon-settings" tabindex="12">
+                <i class="fa fa-cog open__icon-i"></i>
+                <div class="open__icon-text">{{res 'settings'}}</div>
+            </div>
         {{/if}}
     </div>
     <div class="open__pass-area">
@@ -74,12 +74,12 @@
         </div>
         <div class="open__pass-field-wrap">
             <input class="open__pass-input" type="password" size="30" autocomplete="new-password" maxlength="1024"
-                   placeholder="{{#if canOpen}}{{res 'openClickToOpen'}}{{/if}}" readonly />
-            <div class="open__pass-enter-btn"><i class="fa fa-level-down fa-rotate-90"></i></div>
+                   placeholder="{{#if canOpen}}{{res 'openClickToOpen'}}{{/if}}" readonly tabindex="13" />
+            <div class="open__pass-enter-btn" tabindex="14"><i class="fa fa-level-down fa-rotate-90"></i></div>
             <div class="open__pass-opening-icon"><i class="fa fa-spinner fa-spin"></i></div>
         </div>
         <div class="open__settings">
-            <div class="open__settings-key-file hide">
+            <div class="open__settings-key-file hide" tabindex="15">
                 <i class="fa fa-key open__settings-key-file-icon">
                 </i><span class="open__settings-key-file-name">{{res 'openKeyFile'}}</span>
                 {{#if canOpenKeyFromDropbox}}<span class="open__settings-key-file-dropbox"> {{res 'openKeyFileDropbox'}}</span>{{/if}}
@@ -87,12 +87,12 @@
         </div>
         <div class="open__last">
             {{#each lastOpenFiles as |file|}}
-            <div class="open__last-item" data-id="{{file.id}}" title="{{file.path}}">
-                {{#if file.icon}}<i class="fa fa-{{file.icon}} open__last-item-icon"></i>{{/if}}
-                {{#if file.iconSvg}}<div class="open__last-item-icon open__last-item-icon--svg">{{{file.iconSvg}}}</div>{{/if}}
-                <span class="open__last-item-text">{{file.name}}</span>
-                {{#if ../canRemoveLatest}}<i class="fa fa-times open__last-item-icon-del"></i>{{/if}}
-            </div>
+                <div class="open__last-item" data-id="{{file.id}}" title="{{file.path}}" tabindex="{{add @index 16}}">
+                    {{#if file.icon}}<i class="fa fa-{{file.icon}} open__last-item-icon"></i>{{/if}}
+                    {{#if file.iconSvg}}<div class="open__last-item-icon open__last-item-icon--svg">{{{file.iconSvg}}}</div>{{/if}}
+                    <span class="open__last-item-text">{{file.name}}</span>
+                    {{#if ../canRemoveLatest}}<i class="fa fa-times open__last-item-icon-del"></i>{{/if}}
+                </div>
             {{/each}}
         </div>
     </div>

package.json

@@ -70,7 +70,8 @@
     "test": "grunt test",
     "postinstall": "cd desktop && npm install",
     "copy-beta": "grunt --skip-sign && sed 's/<html manifest=\"manifest.appcache\">//' dist/index.html > ../keeweb-beta/index.html && cd ../keeweb-beta && git add index.html && git commit -a -m 'beta' && git push origin master",
-    "electron": "electron desktop --htmlpath=http://localhost:8085/tmp/"
+    "electron": "electron desktop --htmlpath=http://localhost:8085/tmp/",
+    "dev": "grunt dev --skip-sign"
   },
   "author": {
     "name": "Antelle",