pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: make notebook tab focusable

Browse Source 
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>
This commit is contained in:
Géry Debongnie
2023-03-28 23:17:52 +02:00
parent b22cecc0a2
commit 378edfa566
2 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/notebook/notebook.xml
+1 -1
View File
@@ -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>
addons/web/static/tests/views/fields/one2many_field_tests.js
+16 -5
View File
@@ -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"),