[FIX] web: list: execute group button with keyboard navigation

Recent work on the list view allowed to add buttons in group
headers (see 015958dc17). However, we couldn't execute the action
of the button by pressing Enter, because the Enter keydown was
stopPropagated by another handler (folding the group).

This rev. makes this work, and also improves a bit the style of
the buttons in group headers.

Task 1915702

2 files changed, 46 insertions, 17 deletions

diff --git a/addons/web/static/src/js/views/list/list_renderer.js b/addons/web/static/src/js/views/list/list_renderer.js
index 471598ca4e4..cbe99715fb5 100644
--- a/addons/web/static/src/js/views/list/list_renderer.js
+++ b/addons/web/static/src/js/views/list/list_renderer.js
@@ -444,7 +444,6 @@ var ListRenderer = BasicRenderer.extend({
      * @returns {jQuery} a <button> element
      */
     _renderGroupButton: function (list, node) {
-        var self = this;
         var $button = viewUtils.renderButtonFromNode(node, {
             extraClass: node.attrs.icon ? 'o_icon_button' : undefined,
             textAsTitle: !!node.attrs.icon,
@@ -452,20 +451,10 @@ var ListRenderer = BasicRenderer.extend({
         this._handleAttributes($button, node);
         this._registerModifiers(node, list.groupData, $button);
 
-        // TODO this should be moved to a handler
-        $button.on("click", function (e) {
-            e.stopPropagation();
-            if (node.attrs.type === 'edit') {
-                self.trigger_up('group_edit_button_clicked', {
-                    record: list.groupData,
-                });
-            } else {
-                self.trigger_up('button_clicked', {
-                    attrs: node.attrs,
-                    record: list.groupData,
-                });
-            }
-        });
+        // TODO this should be moved to event handlers
+        $button.on("click", this._onGroupButtonClicked.bind(this, list.groupData, node));
+        $button.on("keydown", this._onGroupButtonKeydown.bind(this));
+
         return $button;
     },
     /**
@@ -893,6 +882,40 @@ var ListRenderer = BasicRenderer.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * @private
+     * @param {Object} record a record dataPoint on which the button applies
+     * @param {Object} node arch node of the button
+     * @param {Object} node.attrs the attrs of the button in the arch
+     * @param {jQueryEvent} ev
+     */
+    _onGroupButtonClicked: function (record, node, ev) {
+        ev.stopPropagation();
+        if (node.attrs.type === 'edit') {
+            this.trigger_up('group_edit_button_clicked', {
+                record: record,
+            });
+        } else {
+            this.trigger_up('button_clicked', {
+                attrs: node.attrs,
+                record: record,
+            });
+        }
+    },
+    /**
+     * If the user presses ENTER on a group header button, we want to execute
+     * the button action. This is done automatically as the click handler is
+     * called. However, we have to stop the propagation of the event to prevent
+     * another handler from closing the group (see _onKeyDown).
+     *
+     * @private
+     * @param {jQueryEvent} ev
+     */
+    _onGroupButtonKeydown: function (ev) {
+        if (ev.keyCode === $.ui.keyCode.ENTER) {
+            ev.stopPropagation();
+        }
+    },
+    /**
      * Manages the keyboard events on the list. If the list is not editable, when the user navigates to
      * a cell using the keyboard, if he presses enter, enter the model represented by the line
      *
@@ -947,8 +970,11 @@ var ListRenderer = BasicRenderer.extend({
                 break;
         }
         if ($futureCell) {
-            // If the cell contains activable elements, focus them instead
-            var $activables = $futureCell.find(':focusable');
+            // If the cell contains activable elements, focus them instead (except if it is in a
+            // group header, in which case we want to activate the whole header, so that we can
+            // open/close it with RIGHT/LEFT keystrokes)
+            var isInGroupHeader = $futureCell.closest('tr').hasClass('o_group_header');
+            var $activables = !isInGroupHeader && $futureCell.find(':focusable');
             if ($activables.length) {
                 $activables[0].focus();
             } else {
diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss
index 86b989dbd10..45744a7a1f8 100644
--- a/addons/web/static/src/scss/list_view.scss
+++ b/addons/web/static/src/scss/list_view.scss
@@ -97,6 +97,7 @@
     // Grouped list views
     tbody > tr.o_group_header {
         > th, > td {
+            vertical-align: middle;
             padding-top: ($table-cell-padding-sm*2);
             padding-bottom: ($table-cell-padding-sm*2);
         }
@@ -105,8 +106,10 @@
         }
         .o_group_buttons {
             display: inline-block;
+            margin-left: 10px;
 
             > button {
+                @include o-hover-text-color($o-brand-primary, darken($o-brand-primary, 20%));
                 background-color: transparent;
                 border: none;
                 padding-top: 0;