@sapudex/web-components 2.55.0 → 2.57.0

package/README.md

@@ -0,0 +1,258 @@
+# Quickstart guide for UDEx Components
+
+Follow along these few steps to get you successfully using our provided web components.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Importing the component/-s you intend to use](#importing-the-component-s-you-intend-to-use)
+- [Using the component](#using-the-component)
+- [Using our custom theme](#using-our-custom-theme)
+  - [Import our asset bundle and theme css](#import-our-asset-bundle-and-theme-css)
+  - [Activate the theme](#activate-the-theme)
+- [Configuration options](#configuration-options)
+  - [Controlling default tooltips](#controlling-default-tooltips)
+  - [Language](#language)
+  - [UDEx Custom Translation](#udex-custom-translation)
+- [Using UDEx components with UI5 components](#using-ui5-components)
+  - [Scoping configuration](#scoping-configuration)
+  - [Using UI5 icons](#using-ui5-icons)
+
+## Installation
+
+To use our provided components, it's necessary to add the package to your project as a dependancy:
+
+Using npm:
+
+```bash
+npm install @sapudex/web-components
+```
+
+Or with yarn:
+
+```bash
+yarn add @sapudex/web-components
+```
+
+## Importing the component/-s you intend to use
+
+Next we're going to import and register the components we need, this should be done at the root of application(`src/main.js`, etc) to ensure the components are loaded appropriately.
+Registering the components will tell the browser what to do with them once it encounters their HTML markup tags in source.
+
+Replace `<component-name>` with the name of the desired component.
+
+```javascript
+import '@sapudex/web-components/dist/<component-name>.js';
+```
+
+For example, to use the "Button" component:
+
+```javascript
+import '@sapudex/web-components/dist/Button.js';
+```
+
+## Using the component
+
+And finally, once the component is imported, you can use it just like any other standard HTML element, typically by adding it to your rendered HTML markup.
+
+```html
+<html>
+  <body>
+    <section>
+      <udex-button>UDEx Button</udex-button>
+    </section>
+  </body>
+</html>
+```
+
+```jsx
+const renderSectionWithButton = (title = 'UDEx Button') => (
+  <section>
+    <udex-button>{title}</udex-button>
+  </section>
+);
+```
+
+## Using our custom theme
+
+While our components come out-of-the-box with default styling, it's recommended to include our theming assets as well.
+
+### Import our asset bundle and theme css
+
+Import our `Assets.js` in your root javascript - `main.js`, `index.js` or similar.
+
+```javascript
+import '@sapudex/web-components/dist/Assets.js';
+```
+
+and add the following HTML snippet to your root `.html` file - `index.html` or similar, depending on your setup.
+
+```html
+<link rel="stylesheet" type="text/css" href="path/to/@sapudex/design-tokens/dist/themes/sap_glow/css_variables.css">
+```
+
+Where you should adjust the path to the theme("css_variables.css") file provided by our `@sapudex/design-tokens` package.
+
+An alternative way for setting up the theme is to import our `css_variables.css` before the `Assets.js` in the root javascript.
+
+```javascript
+import '@sapudex/design-tokens/dist/themes/sap_glow/css_variables.css';
+import '@sapudex/web-components/dist/Assets.js';
+```
+
+Another option, if acceptable by technical requirements, you can use theme files from our CDN, e.g.:
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.udex.services.sap.com/dds/design-tokens/latest/themes/sap_glow/css_variables.css">
+```
+
+### Activate the theme
+
+You have several options on activating the theme but the simplest is to add a
+small HTML snippet to your root `.html` file:
+
+```html
+<script data-ui5-config type="application/json">
+  {
+    "theme": "sap_glow"
+  }
+</script>
+```
+
+Visit [SAP Web Components](https://ui5.github.io/webcomponents/docs/advanced/theming-part2/) to see other ways to activate our theme or just generally integrate with the SAP Web Components/Theme Designer theming ecosystem.
+
+## Configuration options
+
+### Controlling default tooltips
+
+Configuration options are inherited from UI5 settings. For more information, please visit [UI5 Configuration documentation](https://ui5.github.io/webcomponents/docs/advanced/configuration/).
+
+This configuration option controls whether components will display default tooltips in specific cases.
+
+Default tooltips are generally recommended to cover accessibility standards and typically you would not need to modify this setting. However, in rare cases you may want to implement custom tooltip visualization and turn off the default tooltips. To do so, set `enableDefaultTooltips` to `false`.
+
+```html
+<script data-ui5-config type="application/json">
+{
+  "enableDefaultTooltips": false
+}
+</script>
+
+```
+
+### Language
+
+Configuration options are inherited from UI5 settings. For more information, please visit [UI5 Configuration documentation](https://ui5.github.io/webcomponents/docs/advanced/configuration/).
+
+Language to be used for translatable texts. The `en` language is built in all UI5/UDEx Web Components that have translatable texts. Thus, components are always translated. Configuring another language will additionally fetch and use that language. Any language is fetched once.
+
+```html
+<script data-ui5-config type="application/json">
+{
+  "language": "zh_cn"
+}
+</script>
+
+```
+
+or
+
+```javascript
+import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+setLanguage("zh_cn");
+```
+
+### UDEx custom Translation
+
+UDEx custom translation is a feature that allows to overwrite default UI5 automatic translation of components hardcoded text.
+This setting will overwrite translated texts, regardless of configured language.
+To setup custom translations, push an object with proper `[key: string] :string` values into `window["udex-config"].translations` object, before component loads.
+
+```javascript
+window["udex-config"] = {
+  translations: {
+    MAIN_LINKS: "custom main links",
+    LOGOUT: "custom logout"
+  }
+};
+```
+
+List of all translatable keys can be found under `@sapudex/web-components/dist/generated/i18n/i18n-defaults.js`.
+
+## Using UI5 components
+
+In order to use UDEx components together with [UI5 components library](https://ui5.github.io/webcomponents/) , you need to make sure to use matching version for both libraries. UDEx components, under the hood uses following UI5 packages:
+
+- `@ui5/webcomponents`
+- `@ui5/webcomponents-base`
+- `@ui5/webcomponents-fiori`
+
+If any of this package is used at the same project scope, all of those packages version need to match with the one used internal in `@sapudex/web-components`.
+
+### Scoping configuration
+
+In case it is not possible to keep in sync ui5 and udex packages version or in case of conflicting functionalities, it is possible to keep both packages detached and use as separate libraries. When scoping is configured, components can be used under tags with custom suffix.
+
+Scoping configuration example:
+
+```javascript
+import {
+  setCustomElementsScopingSuffix,
+  setCustomElementsScopingRules,
+} from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+
+setCustomElementsScopingRules({ include: [/^udex-/, /^ui5-/], exclude: [] });
+setCustomElementsScopingSuffix("lib");
+```
+
+Usage example:
+
+```html
+<udex-checkbox-lib></udex-checkbox-lib>
+<ui5-checkbox-lib></ui5-checkbox-lib>
+```
+
+Please read more detailed information about the scoping on [UI5 documentation page](https://ui5.github.io/webcomponents/docs/advanced/scoping/).
+
+### Using UI5 icons
+
+UDEx components do not include icons, please use UI5 provided [icon library](https://ui5.github.io/webcomponents/icons/) available with following packages:
+
+- `@ui5/webcomponents-icons`
+- `@ui5/webcomponents-icons-tnt`
+- `@ui5/webcomponents-icons-business-suite`
+
+Those libraries contains only set of icons, without UI5 components or utility functions. It is not required to import `@ui5/webcomponents` package (or other components packages) in order to use icons with UDEx components.
+
+Single icon should be imported to be used by its name in UDEx components, e.g.:
+
+```javascript
+import "@ui5/webcomponents-icons/dist/action";
+```
+
+```html
+<udex-button icon="action">Button Text</udex-button>
+```
+
+In cases where UDEx do not provide option for component icon or there is special need to icon styling, custom UI5 [Icon](https://ui5.github.io/webcomponents/components/Icon/) component can be use as a slot, e.g.:
+
+```javascript
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/action";
+```
+
+```html
+<udex-tile>
+  <ui5-icon name="action"></ui5-icon>
+  <h3>Title</h3>
+  ...
+</udex-tile>
+```
+
+## Additional resources
+
+- [UI5: Importing components](https://ui5.github.io/webcomponents/docs/getting-started/components-packages/#usage)
+- [UI5: Understanding Web Component APIs](https://ui5.github.io/webcomponents/docs/getting-started/components-APIs/)
+- [UI5: Theming configuration](https://ui5.github.io/webcomponents/docs/advanced/configuration/#theme)
+- [UI5: i18n for Apps](https://ui5.github.io/webcomponents/docs/advanced/using-i18n-for-apps/)
+- [UI5: Using Icons](https://ui5.github.io/webcomponents/docs/advanced/using-icons/)

package/cypress/specs/HeroBanner.cy.tsx

@@ -1,5 +1,7 @@
-import {UDExHeroBanner, UDExButton, UDExBreadcrumbs, UDExBreadcrumbsItem} from "../support/component-imports.js";
+import {UDExHeroBanner, UDExButton, UDExBreadcrumbs, UDExBreadcrumbsItem, UDExSearch} from "../support/component-imports.js";
 import UDExButtonDesign from "../../src/types/ButtonDesign.js";
+// The SearchSuggestionsPopover feature must be imported so the backdrop events are enabled.
+import "../../src/features/SearchSuggestionsPopover.js";
 
 const primaryContentHeader = "Grow your business through enterprise";
 const secondaryContentHeader = "Entertain an idea";
@@ -172,3 +174,35 @@ describe("Hero Banner component", () => {
     });
   });
 });
+
+const BACKDROP_SUGGESTION_LIST = JSON.stringify({
+  suggested: ["SAP HANA", "SAP BTP"],
+  recommended: ["What is SAP HANA"],
+});
+
+const heroBannerWithSearch = (
+  <UDExHeroBanner id="heroBannerSearchBackdrop">
+    <div slot="content">
+      <UDExSearch show-suggested-popover open-suggestion-popup />
+    </div>
+  </UDExHeroBanner>
+);
+
+describe("HeroBanner — search backdrop", () => {
+  beforeEach(() => {
+    cy.mount(heroBannerWithSearch);
+    cy.get("[udex-search]").invoke("attr", "suggestion-list", BACKDROP_SUGGESTION_LIST);
+  });
+
+  it("backdrop is rendered after search suggestions are opened", () => {
+    cy.get(".udex-search-backdrop").should("be.visible");
+  });
+
+  it("backdrop is not visible after search dropdown is closed", () => {
+    cy.get(".udex-search-backdrop").should("be.visible");
+    cy.get("[udex-search]").invoke("removeAttr", "open-suggestion-popup");
+    cy.get("[udex-search]").shadow().find("#search-input").focus();
+    cy.realPress("Escape");
+    cy.get(".udex-search-backdrop").should("not.be.visible");
+  });
+});

package/cypress/specs/List.cy.tsx

@@ -421,4 +421,66 @@ describe("List component - SingleContent accessible name", () => {
     );
     cy.get("[udex-list]").shadow().find(".udex-list").should("not.have.attr", "aria-label");
   });
-});
+});
+
+// SingleContent is purely informational (no selection), so the inner list container must
+// expose the generic list/listitem semantics instead of the listbox/option selection-widget
+// semantics. listbox/option compute the option's accessible name from its whole subtree, which
+// pulls a nested udex-button (e.g. an info icon) label into the option name AND announces it
+// again when focused — a double announcement.
+describe("List component - SingleContent uses list/listitem role", () => {
+  const innerList = () =>
+    cy.get("[udex-list]").shadow().find(".udex-list");
+
+  it("SingleContent: inner list container has role=\"list\" by default", () => {
+    cy.mount(
+      <UDExList mode="SingleContent" accessible-name="Info list">
+        <UDExListItem id="sc-item">Cloud Solution</UDExListItem>
+      </UDExList>
+    );
+    innerList().should("have.attr", "role", "list");
+  });
+
+  it("SingleContent list item: shadow [part=item] has role=\"listitem\" by default", () => {
+    cy.mount(
+      <UDExList mode="SingleContent" accessible-name="Info list">
+        <UDExListItem id="sc-item">Cloud Solution</UDExListItem>
+      </UDExList>
+    );
+    cy.get("#sc-item").shadow().find("[part=item]").should("have.attr", "role", "listitem");
+  });
+
+
+  it("SingleContent: an explicit non-listbox accessible-role is respected (not forced to \"list\")", () => {
+    cy.mount(
+      <UDExList mode="SingleContent" accessible-role="menu" accessible-name="Info list">
+        <UDExListItem>Cloud Solution</UDExListItem>
+      </UDExList>
+    );
+    innerList().should("have.attr", "role", "menu");
+  });
+});
+
+// The SingleContent fix must not alter the selection modes. SingleSelect / MultiSelect /
+// RadioGroup lists (without collapsible group headers, so no tree pattern) still render the
+// listbox/option selection-widget semantics.
+describe("List component - selection modes keep listbox/option role", () => {
+  const listboxFixture = (mode: string) => (
+    <UDExList id="selection-list" mode={mode as "SingleSelect" | "MultiSelect" | "RadioGroup"}>
+      <UDExListItem id="selection-item">Item 1</UDExListItem>
+      <UDExListItem>Item 2</UDExListItem>
+    </UDExList>
+  );
+
+  ["SingleSelect", "MultiSelect", "RadioGroup"].forEach(mode => {
+    it(`${mode}: inner #udex-list div keeps role="listbox"`, () => {
+      cy.mount(listboxFixture(mode));
+      cy.get("#selection-list").shadow().find("#udex-list").should("have.attr", "role", "listbox");
+    });
+
+    it(`${mode}: list item shadow [part=item] keeps role="option"`, () => {
+      cy.mount(listboxFixture(mode));
+      cy.get("#selection-item").shadow().find("[part=item]").should("have.attr", "role", "option");
+    });
+  });
+});

package/cypress/specs/ListItem.cy.tsx

@@ -511,4 +511,48 @@ describe("ListItem", () => {
           .and("not.have.attr", "aria-checked");
       });
     });
+
+    // SingleContent is informational, not a selection widget, so the item's shadow
+    // [part=item] renders role="listitem" (not "option").
+    describe("SingleContent role", () => {
+      it("SingleContent item: [part=item] has role=\"listitem\" by default", () => {
+        cy.mount(<UDExListItem
+          id="sc-role-item"
+          mode={UDExListMode.SingleContent}
+          label="Cloud Solution">
+        </UDExListItem>);
+
+        cy.get("#sc-role-item").shadow()
+          .find("[part=item]").should("have.attr", "role", "listitem");
+      });
+
+      // Regression: the selection modes keep role="option" (roleItem returns the "option"
+      // fallback for every mode except SingleContent).
+      [UDExListMode.SingleSelect, UDExListMode.MultiSelect, UDExListMode.RadioGroup].forEach(mode => {
+        it(`${mode} item: [part=item] keeps role="option" by default`, () => {
+          cy.mount(<UDExListItem
+            id="sel-role-item"
+            mode={mode}
+            label="JavaScript">
+          </UDExListItem>);
+
+          cy.get("#sel-role-item").shadow()
+            .find("[part=item]").should("have.attr", "role", "option");
+        });
+      });
+
+      // An explicit accessible-role always wins over the SingleContent default (getter
+      // returns accessibleRole before falling through to the mode-based default).
+      it("explicit accessible-role overrides the SingleContent \"listitem\" default", () => {
+        cy.mount(<UDExListItem
+          id="sc-role-override"
+          accessible-role="option"
+          mode={UDExListMode.SingleContent}
+          label="Cloud Solution">
+        </UDExListItem>);
+
+        cy.get("#sc-role-override").shadow()
+          .find("[part=item]").should("have.attr", "role", "option");
+      });
+    });
 });

package/cypress/specs/MastheadShell.cy.tsx

@@ -8,6 +8,8 @@ import {
   UDExSearch,
 } from "../support/component-imports.js";
 import { profileLoggedInUser, profileLinks, subItemsExplore, subItemsProduct } from "../fixtures/masthead-shell.js";
+// The SearchSuggestionsPopover feature must be imported so the backdrop events are enabled.
+import "../../src/features/SearchSuggestionsPopover.js";
 
 const logoUrl = "https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg";
 const homeUrl = "https://sap.com";
@@ -724,3 +726,40 @@ describe("MastheadShell Search-Focused", () => {
     });
   });
 });
