[IMP] account: review the keyboard navigation for the reconciliation widget

Task 2072312

* Ensure that the css is from Odoo and not from the browser
* Only use up/down to navigate
* Use Enter to validate a line
* Remove the accesskeys

addons/account/static/src/js/reconciliation/reconciliation_action.js

@@ -57,15 +57,18 @@ var StatementAction = AbstractAction.extend({
         var widget = false;
         switch (ev.data.direction) {
             case 'up':
-            case 'previous':
                 ev.stopPropagation();
                 widget = this._getWidget(non_reconciled_keys[currentIndex-1]);
                 break;
             case 'down':
-            case 'next':
                 ev.stopPropagation();
                 widget = this._getWidget(non_reconciled_keys[currentIndex+1]);
                 break;
+            case 'validate':
+                ev.stopPropagation();
+                widget = this._getWidget(non_reconciled_keys[currentIndex]);
+                widget.$('caption .o_buttons button:visible').click();
+                break;
         }
         if (widget) widget.$el.focus();
     },
@@ -259,7 +262,10 @@ var StatementAction = AbstractAction.extend({
                 self._getWidget(handle).update(line);
             }).guardedCatch(function(){
                 self._getWidget(handle).update(line);
-            });
+            }).then(function() {
+                self._getWidget(handle).$el.focus();
+            }
+            );
         }
         return handle;
     },

addons/account/static/src/js/reconciliation/reconciliation_renderer.js

@@ -219,6 +219,7 @@ var LineRenderer = Widget.extend(FieldManagerMixin, {
         'click .accounting_view tfoot': '_onChangeTab',
         'click': '_onTogglePanel',
         'click .o_field_widget': '_onStopPropagation',
+        'keydown .o_input': '_onStopPropagation',
         'click .o_notebook li a': '_onChangeTab',
         'click .cell': '_onEditAmount',
         'change input.filter': '_onFilterChange',
@@ -241,40 +242,19 @@ var LineRenderer = Widget.extend(FieldManagerMixin, {
 
     _onKeydown: function (ev) {
         switch (ev.which) {
-            case $.ui.keyCode.TAB:
-                var event = this.trigger_up('navigation_move', {
-                    direction: ev.shiftKey ? 'previous' : 'next',
-                    handle: this.handle,
-                });
-                if (event.is_stopped()) {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                }
-                break;
             case $.ui.keyCode.ENTER:
-                this.trigger_up('navigation_move', {direction: 'next_line', handle: this.handle});
-                break;
-            case $.ui.keyCode.ESCAPE:
-                this.trigger_up('navigation_move', {direction: 'cancel', handle: this.handle, originalEvent: ev});
+                this.trigger_up('navigation_move', {direction: 'validate', handle: this.handle});
                 break;
             case $.ui.keyCode.UP:
                 ev.stopPropagation();
                 ev.preventDefault();
                 this.trigger_up('navigation_move', {direction: 'up', handle: this.handle});
                 break;
-            case $.ui.keyCode.RIGHT:
-                ev.stopPropagation();
-                this.trigger_up('navigation_move', {direction: 'right', handle: this.handle});
-                break;
             case $.ui.keyCode.DOWN:
                 ev.stopPropagation();
                 ev.preventDefault();
                 this.trigger_up('navigation_move', {direction: 'down', handle: this.handle});
                 break;
-            case $.ui.keyCode.LEFT:
-                ev.stopPropagation();
-                this.trigger_up('navigation_move', {direction: 'left', handle: this.handle});
-                break;
         }
     },
 
@@ -477,12 +457,6 @@ var LineRenderer = Widget.extend(FieldManagerMixin, {
             });
         }
         this.$('.create .add_line').toggle(!!state.balance.amount_currency);
-
-        if (this.$el.is(':focus-within')) {
-            this.$('caption .o_buttons button:not(:disabled):visible').attr('accesskey', 'V');
-        } else {
-            this.$('caption .o_buttons button').attr('accesskey', '');
-        }
     },
 
     updatePartialAmount: function(line_id, amount) {

addons/account/static/src/scss/account_reconciliation.scss

@@ -234,6 +234,14 @@
         &:not(:focus-within) .o_web_accesskey_overlay {
             display: none;
         }
+        &:focus caption .o_buttons button {
+            outline: none;
+            box-shadow: 4px 4px 4px 0px $o-enterprise-color;
+        }
+        &:focus{
+            outline: none;
+            box-shadow: 0 0 0 0;
+        }
     }
 
     .o_reconcile_models .btn-primary {

addons/account/static/src/xml/account_reconciliation.xml

@@ -93,8 +93,8 @@
             <caption style="caption-side: top;">
                 <div class="float-right o_buttons">
                     <button t-attf-class="o_no_valid btn btn-secondary #{state.balance.type &lt; 0 ? '' : 'd-none'}" disabled="disabled" data-toggle="tooltip" title="Select a partner or choose a counterpart" accesskey="">Validate</button>
-                    <button t-attf-class="o_validate btn btn-secondary #{!state.balance.type ? '' : 'd-none'}" accesskey="">Validate</button>
-                    <button t-attf-class="o_reconcile btn btn-primary #{state.balance.type &gt; 0 ? '' : 'd-none'}" accesskey="">Validate</button>
+                    <button t-attf-class="o_validate btn btn-secondary #{!state.balance.type ? '' : 'd-none'}">Validate</button>
+                    <button t-attf-class="o_reconcile btn btn-primary #{state.balance.type &gt; 0 ? '' : 'd-none'}">Validate</button>
                 </div>
             </caption>
             <thead>

addons/account/views/account_move_views.xml

@@ -164,7 +164,7 @@
             <field name="model">account.move.line</field>
             <field eval="1" name="priority"/>
             <field name="arch" type="xml">
-                <tree string="Journal Items" create="false" expand="context.get('expand', False)" default_order="credit">
+                <tree string="Journal Items" create="false" expand="context.get('expand', False)">
                     <field name="date" optional="show" attrs="{'readonly':[('parent_state','=','posted')]}"/>
                     <field name="ref" optional="hide"/>
                     <field name="move_id" optional="show" readonly="1"/>