Use tab to move between comments

customize.dist/src/less2/include/buttons.less

@@ -99,7 +99,7 @@
             margin: 0;
         }
 
-        &:hover, &:active {
+        &:hover, &:active, &:focus {
             background-color: lighten(@alertify-fore, 35%);
         }
 
@@ -113,7 +113,7 @@
             background-color: @colortheme_alertify-red;
             border-color: @colortheme_alertify-red-border;
             color: @colortheme_alertify-red-color;
-            &:hover, &:active {
+            &:hover, &:active, &:focus {
                 background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
             }
         }
@@ -121,7 +121,7 @@
         &.danger-alt, &.btn-danger-alt {
             border-color: @colortheme_alertify-red;
             color: @colortheme_alertify-red;
-            &:hover, &:active {
+            &:hover, &:active, &:focus {
                 color: @colortheme_alertify-red-color;
                 background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
             }
@@ -131,7 +131,7 @@
             background-color: @colortheme_alertify-green;
             border-color: @colortheme_alertify-green-border;
             color: @colortheme_alertify-green-color;
-            &:hover, &:active {
+            &:hover, &:active, &:focus {
                 background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%));
             }
         }
@@ -141,7 +141,7 @@
             color: @colortheme_alertify-primary-text;
             border-color: @colortheme_alertify-primary-border;
             font-weight: bold;
-            &:hover, &:active {
+            &:hover, &:active, &:focus {
                 background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%));
             }
         }
@@ -149,7 +149,7 @@
         &.cancel, &.btn-cancel {
             border-color: @colortheme_alertify-cancel-border;
             color: @colortheme_alertify-cancel-border;
-            &:hover, &:hover {
+            &:hover, &:hover, &:focus {
                 background-color: fade(@colortheme_alertify-cancel-border, 25%);
             }
         }

customize.dist/src/less2/include/comments.less

@@ -85,6 +85,9 @@
         display: none;
         text-align: right;
         margin-top: 5px;
+        button {
+            margin-bottom: 0 !important;
+        }
         button:not(:last-child) {
             margin-right: 10px;
         }

www/pad/comments.js

@@ -91,14 +91,20 @@ define([
         var userData = Env.metadataMgr.getUserData();
         var name = Util.fixHTML(userData.name || Messages.anonymous);
         var avatar = h('span.cp-avatar');
-        var textarea = h('textarea');
+        var textarea = h('textarea', {
+            tabindex: 1
+        });
         Env.common.displayAvatar($(avatar), userData.avatar, name);
 
-        var cancel = h('button.btn.btn-cancel', [
+        var cancel = h('button.btn.btn-cancel', {
+            tabindex: 1
+        }, [
             h('i.fa.fa-times'),
             Messages.cancel
         ]);
-        var submit = h('button.btn.btn-primary', [
+        var submit = h('button.btn.btn-primary', {
+            tabindex: 1
+        }, [
             h('i.fa.fa-paper-plane-o'),
             Messages.comments_submit
         ]);
@@ -198,11 +204,15 @@ define([
 
             });
 
-            var reply = h('button.btn.btn-secondary', [
+            var reply = h('button.btn.btn-secondary', {
+                tabindex: 1
+            }, [
                 h('i.fa.fa-reply'),
                 Messages.comments_reply
             ]);
-            var resolve = h('button.btn.btn-primary', [
+            var resolve = h('button.btn.btn-primary', {
+                tabindex: 1
+            }, [
                 h('i.fa.fa-check'),
                 Messages.comments_resolve
             ]);
@@ -282,7 +292,7 @@ define([
                 if (!visible) { $last[0].scrollIntoView(); }
             };
 
-            $div.click(function () {
+            $div.on('click focus', function () {
                 if ($div.hasClass('cp-comment-active')) { return; }
                 Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
                 $div.addClass('cp-comment-active');