From a8eeac6e5ab8e10081815673b5622d9254790e0d Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 23 Apr 2020 17:42:28 +0200
Subject: [PATCH] Use tab to move between comments

---
 customize.dist/src/less2/include/buttons.less | 12 +++++-----
 .../src/less2/include/comments.less           |  3 +++
 www/pad/comments.js                           | 22 ++++++++++++++-----
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/customize.dist/src/less2/include/buttons.less b/customize.dist/src/less2/include/buttons.less
index c3ef85b1c..7936a5ee6 100644
--- a/customize.dist/src/less2/include/buttons.less
+++ b/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%);
             }
         }
diff --git a/customize.dist/src/less2/include/comments.less b/customize.dist/src/less2/include/comments.less
index b217cdae1..be72e71f6 100644
--- a/customize.dist/src/less2/include/comments.less
+++ b/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;
         }
diff --git a/www/pad/comments.js b/www/pad/comments.js
index f0f0e9cfc..6a75d1575 100644
--- a/www/pad/comments.js
+++ b/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');