From 378edfa5661fcc71d93ea560e4aa94d259943a64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Fri, 17 Mar 2023 08:33:39 +0000
Subject: [PATCH] [FIX] web: make notebook tab focusable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, the notebook tabs were skipped when navigating with
the keyboard tab or shift+tab keyboard shortcuts. This commit simply
modify the tabindex to 0, so they are not ignored.

Users can now move through the tabs with the tab key, and press enter to
activate a specific tab.

Note that there is not tests because that kind of user interaction cannot
be simulated from the js code

closes odoo/odoo#116874

Task: #2622077
X-original-commit: 1a9a4aef728b406b4c3a1c99cb66e3fc4fd4ff52
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Géry Debongnie <ged@odoo.com>
---
 .../web/static/src/core/notebook/notebook.xml |  2 +-
 .../views/fields/one2many_field_tests.js      | 21 ++++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/addons/web/static/src/core/notebook/notebook.xml b/addons/web/static/src/core/notebook/notebook.xml
index 84333bcbd8e..755e13e0a1d 100644
--- a/addons/web/static/src/core/notebook/notebook.xml
+++ b/addons/web/static/src/core/notebook/notebook.xml
@@ -6,7 +6,7 @@
             <div class="o_notebook_headers" t-att-class="{ 'm-0': props.orientation === 'vertical' }">
                 <ul t-attf-class="nav nav-tabs {{ props.orientation === 'horizontal' ? 'flex-row flex-nowrap' : 'flex-column p-0' }}">
                     <li t-foreach="navItems" t-as="navItem" t-key="navItem[0]" class="nav-item flex-nowrap cursor-pointer" t-if="navItem[1].isVisible">
-                        <a class="nav-link" t-attf-class="{{ navItem[0] === state.currentPage ? 'active' : '' }} {{ props.orientation === 'vertical' ? 'p-3 rounded-0' : '' }} {{ navItem[1].className }}" t-att-name="navItem[1].name" t-on-click.prevent="() => this.activatePage(navItem[0])" href="#" role="tab" tabindex="-1" t-esc="navItem[1].title"/>
+                        <a class="nav-link" t-attf-class="{{ navItem[0] === state.currentPage ? 'active' : '' }} {{ props.orientation === 'vertical' ? 'p-3 rounded-0' : '' }} {{ navItem[1].className }}" t-att-name="navItem[1].name" t-on-click.prevent="() => this.activatePage(navItem[0])" href="#" role="tab" tabindex="0" t-esc="navItem[1].title"/>
                     </li>
                 </ul>
             </div>
diff --git a/addons/web/static/tests/views/fields/one2many_field_tests.js b/addons/web/static/tests/views/fields/one2many_field_tests.js
index 0d74753e724..b69cbe1dd72 100644
--- a/addons/web/static/tests/views/fields/one2many_field_tests.js
+++ b/addons/web/static/tests/views/fields/one2many_field_tests.js
@@ -11773,8 +11773,10 @@ QUnit.module("Fields", (hooks) => {
 
             target.querySelector("[name=qux] input").focus();
             assert.strictEqual(target.querySelector("[name=qux] input"), document.activeElement);
-
-            getNextTabableElement(target).focus(); // go inside one2many
+            // next tabable element is notebook tab
+            getNextTabableElement(target).focus();
+            // go inside one2many
+            getNextTabableElement(target).focus();
             await nextTick();
             assert.strictEqual(
                 target.querySelector(".o_field_x2many_list_row_add a"),
@@ -11819,7 +11821,10 @@ QUnit.module("Fields", (hooks) => {
             target.querySelector("[name=qux] input").focus();
             assert.strictEqual(document.activeElement, target.querySelector("[name=qux] input"));
 
-            getNextTabableElement(target).focus(); // go inside one2many
+            // next tabable element is notebook tab
+            getNextTabableElement(target).focus();
+            // go inside one2many
+            getNextTabableElement(target).focus();
             await nextTick();
 
             assert.strictEqual(
@@ -11881,7 +11886,10 @@ QUnit.module("Fields", (hooks) => {
             target.querySelector("[name=qux] input").focus();
             assert.strictEqual(document.activeElement, target.querySelector("[name=qux] input"));
 
-            getNextTabableElement(target).focus(); // go inside one2many
+            // next tabable element is notebook tab
+            getNextTabableElement(target).focus();
+            // go inside one2many
+            getNextTabableElement(target).focus();
             await nextTick();
 
             assert.strictEqual(
@@ -11961,7 +11969,10 @@ QUnit.module("Fields", (hooks) => {
             target.querySelector("[name=qux] input").focus();
             assert.strictEqual(target.querySelector("[name=qux] input"), document.activeElement);
 
-            getNextTabableElement(target).focus(); // go inside one2many
+            // next tabable element is notebook tab
+            getNextTabableElement(target).focus();
+            // go inside one2many
+            getNextTabableElement(target).focus();
             await nextTick();
             assert.strictEqual(
                 target.querySelector(".o_field_x2many_list_row_add a"),