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();