@sapudex/web-components 2.59.0 → 2.61.0

package/cypress/specs/SelectBox.cy.tsx

@@ -128,6 +128,16 @@ const shortComponent = <div style="width: 350px; position:relative;"><UDExSelect
   <UDExSelectBoxItem label="Perl"></UDExSelectBoxItem>
 </UDExSelectBox></div>
 
+const singleSelectPreselected = <div style="width: 350px; position:relative;"><UDExSelectBox
+  id="select-box"
+  label="Programming languages">
+  <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Python"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Java" selected></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Swift"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="C#"></UDExSelectBoxItem>
+</UDExSelectBox></div>
+
 const singleSelectWithRating = <div style="width: 350px; position:relative;"><UDExSelectBox
   id="select-box"
   label="Rating">
@@ -157,7 +167,7 @@ const selectAll = <div style="width: 350px; position:relative;">
       <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
     </UDExSelectBoxSelectAll>
   </UDExSelectBox>
-<a id="next-focus" href="#">Next focusable element</a>
+  <a id="next-focus" href="#">Next focusable element</a>
 </div>
 
 const selectBoxInsideModal = <div style="width: 500px; position:relative;">
@@ -183,15 +193,15 @@ describe("SelectBox", () => {
   it("correct height style is applied", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__trigger")
-    .click();
+      .find(".udex-text-field__trigger")
+      .click();
 
     cy.get("#select-box")
-    .shadow()
-    .find("ui5-popover")
-    .shadow()
-    .find(".ui5-popup-content")
-    .should("have.css", 'max-height', '400px')
+      .shadow()
+      .find("ui5-popover")
+      .shadow()
+      .find(".ui5-popup-content")
+      .should("have.css", 'max-height', '400px')
   });
 
   it("correct label is applied", () => {
@@ -205,7 +215,7 @@ describe("SelectBox", () => {
   it("correct supporting text is applied", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow().find("udex-status-message").shadow().find(".udex-status-message")
-    .should("have.text", "category lists");
+      .should("have.text", "category lists");
   });
 
   it("render the right amount items", () => {
@@ -228,31 +238,31 @@ describe("SelectBox", () => {
   it("checking label and supporting text for the item", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__trigger")
-    .click();
+      .find(".udex-text-field__trigger")
+      .click();
 
     cy.get("#select-box").shadow().find('udex-list-item').eq(0).as("firstItem");
     cy.get("@firstItem")
-    .shadow()
-    .find(".udex-list__item")
-    .should("include.text", "JavaScript");
+      .shadow()
+      .find(".udex-list__item")
+      .should("include.text", "JavaScript");
 
     cy.get("@firstItem")
-    .shadow().find('.udex-list__supporting-text')
-    .should("have.text", "Frontend web development");
+      .shadow().find('.udex-list__supporting-text')
+      .should("have.text", "Frontend web development");
   });
 
   it("checking the custom content for the item", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__trigger")
-    .click();
+      .find(".udex-text-field__trigger")
+      .click();
 
     cy.get("#select-box")
-    .shadow()
-    .find('udex-list-item').eq(0)
-    .find(".custom-content")
-    .should("have.text", "Lorem ipsum");
+      .shadow()
+      .find('udex-list-item').eq(0)
+      .find(".custom-content")
+      .should("have.text", "Lorem ipsum");
   });
 
   it("render the additional text in the item", () => {
@@ -281,27 +291,27 @@ describe("SelectBox", () => {
     cy.mount(fullComponent);
 
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__search").as("searchField");
+      .find(".udex-text-field__search").as("searchField");
 
     cy.get("@searchField").click();
     cy.realType("java");
 
     cy.get("#select-box").shadow().find("udex-list-item")
-    .should("have.length", 2);
+      .should("have.length", 2);
 
     cy.get("#select-box").shadow().find("udex-list-item").eq(0)
-    .shadow().find(".udex-list__item")
-    .should("include.text", "Java");
+      .shadow().find(".udex-list__item")
+      .should("include.text", "Java");
   });
 
   it("test if reset searching value using resetSearch method", () => {
     cy.mount(fullComponent);
 
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__search").as("searchField");
+      .find(".udex-text-field__search").as("searchField");
 
     cy.get("@searchField")
-    .click();
+      .click();
     cy.realType("java");
 
     cy.get("#select-box")
@@ -311,14 +321,14 @@ describe("SelectBox", () => {
       })
 
     cy.get("@searchField")
-    .should("have.value", "");
+      .should("have.value", "");
   });
 
   it("test if close dropdown using close method", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__trigger")
-    .click();
+      .find(".udex-text-field__trigger")
+      .click();
 
     cy.get("#select-box")
       .then($el => {
@@ -327,123 +337,119 @@ describe("SelectBox", () => {
       })
 
     cy.get("#select-box").shadow()
-    .find(".udex-select-box__dropdown")
-    .should("not.have.attr","open");
+      .find(".udex-select-box__dropdown")
+      .should("not.have.attr","open");
   });
 
   it("should show empty msg if the search does not produce results", () => {
     cy.mount(fullComponent);
 
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__search")
-    .click();
+      .find(".udex-text-field__search")
+      .click();
     cy.realType("x");
 
     cy.get("#select-box").shadow()
-    .find(".udex-no-result")
-    .should("include.text", "No matches found.");
+      .find(".udex-no-result")
+      .should("include.text", "No matches found.");
   });
 
   it("show tooltip in display only mode", () => {
     cy.mount(displayOnly);
 
     cy.get("#select-box").shadow()
-    .find(".udex-tag-group").shadow().as("tagGroup");
+      .find(".udex-tag-group").shadow().as("tagGroup");
 
     // Wait for the resize handler to fire and render the tooltip before clicking.
     cy.get("@tagGroup").find("udex-tooltip").should("exist");
 
     cy.get("@tagGroup")
-    .find(".udex-tag-group__tokenizer").shadow()
-    .find(".ui5-tokenizer-more-text")
-    .click();
+      .find(".udex-tag-group__tokenizer").shadow()
+      .find(".ui5-tokenizer-more-text")
+      .click();
 
     cy.get("@tagGroup")
-    .find("udex-tooltip")
-    .should("have.attr", "open");
+      .find("udex-tooltip")
+      .should("have.attr", "open");
   });
 
   it("dropdown opens on pressing the `ArrowDown` key on the search", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__search")
-    .click()
-    .realPress("ArrowDown");
+      .find(".udex-text-field__search")
+      .click()
+      .realPress("ArrowDown");
 
     cy.get("#select-box").shadow()
-    .find(".udex-select-box__dropdown")
-    .should("have.attr","open");
+      .find(".udex-select-box__dropdown")
+      .should("have.attr","open");
   });
 
   it("dropdown closes on pressing the `Escape`", () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__search")
-    .click()
-    .realPress("ArrowDown");
+      .find(".udex-text-field__search")
+      .click()
+      .realPress("ArrowDown");
 
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__search")
-    .realPress("Escape");
+      .find(".udex-text-field__search")
+      .realPress("Escape");
 
     cy.get("#select-box").shadow()
-    .find(".udex-select-box__dropdown")
-    .should("not.have.attr","open");
+      .find(".udex-select-box__dropdown")
+      .should("not.have.attr","open");
   });
 
   it("sets option label when Arrow Down key press on the list items", () => {
     cy.mount(shortComponent);
-    cy.get("#select-box").shadow()
-    .find(".udex-text-field__search")
-    .click()
-    .realPress("ArrowDown")
-    .realPress("ArrowDown");
+    cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+    // Opening focuses the first item (JavaScript); wait for it before navigating.
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("have.attr", "_active-descendant");
+    cy.realPress("ArrowDown");
 
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__single-label")
-    .should("have.text", "Python");
+      .find(".udex-text-field__single-label")
+      .should("have.text", "Python");
   });
 
   it("sets option label when Arrow Up key press on the list items", () => {
     cy.mount(shortComponent);
-    cy.get("#select-box").shadow()
-    .find(".udex-text-field__search")
-    .click()
-    .realPress("ArrowDown")
-    .realPress("ArrowDown")
-    .realPress("ArrowUp");
+    cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("have.attr", "_active-descendant");
+    cy.realPress("ArrowDown");
+    cy.realPress("ArrowUp");
 
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__single-label")
-    .should("have.text", "JavaScript");
+      .find(".udex-text-field__single-label")
+      .should("have.text", "JavaScript");
   });
 
   it("sets option label when End key press on the list items", () => {
     cy.mount(shortComponent);
-    cy.get("#select-box").shadow()
-    .find(".udex-text-field__search")
-    .click()
-    .realPress("ArrowDown")
-    .realPress("ArrowDown")
-    .realPress("End");
+    cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("have.attr", "_active-descendant");
+    cy.realPress("End");
 
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__single-label")
-    .should("have.text", "Perl");
+      .find(".udex-text-field__single-label")
+      .should("have.text", "Perl");
   });
 
   it("sets option label when Home key press on the list items", () => {
     cy.mount(shortComponent);
-    cy.get("#select-box").shadow()
-    .find(".udex-text-field__search")
-    .click()
-    .realPress("ArrowDown")
-    .realPress("ArrowDown")
-    .realPress("Home");
+    cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("have.attr", "_active-descendant");
+    cy.realPress("ArrowDown");
+    cy.realPress("Home");
 
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__single-label")
-    .should("have.text", "JavaScript");
+      .find(".udex-text-field__single-label")
+      .should("have.text", "JavaScript");
   });
 
   it("SingleSelect mode - after clicking on the item dropdown is closed", () => {
@@ -454,8 +460,8 @@ describe("SelectBox", () => {
     dropdown.should("have.attr","open");
 
     cy.get("#select-box").shadow()
-    .find("udex-list-item").eq(1)
-    .click();
+      .find("udex-list-item").eq(1)
+      .click();
 
     dropdown.should("not.have.attr","open");
   });
@@ -465,12 +471,12 @@ describe("SelectBox", () => {
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
     cy.get("#select-box").shadow()
-    .find("udex-list-item").eq(1).as('currentItem')
+      .find("udex-list-item").eq(1).as('currentItem')
 
     cy.get("@currentItem").click();
     cy.get("@currentItem").shadow()
-    .find(".udex-list__item")
-    .should("have.attr", "data-selected","true")
+      .find(".udex-list__item")
+      .should("have.attr", "data-selected","true")
   });
 
   it("SingleSelect mode - value sets on the field after clicking on the item", () => {
@@ -478,12 +484,12 @@ describe("SelectBox", () => {
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
     cy.get("#select-box").shadow()
-    .find("udex-list-item").eq(0)
-    .click();
+      .find("udex-list-item").eq(0)
+      .click();
 
     cy.get("#select-box").shadow()
-    .find(".udex-text-field__single-label")
-    .should("have.text", "JavaScript");
+      .find(".udex-text-field__single-label")
+      .should("have.text", "JavaScript");
   });
 
   it("SingleSelect mode - typing after selecting an item shows typed character in the search field", () => {
@@ -521,35 +527,146 @@ describe("SelectBox", () => {
       .should("have.text", "Python");
   });
 
+  it("SingleSelect mode - opening the dropdown focuses the selected item", () => {
+    cy.mount(singleSelectPreselected);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(2)
+      .should("have.attr", "_active-descendant");
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("not.have.attr", "_active-descendant");
+  });
+
+  it("SingleSelect mode - opening the dropdown focuses the first item when nothing is selected", () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("have.attr", "_active-descendant");
+  });
+
+  it("SingleSelect mode - opening the dropdown with ArrowDown focuses the selected item", () => {
+    cy.mount(singleSelectPreselected);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
+    cy.realPress("ArrowDown");
+
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(2)
+      .should("have.attr", "_active-descendant");
+  });
+
+  it("SingleSelect mode - reopening restores focus to the previously selected item", () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(2).click();
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("not.have.attr", "open");
+
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(2)
+      .should("have.attr", "_active-descendant");
+  });
+
   it("MultiSelect mode - navigation label is cleared from input after Tab closes the dropdown", () => {
     cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+
+    // Wait for the dropdown to finish opening with the first item (JavaScript) focused before
+    // navigating, otherwise ArrowDown races the open and is consumed by it instead of advancing.
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("have.attr", "_active-descendant");
+
+    // The first item (JavaScript) is focused, so this ArrowDown advances to Python.
+    cy.realPress("ArrowDown");
+
     cy.get("#select-box").shadow()
-      .find(".udex-text-field__search")
-      .click()
-      .realPress("ArrowDown");
+      .find(".udex-text-field__single-label")
+      .should("have.text", "Python");
+
+    cy.realPress("Tab");
 
     cy.get("#select-box").shadow()
       .find(".udex-text-field__single-label")
-      .should("have.text", "JavaScript");
+      .should("not.exist");
+  });
 
+  it("SingleSelect mode - Tab without opening dropdown shows no label in input", () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
     cy.realPress("Tab");
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("not.exist");
+  });
 
+  it("SingleSelect mode - Tab without opening dropdown preserves previously selected item in input", () => {
+    cy.mount(singleSelectPreselected);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
+    cy.realPress("Tab");
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("have.text", "Java");
+  });
+
+  it("MultiSelect mode - Tab without opening dropdown shows no label in input", () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
+    cy.realPress("Tab");
     cy.get("#select-box").shadow()
       .find(".udex-text-field__single-label")
       .should("not.exist");
   });
 
+  it("MultiSelect mode - opening the dropdown with a mouse click focuses the first item", () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("have.attr", "_active-descendant");
+  });
+
+  it("MultiSelect mode - opening the dropdown with ArrowDown focuses the first item", () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
+    cy.realPress("ArrowDown");
+
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("have.attr", "_active-descendant");
+  });
+
+  it("MultiSelect mode - selected items do not steal focus from the first item on open", () => {
+    cy.mount(multiSelect);
+    // Pre-select the third item programmatically.
+    cy.get("#select-box").find("udex-select-box-item").eq(2)
+      .then($el => {
+        ($el[0] as any).selected = true;
+      });
+
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("have.attr", "_active-descendant");
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(2)
+      .should("not.have.attr", "_active-descendant");
+  });
+
   it("MultiSelect mode - after clicking on the item dropdown is opened", () => {
     cy.mount(multiSelect);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
     cy.get("#select-box").shadow()
-    .find("udex-list-item").eq(1)
-    .click();
+      .find("udex-list-item").eq(1)
+      .click();
 
     cy.get("#select-box").shadow()
-    .find(".udex-select-box__dropdown")
-    .should("have.attr","open");
+      .find(".udex-select-box__dropdown")
+      .should("have.attr","open");
   });
 
   it("MultiSelect mode - rendering tags after clicking on the items", () => {
@@ -557,16 +674,16 @@ describe("SelectBox", () => {
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
     cy.get("#select-box").shadow()
-    .find("udex-list-item").as("items")
+      .find("udex-list-item").as("items")
 
     cy.get("@items").eq(0).click();
     cy.get("@items").eq(1).click();
     cy.get("@items").eq(2).click();
 
     cy.get("#select-box").shadow()
-    .find("udex-tag-group").shadow()
-    .find(".udex-tag-group__tag")
-    .should("have.length", 3);
+      .find("udex-tag-group").shadow()
+      .find(".udex-tag-group__tag")
+      .should("have.length", 3);
   });
 
   it("MultiSelect mode - after clicking the delete icon of a tag removes it from the selection", () => {
@@ -574,22 +691,22 @@ describe("SelectBox", () => {
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
     cy.get("#select-box").shadow()
-    .find("udex-list-item").eq(0).click();
+      .find("udex-list-item").eq(0).click();
 
     cy.get("#select-box").shadow()
-    .find("udex-tag-group").as("group")
+      .find("udex-tag-group").as("group")
 
     cy.get("@group")
-    .should("exist")
+      .should("exist")
 
     cy.get("#select-box").shadow()
-    .find("udex-tag-group").shadow()
-    .find("udex-tag").shadow()
-    .find(".udex-tag__icon")
-    .click();
+      .find("udex-tag-group").shadow()
+      .find("udex-tag").shadow()
+      .find(".udex-tag__icon")
+      .click();
 
     cy.get("@group")
-    .should("not.exist")
+      .should("not.exist")
   });
 
   it("MultiSelect mode - n more is applied after clicking on the items", () => {
@@ -597,7 +714,7 @@ describe("SelectBox", () => {
     cy.get("#select-box").shadow().find(".udex-text-field__search").click();
 
     cy.get("#select-box").shadow()
-    .find("udex-list-item").as("items")
+      .find("udex-list-item").as("items")
 
     cy.get("@items").eq(0).click();
     cy.get("@items").eq(1).click();
@@ -606,10 +723,10 @@ describe("SelectBox", () => {
     cy.get("body").realClick();
 
     cy.get("#select-box").shadow()
-    .find("udex-tag-group").shadow()
-    .find(".udex-tag-group__tokenizer").shadow()
-    .find(".ui5-tokenizer-more-text")
-    .should("have.text", "3 more");
+      .find("udex-tag-group").shadow()
+      .find(".udex-tag-group__tokenizer").shadow()
+      .find(".ui5-tokenizer-more-text")
+      .should("have.text", "3 more");
   });
 
   it("MultiSelect mode - open dropdown after clicking on the more button", () => {
@@ -617,7 +734,7 @@ describe("SelectBox", () => {
     cy.get("#select-box").shadow().find(".udex-text-field__search").click();
 
     cy.get("#select-box").shadow()
-    .find("udex-list-item").as("items")
+      .find("udex-list-item").as("items")
 
     cy.get("@items").eq(0).click();
     cy.get("@items").eq(1).click();
@@ -626,14 +743,14 @@ describe("SelectBox", () => {
     cy.get("body").realClick();
 
     cy.get("#select-box").shadow()
-    .find("udex-tag-group").shadow()
-    .find(".udex-tag-group__tokenizer").shadow()
-    .find(".ui5-tokenizer-more-text")
-    .click();
+      .find("udex-tag-group").shadow()
+      .find(".udex-tag-group__tokenizer").shadow()
+      .find(".ui5-tokenizer-more-text")
+      .click();
 
     cy.get("#select-box").shadow()
-    .find(".udex-select-box__dropdown")
-    .should("have.attr","open");
+      .find(".udex-select-box__dropdown")
+      .should("have.attr","open");
   });
 
   it("MultiSelect mode - should truncate the tag when it is long and open the dropdown on click", () => {
@@ -641,17 +758,17 @@ describe("SelectBox", () => {
     cy.get("#select-box").shadow().find(".udex-text-field__search").click();
 
     cy.get("#select-box").shadow()
-    .find("udex-list-item").eq(4).click();
+      .find("udex-list-item").eq(4).click();
 
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").realClick();
 
     cy.get("#select-box").shadow()
-    .find("udex-tag-group").shadow()
-    .find("udex-tag").realClick();
+      .find("udex-tag-group").shadow()
+      .find("udex-tag").realClick();
 
     cy.get("#select-box").shadow()
-    .find(".udex-truncatable-tag-content")
-    .should("have.text", "C# - is a general-purpose high-level programming language supporting multiple paradigms")
+      .find(".udex-truncatable-tag-content")
+      .should("have.text", "C# - is a general-purpose high-level programming language supporting multiple paradigms")
   });
 
   it("MultiSelect mode - the truncated tag is selected when clicking on", () => {
@@ -659,11 +776,11 @@ describe("SelectBox", () => {
     cy.get("#select-box").shadow().find(".udex-text-field__search").click();
 
     cy.get("#select-box").shadow()
-    .find("udex-list-item").eq(4).click();
+      .find("udex-list-item").eq(4).click();
 
     cy.get("#select-box").shadow()
-    .find("udex-tag-group").shadow()
-    .find("udex-tag").as("tag")
+      .find("udex-tag-group").shadow()
+      .find("udex-tag").as("tag")
 
     cy.get("@tag").click();
 
@@ -676,30 +793,30 @@ describe("SelectBox", () => {
       cy.get("#select-box").shadow().as("select")
 
       cy.get("@select")
-      .find("udex-list-group-header").shadow()
-      .find("udex-list-item").shadow()
-      .find(".udex-list__text-holder > span").eq(0)
-      .should("have.text", "Programming Languages");
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(".udex-list__text-holder > span").eq(0)
+        .should("have.text", "Programming Languages");
 
       cy.get("@select")
-      .find("udex-list-group-header").shadow()
-      .find("udex-list-item").shadow()
-      .find(".udex-list__supporting-text")
-      .should("have.text", "Digital Builders");
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(".udex-list__supporting-text")
+        .should("have.text", "Digital Builders");
     });
 
     it("MultiSelect mode - checks nonInteractive state for the group item header", () => {
       cy.mount(groupHeader);
       cy.get("udex-select-box-group-header")
-      .then($el => {
-        const select = $el as any;
-        select[0].nonInteractive = true;
-      })
+        .then($el => {
+          const select = $el as any;
+          select[0].nonInteractive = true;
+        })
 
       cy.get("#select-box").shadow()
-      .find("udex-list-group-header").shadow()
-      .find(".udex-list__inactive-header")
-      .should("exist")
+        .find("udex-list-group-header").shadow()
+        .find(".udex-list__inactive-header")
+        .should("exist")
     });
 
     it("MultiSelect mode - arrow keys navigate items when group header is nonInteractive", () => {
@@ -711,9 +828,8 @@ describe("SelectBox", () => {
         });
 
       cy.get("#select-box").shadow().find(".udex-text-field__search").click();
-      cy.realPress("ArrowDown");
 
-      // Updated: DOM focus stays on the input; the active item is marked via _active-descendant.
+      // Opening focuses the first navigable item (the nonInteractive header is skipped).
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(0)
         .should("have.attr", "_active-descendant");
@@ -735,10 +851,9 @@ describe("SelectBox", () => {
       cy.mount(groupHeaderCollapsible);
 
       cy.get("#select-box").shadow().find(".udex-text-field__search").click();
-      cy.realPress("ArrowDown");
 
-      // Updated: DOM focus stays on the input; the active group header is marked
-      // via the _active-descendant attribute rather than receiving DOM focus.
+      // Opening focuses the first navigable item — the collapsible group header —
+      // marked via the _active-descendant attribute (DOM focus stays on the input).
       cy.get("#select-box").shadow()
         .find("udex-list-group-header")
         .should("have.attr", "_active-descendant");
@@ -791,10 +906,9 @@ describe("SelectBox", () => {
       cy.mount(groupHeaderCollapsible);
 
       cy.get("#select-box").shadow().find(".udex-text-field__search").click();
-      cy.realPress("ArrowDown");
 
-      // Updated: the collapsible group header is the active descendant (DOM focus
-      // stays on the input), marked via the _active-descendant attribute.
+      // Opening focuses the collapsible group header (the first navigable item),
+      // marked via the _active-descendant attribute (DOM focus stays on the input).
       cy.get("#select-box").shadow()
         .find("udex-list-group-header")
         .should("have.attr", "_active-descendant");
@@ -834,6 +948,30 @@ describe("SelectBox", () => {
           cy.wrap($item).should("not.have.attr", "collapsed");
         });
     });
+
+    // Regression (issue #3576): SiteImprove/axe "Role not inside the required context".
+    // In aria-activedescendant mode the group-header HOST is the treeitem; the inner
+    // focusable div must NOT also be a treeitem, otherwise it is a second, parent-less
+    // treeitem nested inside the host treeitem (aria-required-parent violation).
+    it("SingleSelect collapsible group header: treeitem lives on the host, inner div is presentational", () => {
+      cy.mount(groupHeaderCollapsibleSingleSelect);
+
+      cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+
+      // The host carries the treeitem role + expanded state.
+      cy.get("#select-box").shadow()
+        .find("[udex-list-group-header]")
+        .should("have.attr", "role", "treeitem")
+        .and("have.attr", "aria-expanded");
+
+      // The inner focusable div is presentational and does not duplicate the treeitem
+      // role or its aria-expanded state.
+      cy.get("#select-box").shadow()
+        .find("[udex-list-group-header]").shadow()
+        .find(".udex-list__group-content")
+        .should("have.attr", "role", "presentation")
+        .and("not.have.attr", "aria-expanded");
+    });
   });
 
   // Added: covers the listboxRole getter change in SelectBase — aria-haspopup on the
@@ -885,21 +1023,21 @@ describe("SelectBox", () => {
       cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
       cy.get("#select-box").shadow()
-      .find("udex-list-item").as("items")
+        .find("udex-list-item").as("items")
 
       cy.get("@items").eq(0).click();
       cy.get("@items").eq(1).click();
       cy.get("@items").eq(2).click();
 
       cy.get("#select-box").shadow()
-      .find("udex-tag-group").shadow()
-      .find(".udex-tag-group__tag").eq(1)
-      .click();
+        .find("udex-tag-group").shadow()
+        .find(".udex-tag-group__tag").eq(1)
+        .click();
 
       cy.realPress(["Shift", "Tab"]);
 
       cy.get("#previous-focus")
-      .should("be.focused");
+        .should("be.focused");
     });
 
     it("focus moves to input search when press Tab on a tag", () => {
@@ -910,17 +1048,17 @@ describe("SelectBox", () => {
       cy.get("@trigger").click();
 
       cy.get("@select")
-      .find("udex-list")
-      .find("udex-list-select-all").shadow()
-      .find(".udex-list__group-header")
-      .click()
+        .find("udex-list")
+        .find("udex-list-select-all").shadow()
+        .find(".udex-list__group-header")
+        .click()
 
       cy.get("@trigger").click();
 
       cy.get("@select")
-      .find("udex-tag-group").shadow()
-      .find("udex-tag").eq(0)
-      .click()
+        .find("udex-tag-group").shadow()
+        .find("udex-tag").eq(0)
+        .click()
 
       cy.realPress("Tab");
 
@@ -947,22 +1085,22 @@ describe("SelectBox", () => {
       cy.get("@trigger").click();
 
       cy.get("@select")
-      .find("udex-list")
-      .find("udex-list-select-all").shadow()
-      .find(".udex-list__group-header")
-      .click()
+        .find("udex-list")
+        .find("udex-list-select-all").shadow()
+        .find(".udex-list__group-header")
+        .click()
 
       cy.get("@trigger").click();
 
       cy.get("@select")
-      .find("udex-tag-group").shadow()
-      .find("udex-tag").eq(0)
-      .click()
+        .find("udex-tag-group").shadow()
+        .find("udex-tag").eq(0)
+        .click()
 
       cy.realPress(["Shift", "Tab"]);
 
       cy.get("#previous-focus")
-      .should("be.focused");
+        .should("be.focused");
     });
 
     it("focus moves to next interactive element on the page when press Tab on a trigger", () => {
@@ -985,13 +1123,13 @@ describe("SelectBox", () => {
       cy.get("@trigger").click();
 
       cy.get("#select-box").shadow()
-      .find("udex-list-item").eq(1)
-      .click();
+        .find("udex-list-item").eq(1)
+        .click();
 
       cy.realPress(["Tab"]);
 
       cy.get("#next-focus")
-      .should("be.focused");
+        .should("be.focused");
     });
 
     it("focus moves to input when press Prev Tab on a list item", () => {
@@ -1019,16 +1157,16 @@ describe("SelectBox", () => {
       cy.get("@trigger").click();
 
       cy.get("#select-box").shadow()
-      .find("udex-list-item").eq(1)
-      .click();
+        .find("udex-list-item").eq(1)
+        .click();
 
       cy.realPress("Escape");
 
       cy.get("@select").find(".udex-text-field__search").should("be.focused");
 
       cy.get("@select")
-      .find(".udex-select-box__dropdown")
-      .should("not.have.attr","open");
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr","open");
     });
 
     it("focus() method moves focus to the inner search input", () => {
@@ -1052,10 +1190,10 @@ describe("SelectBox", () => {
       cy.get("@select").shadow().find(".udex-text-field__trigger").as("trigger")
 
       cy.get("@select").shadow()
-      .find("udex-list")
-      .find("udex-list-select-all").shadow()
-      .find(".udex-list__group-header")
-      .should("have.text", "Select All");
+        .find("udex-list")
+        .find("udex-list-select-all").shadow()
+        .find(".udex-list__group-header")
+        .should("have.text", "Select All");
     });
 
     it("emit select-all when Select All header clicked", () => {
@@ -1063,22 +1201,22 @@ describe("SelectBox", () => {
       cy.get("#select-box").as("select")
 
       cy.get("@select")
-      .then(select => {
-        select.get(0).addEventListener("select-all", cy.stub().as("selectall"));
-      });
+        .then(select => {
+          select.get(0).addEventListener("select-all", cy.stub().as("selectall"));
+        });
 
       cy.get("@select").shadow().find(".udex-text-field__trigger").as("trigger")
 
       cy.get("@trigger").click();
 
       cy.get("@select").shadow()
-      .find("udex-list")
-      .find("udex-list-select-all").shadow()
-      .find(".udex-list__group-header")
-      .click()
+        .find("udex-list")
+        .find("udex-list-select-all").shadow()
+        .find(".udex-list__group-header")
+        .click()
 
       cy.get("@selectall")
-      .should("have.been.called");
+        .should("have.been.called");
     });
 
     // Bug fix: groupListClassName no longer appends _additionalClassName, so the
@@ -1091,10 +1229,10 @@ describe("SelectBox", () => {
       cy.get("@select").find(".udex-text-field__trigger").click();
 
       cy.get("@select")
-      .find("udex-list")
-      .find("udex-list-select-all").shadow()
-      .find(".udex-list__group-list")
-      .should("not.have.class", "udex-list__sticky");
+        .find("udex-list")
+        .find("udex-list-select-all").shadow()
+        .find(".udex-list__group-list")
+        .should("not.have.class", "udex-list__sticky");
     });
   });
 
@@ -1105,15 +1243,15 @@ describe("SelectBox", () => {
         select.get(0).addEventListener("selection-change", cy.stub().as("selectionchange"));
       });
       cy.get("#select-box").shadow()
-      .find(".udex-text-field__trigger")
-      .click();
+        .find(".udex-text-field__trigger")
+        .click();
 
       cy.get("#select-box").shadow()
-      .find("udex-list-item").eq(1)
-      .click();
+        .find("udex-list-item").eq(1)
+        .click();
 
       cy.get("@selectionchange")
-      .should("have.been.called");
+        .should("have.been.called");
     });
 
     it("emit open when dropdown list opened", () => {
@@ -1122,8 +1260,8 @@ describe("SelectBox", () => {
         select.get(0).addEventListener("open", cy.stub().as("open"));
       });
       cy.get("#select-box").shadow()
-      .find(".udex-text-field__trigger")
-      .click();
+        .find(".udex-text-field__trigger")
+        .click();
 
       cy.get("@open").should("have.been.called");
     });
@@ -1134,11 +1272,11 @@ describe("SelectBox", () => {
         select.get(0).addEventListener("close", cy.stub().as("close"));
       });
       cy.get("#select-box").shadow()
-      .find(".udex-text-field__trigger")
-      .click();
+        .find(".udex-text-field__trigger")
+        .click();
       cy.get("#select-box").shadow()
-      .find(".udex-text-field__trigger")
-      .click();
+        .find(".udex-text-field__trigger")
+        .click();
 
       cy.get("@close").should("have.been.called");
     });
@@ -1149,8 +1287,8 @@ describe("SelectBox", () => {
         select.get(0).addEventListener("before-open", cy.stub().as("beforeopen"));
       });
       cy.get("#select-box").shadow()
-      .find(".udex-text-field__trigger")
-      .click();
+        .find(".udex-text-field__trigger")
+        .click();
 
       cy.get("@beforeopen").should("have.been.called");
     });
@@ -1161,11 +1299,11 @@ describe("SelectBox", () => {
         select.get(0).addEventListener("before-close", cy.stub().as("beforeclose"));
       });
       cy.get("#select-box").shadow()
-      .find(".udex-text-field__trigger")
-      .click();
+        .find(".udex-text-field__trigger")
+        .click();
       cy.get("#select-box").shadow()
-      .find(".udex-text-field__trigger")
-      .click();
+        .find(".udex-text-field__trigger")
+        .click();
 
       cy.get("@beforeclose").should("have.been.called");
     });
@@ -1176,8 +1314,8 @@ describe("SelectBox", () => {
         select.get(0).addEventListener("change-search", cy.stub().as("changesearch"));
       });
       cy.get("#select-box").shadow()
-      .find(".udex-text-field__search")
-      .click();
+        .find(".udex-text-field__search")
+        .click();
       cy.realType("java");
 
       cy.get("@changesearch").should("have.been.called");
@@ -1191,22 +1329,22 @@ describe("SelectBox", () => {
       cy.get("#select-box").shadow().as("select");
 
       cy.get("@select").find(".udex-text-field__trigger")
-      .click();
+        .click();
 
       cy.get("@select")
-      .find("udex-list-item").as("items")
+        .find("udex-list-item").as("items")
 
       cy.get("@items").eq(0).click();
       cy.get("@items").eq(1).click();
 
       cy.get("@select")
-      .find("udex-tag-group").shadow()
-      .find("udex-tag").eq(0).shadow()
-      .find(".udex-tag__icon")
-      .click();
+        .find("udex-tag-group").shadow()
+        .find("udex-tag").eq(0).shadow()
+        .find(".udex-tag__icon")
+        .click();
 
       cy.get("@remove")
-      .should("have.been.called");
+        .should("have.been.called");
     });
 
     it("emit show-more when more button clicked", () => {
@@ -1218,7 +1356,7 @@ describe("SelectBox", () => {
       cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
 
       cy.get("#select-box").shadow()
-      .find("udex-list-item").as("items")
+        .find("udex-list-item").as("items")
 
       cy.get("@items").eq(0).click();
       cy.get("@items").eq(1).click();
@@ -1227,13 +1365,13 @@ describe("SelectBox", () => {
       cy.get("body").realClick();
 
       cy.get("#select-box").shadow()
-      .find("udex-tag-group").shadow()
-      .find(".udex-tag-group__tokenizer").shadow()
-      .find(".ui5-tokenizer-more-text")
-      .click();
+        .find("udex-tag-group").shadow()
+        .find(".udex-tag-group__tokenizer").shadow()
+        .find(".ui5-tokenizer-more-text")
+        .click();
 
       cy.get("@showmore")
-      .should("have.been.called");
+        .should("have.been.called");
     });
 
     it("emit first-icon-click when first icon clicked", () => {
@@ -1649,11 +1787,10 @@ describe("SelectBox", () => {
     it("pressing Tab while a list item is focused moves focus to the first footer element and keeps the dropdown open", () => {
       cy.mount(selectBoxWithFooter);
 
-      // Open the dropdown and move focus into the list via ArrowDown.
+      // Open the dropdown; the first list item becomes the active descendant on open.
       cy.get("#select-box").shadow()
         .find(".udex-text-field__search")
-        .click()
-        .realPress("ArrowDown");
+        .click();
 
       cy.get("#select-box").shadow()
         .find(".udex-select-box__dropdown")
@@ -1943,8 +2080,12 @@ describe("SelectBox", () => {
     const openDropdownOnFirstItem = () => {
       cy.get("#select-box").shadow()
         .find(".udex-text-field__search")
-        .click()
-        .realPress("ArrowDown");
+        .click();
+      // Opening focuses the first list item as the active descendant (DOM focus stays
+      // on the input); wait for it so navigation starts deterministically from eq(0).
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("have.attr", "_active-descendant");
     };
 
     it("Tab from list item closes dropdown and moves focus to next element outside component", () => {
@@ -2675,9 +2816,9 @@ describe("SelectBox", () => {
     it("Enter on a group header does not select its items", () => {
       cy.mount(groupHeaderCollapsibleSingleSelect);
       cy.get("#select-box").shadow().find(".udex-text-field__search").click();
-      cy.realPress("ArrowDown");
 
-      // The collapsible group header is the active descendant (DOM focus stays on input).
+      // Opening focuses the first navigable item — the collapsible group header
+      // (DOM focus stays on the input).
       cy.get("#select-box").shadow()
         .find("udex-list-group-header")
         .should("have.attr", "_active-descendant");
@@ -2769,10 +2910,9 @@ describe("SelectBox", () => {
       cy.mount(shortComponent);
       cy.get("#select-box").shadow()
         .find(".udex-text-field__search")
-        .click()
-        .realPress("ArrowDown");
+        .click();
 
-      // shortComponent has 6 items; the first item "JavaScript" becomes active.
+      // Opening activates the first item "JavaScript" (shortComponent has 6 items).
       cy.get("#select-box").shadow()
         .find('[aria-live="polite"]')
         .invoke("text")
@@ -2786,10 +2926,9 @@ describe("SelectBox", () => {
       cy.mount(groupHeaderCollapsible);
       cy.get("#select-box").shadow()
         .find(".udex-text-field__search")
-        .click()
-        .realPress("ArrowDown");
+        .click();
 
-      // ArrowDown activates the group header -> tree text reports "level 0".
+      // Opening activates the group header -> tree text reports "level 0".
       cy.get("#select-box").shadow()
         .find('[aria-live="polite"]')
         .invoke("text")
@@ -2863,10 +3002,10 @@ describe("SelectBox", () => {
       cy.mount(checkedMultiSelect);
       cy.get("#select-box").shadow()
         .find(".udex-text-field__search")
-        .click()
-        .realPress("ArrowDown");
+        .click();
 
-      // First MultiSelect item is pre-selected -> state suffix is "Selected".
+      // Opening activates the first MultiSelect item, which is pre-selected -> state
+      // suffix is "Selected".
       cy.get("#select-box").shadow()
         .find('[aria-live="polite"]')
         .should("contain.text", "Selected");
@@ -2905,10 +3044,9 @@ describe("SelectBox", () => {
       cy.mount(groupHeaderCollapsible);
       cy.get("#select-box").shadow()
         .find(".udex-text-field__search")
-        .click()
-        .realPress("ArrowDown");
+        .click();
 
-      // ArrowDown activates the expanded group header -> tree text reports
+      // Opening activates the expanded group header -> tree text reports
       // "level 0" and the state suffix is "expanded".
       cy.get("#select-box").shadow()
         .find('[aria-live="polite"]')