+
+const BACKDROP_SUGGESTION_LIST = JSON.stringify({
+  suggested: ["SAP HANA", "SAP BTP"],
+  recommended: ["What is SAP HANA"],
+});
+
+const mastheadWithSuggestionsSearch = (
+  <UDExMastheadShell
+    id="mastheadBackdropTest"
+    show-search-by-default
+    logo-url={logoUrl}
+    site-label="Test"
+    homepage-aria-label="SAP Homepage"
+    close-button-accessible-name="Close Search">
+    <UDExSearch slot="search" show-suggested-popover open-suggestion-popup />
+  </UDExMastheadShell>
+);
+
+describe("MastheadShell — search backdrop", () => {
+  beforeEach(() => {
+    cy.viewport(1440, 900);
+    cy.mount(mastheadWithSuggestionsSearch);
+    cy.get("[udex-search]").invoke("attr", "suggestion-list", BACKDROP_SUGGESTION_LIST);
+  });
+
+  it("backdrop is rendered after search suggestions are opened", () => {
+    cy.get(".udex-search-backdrop").should("be.visible");
+  });
+
+  it("backdrop is not visible after search dropdown is closed", () => {
+    cy.get(".udex-search-backdrop").should("be.visible");
+    cy.get("[udex-search]").invoke("removeAttr", "open-suggestion-popup");
+    cy.get("[udex-search]").shadow().find("#search-input").focus();
+    cy.realPress("Escape");
+    cy.get(".udex-search-backdrop").should("not.be.visible");
+  });
+});

