[IMP] web: keyboard navigation in form view

The goal of this commit is to allow fast entry of the same model using
the keyboard for navigating through the form once, by blocking the user
from advancing in the form if there is a required field or once they
went through the form once to get them to a primary action (button)

This commit includes the following changes
    1) Enable moving forward from field to field using the TAB key
    2) Entering the one to many and many to many using the TAB key
        a. When entering it, set the focus on the "add new line" link or
            button
		b. When adding a new line, set the focus on the field visible
            editable field of the new line
        c. Discard adding a new line with ESC key
        d. If the user leaves the first field empty and uses TAB, we
            will cancel the adding of a new line and move to the next
            field of the form
    3) When a field is required and not filled in, do not allow the user
        to move out of the field using the TAB key (the user is still
        allowed to use the mouse though), mark the field as invalid
        instead
    4) After going though the form once, using the TAB key on the last
        field will move the focus to the first primary button of the page
    5) When the focus is on a primary button (EDIT/SAVE), the user cannot
        move the focus forward using the TAB key. Hitting TAB again will
        display a tooltip telling to hit ENTER to activate the button.
        The mouse is still available to move the focus.
    6) When the user saves, the focus is placed on the first primary
        button of the form renderer (like VALIDATE for a new invoice)
    7) On dialogs, primary buttons should stop the users from moving out
        of them, and showing a popup if the user tries
    8) When closing a dialog, the focus will be moved back to the widget
        that opened it.

This commit does not include the following features
    1) Navigation with the keyboard on a selection one to man
    2) Navigate between tabs in a form using the keyboard
    3) Cancelling the adding of a new line in a many to many using the
        ESC key do not set the focus correctly
    4) Enhancing the focusses fields (like blue underline)

1 files changed, 17 insertions, 1 deletions

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index be992c8f38a..94536d30dd2 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -209,7 +209,7 @@
 
 <t t-name="WebClient.DebugManager">
     <li class="o_debug_manager">
-        <a href="#" title="Open Developer Tools" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+        <a href="#" title="Open Developer Tools" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
             <span class="fa fa-bug"/>
         </a>
         <ul class="dropdown-menu o_debug_dropdown" role="menu"/>
@@ -411,6 +411,22 @@
         </button>
     </div>
 </t>
+<t t-name="SaveCancelButton.tooltip">
+    <div class="oe_tooltip_string">
+        <div class="tooltip-inner">
+            Hit ENTER to SAVE<br/>
+            Hit ESCAPE to DISCARD
+        </div>
+    </div>
+</t>
+<t t-name="CreateButton.tooltip">
+    <div class="oe_tooltip_string">
+        <div class="tooltip-inner">
+            Hit ENTER to CREATE<br/>
+            Hit DOWN to navigate to the list bellow
+        </div>
+    </div>
+</t>
 <form t-name="FormView.set_default">
     <t t-set="args" t-value="widget.args"/>
     <table style="width: 100%">