From 0d2c9257f713c57ecb105edf4f1987452e6b70e8 Mon Sep 17 00:00:00 2001 From: "Martin R. Hristov" Date: Wed, 4 Dec 2024 16:34:04 +0200 Subject: [PATCH 1/3] fix(ui5-input): remove initial tabindex 0 from suggestions FIXES: #9340 --- packages/main/src/SuggestionItem.ts | 7 +++++++ packages/main/src/SuggestionItemCustom.ts | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/packages/main/src/SuggestionItem.ts b/packages/main/src/SuggestionItem.ts index 5c69d934eba3..1feb8d9dfd8c 100644 --- a/packages/main/src/SuggestionItem.ts +++ b/packages/main/src/SuggestionItem.ts @@ -55,6 +55,13 @@ class SuggestionItem extends ListItemBase implements IInputSuggestionItemSelecta this.setAttribute("desktop", ""); } } + + onBeforeRendering(): void { + super.onBeforeRendering(); + + // list's item navigation always sets tabIndex to 0 to first item + this.forcedTabIndex = "-1"; + } } SuggestionItem.define(); diff --git a/packages/main/src/SuggestionItemCustom.ts b/packages/main/src/SuggestionItemCustom.ts index 99d0910d0126..7a5b5b7fc63a 100644 --- a/packages/main/src/SuggestionItemCustom.ts +++ b/packages/main/src/SuggestionItemCustom.ts @@ -48,6 +48,13 @@ class SuggestionItemCustom extends ListItemBase implements IInputSuggestionItemS */ @slot({ type: Node, "default": true, invalidateOnChildChange: true }) content!: Array; + + onBeforeRendering(): void { + super.onBeforeRendering(); + + // list's item navigation always sets tabIndex to 0 to first item + this.forcedTabIndex = "-1"; + } } SuggestionItemCustom.define(); From 8a6fb5c7f2ea5051c46f94fc0b84871c1c918ecc Mon Sep 17 00:00:00 2001 From: "Martin R. Hristov" Date: Thu, 5 Dec 2024 16:47:24 +0200 Subject: [PATCH 2/3] fix: disable ItemNavigation for internal list --- packages/main/cypress/specs/Input.cy.ts | 97 +++++++++++++++++++++++ packages/main/src/Input.ts | 3 + packages/main/src/ListItemBase.ts | 2 +- packages/main/src/SuggestionItem.ts | 7 +- packages/main/src/SuggestionItemCustom.ts | 7 +- 5 files changed, 105 insertions(+), 11 deletions(-) diff --git a/packages/main/cypress/specs/Input.cy.ts b/packages/main/cypress/specs/Input.cy.ts index a909860b5287..906ed0eb7201 100644 --- a/packages/main/cypress/specs/Input.cy.ts +++ b/packages/main/cypress/specs/Input.cy.ts @@ -1,6 +1,10 @@ import { html } from "lit"; import "../../src/Input.js"; import type Input from "../../src/Input.js"; +import "../../src/features/InputSuggestions.js"; +import "../../src/SuggestionItem.js"; +import "../../src/SuggestionItemCustom.js"; +import "../../src/SuggestionItemGroup.js"; describe("Input Tests", () => { it("tets input event prevention", () => { @@ -29,4 +33,97 @@ describe("Input Tests", () => { .find("input") .should("have.value", "test"); }); + + it("tests custom suggestion items tabindex", () => { + cy.mount(html` + + Item 1 + Item 2 + Item 3 + + `); + + cy.get("[ui5-input]") + .as("input"); + + cy.get("@input") + .shadow() + .find("input") + .as("inner"); + + cy.get("@inner").realClick(); + cy.get("@inner").type("i"); + cy.get("@inner").realPress("ArrowDown"); + + cy.get("@input") + .find("[ui5-suggestion-item-custom]") + .shadow() + .find("li") + .should("not.have.attr", "tabindex", "0"); + }); + + it("tests regular suggestion items tabindex", () => { + cy.mount(html` + + + + + + `); + + cy.get("[ui5-input]") + .as("input"); + + cy.get("@input") + .shadow() + .find("input") + .as("inner"); + + cy.get("@inner").realClick(); + cy.get("@inner").type("i"); + cy.get("@inner").realPress("ArrowDown"); + + cy.get("@input") + .find("ui5-suggestion-item") + .shadow() + .find("li") + .should("not.have.attr", "tabindex", "0"); + }); + + it("tests suggestion group items tabindex", () => { + cy.mount(html` + + + + + + + + + + + + + `); + + cy.get("[ui5-input]") + .as("input"); + + cy.get("@input") + .shadow() + .find("input") + .as("inner"); + + cy.get("@inner").realClick(); + cy.get("@inner").type("i"); + cy.get("@inner").realPress("ArrowDown"); + + cy.get("@input") + .find("[ui5-suggestion-item-group]") + .shadow() + .find("[ui5-li-group-header]") + .shadow() + .find("ul") + .should("not.have.attr", "tabindex", "0"); + }); }); diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 9554155e65c7..258e7aefba80 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -737,6 +737,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement if (this.showSuggestions && this.Suggestions?._getPicker()) { this._listWidth = this.Suggestions._getListWidth(); + + // disabled ItemNavigation from the list since we are not using it + this.Suggestions._getList()._itemNavigation._getItems = () => []; } if (this._performTextSelection) { diff --git a/packages/main/src/ListItemBase.ts b/packages/main/src/ListItemBase.ts index 3b80487df952..df74c80993ba 100644 --- a/packages/main/src/ListItemBase.ts +++ b/packages/main/src/ListItemBase.ts @@ -240,7 +240,7 @@ class ListItemBase extends UI5Element implements ITabbable { return false; } - get _effectiveTabIndex() { + get _effectiveTabIndex(): number | undefined | string { if (!this._focusable) { return -1; } diff --git a/packages/main/src/SuggestionItem.ts b/packages/main/src/SuggestionItem.ts index 1feb8d9dfd8c..ceec2eb6326b 100644 --- a/packages/main/src/SuggestionItem.ts +++ b/packages/main/src/SuggestionItem.ts @@ -56,11 +56,8 @@ class SuggestionItem extends ListItemBase implements IInputSuggestionItemSelecta } } - onBeforeRendering(): void { - super.onBeforeRendering(); - - // list's item navigation always sets tabIndex to 0 to first item - this.forcedTabIndex = "-1"; + get _effectiveTabIndex(): string { + return "-1"; } } diff --git a/packages/main/src/SuggestionItemCustom.ts b/packages/main/src/SuggestionItemCustom.ts index 7a5b5b7fc63a..64fc744478da 100644 --- a/packages/main/src/SuggestionItemCustom.ts +++ b/packages/main/src/SuggestionItemCustom.ts @@ -49,11 +49,8 @@ class SuggestionItemCustom extends ListItemBase implements IInputSuggestionItemS @slot({ type: Node, "default": true, invalidateOnChildChange: true }) content!: Array; - onBeforeRendering(): void { - super.onBeforeRendering(); - - // list's item navigation always sets tabIndex to 0 to first item - this.forcedTabIndex = "-1"; + get _effectiveTabIndex(): string { + return "-1"; } } From 737a2a2d8289e36ef53bf0409f25506d7138c08e Mon Sep 17 00:00:00 2001 From: "Martin R. Hristov" Date: Mon, 9 Dec 2024 16:37:52 +0200 Subject: [PATCH 3/3] fix: add role to the items --- packages/main/cypress/specs/Input.cy.ts | 6 ++++-- packages/main/src/SuggestionItem.hbs | 4 ++++ packages/main/src/SuggestionItemCustom.hbs | 4 ++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/main/cypress/specs/Input.cy.ts b/packages/main/cypress/specs/Input.cy.ts index 906ed0eb7201..50547f81eea1 100644 --- a/packages/main/cypress/specs/Input.cy.ts +++ b/packages/main/cypress/specs/Input.cy.ts @@ -59,7 +59,8 @@ describe("Input Tests", () => { .find("[ui5-suggestion-item-custom]") .shadow() .find("li") - .should("not.have.attr", "tabindex", "0"); + .should("not.have.attr", "tabindex", "0") + .should("have.attr", "role", "option"); }); it("tests regular suggestion items tabindex", () => { @@ -87,7 +88,8 @@ describe("Input Tests", () => { .find("ui5-suggestion-item") .shadow() .find("li") - .should("not.have.attr", "tabindex", "0"); + .should("not.have.attr", "tabindex", "0") + .should("have.attr", "role", "option"); }); it("tests suggestion group items tabindex", () => { diff --git a/packages/main/src/SuggestionItem.hbs b/packages/main/src/SuggestionItem.hbs index c474814b1cce..8838303bb378 100644 --- a/packages/main/src/SuggestionItem.hbs +++ b/packages/main/src/SuggestionItem.hbs @@ -11,4 +11,8 @@ {{/if}} +{{/inline}} + +{{#*inline "listItemAttributes"}} + role="option" {{/inline}} \ No newline at end of file diff --git a/packages/main/src/SuggestionItemCustom.hbs b/packages/main/src/SuggestionItemCustom.hbs index fb649c1cafd5..d84e85dd3be2 100644 --- a/packages/main/src/SuggestionItemCustom.hbs +++ b/packages/main/src/SuggestionItemCustom.hbs @@ -3,3 +3,7 @@ {{#*inline "listItemContent"}} {{/inline}} + +{{#*inline "listItemAttributes"}} + role="option" +{{/inline}} \ No newline at end of file