package/cypress/specs/PhoneNumberField.cy.tsx

@@ -116,6 +116,34 @@ describe("PhoneNumberField", () => {
       cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "UA")
     });
 
+    it("country flag is automatically updated when value is set programmatically", () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").then($el => {
+        ($el[0] as any).value = "+38012345678"
+      })
+      cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "UA")
+      cy.get("#default").shadow().find("input").should("have.attr", "placeholder", "+380 XXXXX XXXXX")
+    });
+
+    it("country flag is updated when value is set programmatically after manual country selection", () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find(".udex-phone-number-field__input-wrapper").find(".udex-phone-number-field__open-button").click().realPress("d").realPress("Enter")
+      cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "DK")
+      cy.get("#default").then($el => {
+        ($el[0] as any).value = "+38012345678"
+      })
+      cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "UA")
+    });
+
+    it("changing country from dropdown updates flag and resets value to new prefix", () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find("input").type("38012345")
+      cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "UA")
+      cy.get("#default").shadow().find(".udex-phone-number-field__input-wrapper").find(".udex-phone-number-field__open-button").click().realPress("d").realPress("Enter")
+      cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "DK")
+      cy.get("#default").shadow().find("input").should("have.value", "+45")
+    });
+
     it("check that the maxlength and formatting is applied correctly", () => {
       cy.mount(defaultPhoneNumberField)
       cy.get("#default").shadow().find("input").type("+380123456789123456").should("have.value", "+380 12345 6789123")
@@ -192,4 +220,4 @@ describe("PhoneNumberField", () => {
       cy.get("#default").shadow().find("input").type("123-abc-456!@#").should("have.value", "+1 (234) 56")
     });
   });
