diff --git a/packages/main/cypress/specs/Input.cy.ts b/packages/main/cypress/specs/Input.cy.ts index a909860b5287..50547f81eea1 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,99 @@ 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") + .should("have.attr", "role", "option"); + }); + + 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") + .should("have.attr", "role", "option"); + }); + + 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.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/SuggestionItem.ts b/packages/main/src/SuggestionItem.ts index 5c69d934eba3..ceec2eb6326b 100644 --- a/packages/main/src/SuggestionItem.ts +++ b/packages/main/src/SuggestionItem.ts @@ -55,6 +55,10 @@ class SuggestionItem extends ListItemBase implements IInputSuggestionItemSelecta this.setAttribute("desktop", ""); } } + + get _effectiveTabIndex(): string { + return "-1"; + } } SuggestionItem.define(); 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 diff --git a/packages/main/src/SuggestionItemCustom.ts b/packages/main/src/SuggestionItemCustom.ts index 99d0910d0126..64fc744478da 100644 --- a/packages/main/src/SuggestionItemCustom.ts +++ b/packages/main/src/SuggestionItemCustom.ts @@ -48,6 +48,10 @@ class SuggestionItemCustom extends ListItemBase implements IInputSuggestionItemS */ @slot({ type: Node, "default": true, invalidateOnChildChange: true }) content!: Array; + + get _effectiveTabIndex(): string { + return "-1"; + } } SuggestionItemCustom.define();