-});
+});

package/cypress/specs/SelectBox.cy.tsx

@@ -2494,6 +2494,105 @@ describe("SelectBox", () => {
         .invoke("prop", "scrollTop")
         .should("be.greaterThan", 0);
     });
+
+    const singleSelectCollapsibleGroupScrollFixture = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" height="200px" label="Languages">
+        <UDExSelectBoxGroupHeader label="Backend Languages" collapsible>
+          <UDExSelectBoxItem label="Java"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Python"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Go"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Ruby"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Rust"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Node.js" selected></UDExSelectBoxItem>
+        </UDExSelectBoxGroupHeader>
+        <UDExSelectBoxGroupHeader label="Frontend Languages" collapsible>
+          <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="TypeScript"></UDExSelectBoxItem>
+        </UDExSelectBoxGroupHeader>
+      </UDExSelectBox>
+    </div>;
+
+    it("SingleSelect mode with collapsible group - selected item is scrolled into view after reopening the dropdown", () => {
+      cy.mount(singleSelectCollapsibleGroupScrollFixture);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").as("trigger");
+
+      cy.get("@trigger").click();
+      cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+      cy.get("@trigger").click();
+      cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("not.have.attr", "open");
+      cy.get("@trigger").click();
+      cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+
+      cy.get("#select-box").shadow()
+        .find("ui5-popover").shadow()
+        .find("[part=content]")
+        .invoke("prop", "scrollTop")
+        .should("be.greaterThan", 0);
+    });
+
+    const collapsedGroupWithSelectionFixture = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" height="200px" label="Languages">
+        <UDExSelectBoxGroupHeader label="Backend Languages" collapsible collapsed>
+          <UDExSelectBoxItem label="Java"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Python"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Node.js" selected></UDExSelectBoxItem>
+        </UDExSelectBoxGroupHeader>
+        <UDExSelectBoxGroupHeader label="Frontend Languages" collapsible>
+          <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="TypeScript"></UDExSelectBoxItem>
+        </UDExSelectBoxGroupHeader>
+      </UDExSelectBox>
+    </div>;
+
+    it("SingleSelect mode - collapsed group containing selected item is auto-expanded on dropdown open", () => {
+      cy.mount(collapsedGroupWithSelectionFixture);
+      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");
+
+      // The group that contains the selected item must be expanded (collapsed attribute removed).
+      cy.get("[udex-select-box-group-header]").filter("[label='Backend Languages']")
+        .should("not.have.attr", "collapsed");
+
+      // The rendered group header in the shadow DOM must also reflect the expanded state.
+      cy.get("#select-box").shadow()
+        .find("[udex-list-group-header]")
+        .first()
+        .should("not.have.attr", "collapsed");
+    });
+
+    it("SingleSelect mode - manually collapsed group with selected item re-expands on next dropdown open", () => {
+      cy.mount(collapsedGroupWithSelectionFixture);
+
+      // First open: group auto-expands.
+      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-group-header]").first().should("not.have.attr", "collapsed");
+
+      // Simulate user manually collapsing the group:
+      // - Set collapsed on the original item so _expandCollapsedGroupsWithSelection detects it.
+      // - Also set it on the rendered element in case the template re-render is async.
+      cy.get("[udex-select-box-group-header]").filter("[label='Backend Languages']")
+        .invoke("prop", "collapsed", true);
+      cy.get("#select-box").shadow()
+        .find("[udex-list-group-header]").first()
+        .invoke("prop", "collapsed", true);
+      cy.get("#select-box").shadow().find("[udex-list-group-header]").first().should("have.attr", "collapsed");
+
+      // Close the dropdown.
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+      cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("not.have.attr", "open");
+
+      // Reopen: the group must be auto-expanded again.
+      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-group-header]")
+        .first()
+        .should("not.have.attr", "collapsed");
+    });
   });
 
   // Tree accessibility pattern: SelectBox uses tree pattern when group headers are present.

package/cypress/specs/TagGroup.cy.tsx

@@ -210,4 +210,39 @@ describe("TagGroup", () => {
     });
   });
 
+  describe("Keyboard navigation with nonSelectable tags", () => {
+    const nonSelectableTagGroup = <UDExTagGroup>
+      {Array.from({ length: 16 }, (_, i) => (
+        <UDExTag nonSelectable text={`Tag ${i + 1}`} icon="employee"></UDExTag>
+      ))}
+    </UDExTagGroup>;
+
+    it("Shift+Tab from overflow button focuses last visible nonSelectable tag's button", () => {
+      cy.mount(<div><button id="before">before</button>{nonSelectableTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      cy.get("[udex-tag-group]").should("have.attr", "_is-hidden-tags");
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.visible");
+
+      cy.get("@tokenizer").then($tokenizer => {
+        const nMoreCount = ($tokenizer[0] as any)._nMoreCount as number;
+        const totalCount = ($tokenizer[0] as any)._tokens.length as number;
+        const visibleCount = totalCount - nMoreCount;
+        cy.get("#before").focus();
+        // Tab through each visible tag's button + 1 more to land on the "n more" button
+        Cypress._.times(visibleCount + 1, () => cy.realPress("Tab"));
+      });
+
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.focused");
+
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("@tokenizer").then($tokenizer => {
+        const nMoreCount = ($tokenizer[0] as any)._nMoreCount as number;
+        const totalCount = ($tokenizer[0] as any)._tokens.length as number;
+        const lastVisibleToken = ($tokenizer[0] as any)._tokens[totalCount - nMoreCount - 1];
+        cy.wrap(lastVisibleToken).shadow().find("button").should("be.focused");
+      });
+    });
+  });
 });