diff --git a/packages/fiori/cypress/specs/ShellBarItem.cy.tsx b/packages/fiori/cypress/specs/ShellBarItem.cy.tsx
new file mode 100644
index 000000000000..005e1759b1ea
--- /dev/null
+++ b/packages/fiori/cypress/specs/ShellBarItem.cy.tsx
@@ -0,0 +1,62 @@
+import ShellBar from "../../src/ShellBar.js";
+import ShellBarItem from "../../src/ShellBarItem.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Avatar from "@ui5/webcomponents/dist/Avatar.js";
+import Input from "@ui5/webcomponents/dist/Input.js";
+
+describe("ShellBarItem getFocusDomRef", () => {
+ it("should return the correct DOM element when item is in the bar", () => {
+ cy.mount(
+
+
+
+ );
+
+ cy.get("#item1")
+ .then(($item) => {
+ const focusRef = $item[0].getFocusDomRef();
+ expect(focusRef).to.be.instanceOf(HTMLElement);
+ expect(focusRef).has.attr('ui5-button');
+ expect(focusRef?.getAttribute('data-ui5-stable')).to.equal('item-1');
+ });
+ });
+
+ it("should return the correct DOM element when item is in overflow popover", () => {
+ cy.mount(
+
+
+
+
+
+
+
+
+
+
+ );
+
+ // Force overflow by resizing viewport
+ cy.viewport(320, 800);
+
+ // Open overflow popover
+ cy.get("#shellbar-overflow-test")
+ .shadow()
+ .find(".ui5-shellbar-overflow-button")
+ .should("be.visible")
+ .click();
+
+ cy.get("#shellbar-overflow-test")
+ .shadow()
+ .find(".ui5-shellbar-overflow-popover")
+ .should("be.visible");
+
+ // Test when items are in overflow popover
+ cy.get("#overflow-item1")
+ .then(($item) => {
+ const focusRef = $item[0].getFocusDomRef();
+ // When overflowed, should return the list item in the popover
+ expect(focusRef?.hasAttribute('ui5-li'));
+ expect(focusRef?.getAttribute('data-ui5-stable')).to.equal('overflow-1');
+ });
+ });
+});
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index 8de6a9e99188..a9846f5814ee 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -1272,7 +1272,7 @@ class ShellBar extends UI5Element {
const bIndex = PREDEFINED_PLACE_ACTIONS.indexOf(b.icon || "");
return aIndex - bIndex;
}).map((item: ShellBarItem) => {
- item._getRealDomRef = () => this.getDomRef()!.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
+ item._getRealDomRef = () => this.shadowRoot!.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
// check if included for lean mode
const show = !!item.icon || false;
return {
diff --git a/packages/fiori/src/ShellBarPopoverTemplate.tsx b/packages/fiori/src/ShellBarPopoverTemplate.tsx
index a97604a13117..b32f7491d225 100644
--- a/packages/fiori/src/ShellBarPopoverTemplate.tsx
+++ b/packages/fiori/src/ShellBarPopoverTemplate.tsx
@@ -32,6 +32,7 @@ export default function PopoversTemplate(this: ShellBar) {
key={index}
data-count={icon.count}
data-ui5-external-action-item-id={icon.refItemid}
+ data-ui5-stable={icon.stableDomRef}
icon={icon.icon ? icon.icon : ""}
type="Active"
onui5-_press={icon.press}
diff --git a/packages/fiori/src/ShellBarTemplate.tsx b/packages/fiori/src/ShellBarTemplate.tsx
index 914146bce097..a70676e1d85f 100644
--- a/packages/fiori/src/ShellBarTemplate.tsx
+++ b/packages/fiori/src/ShellBarTemplate.tsx
@@ -215,7 +215,7 @@ export default function ShellBarTemplate(this: ShellBar) {
tooltip={item.tooltip}
data-ui5-notifications-count={this.notificationsCount}
data-ui5-external-action-item-id={item.refItemid}
- data-ui5-stable={item.stableDomRef}
+ data-ui5-stable={item.icon && !this.isIconHidden(item.icon) ? item.stableDomRef : undefined}
onClick={item.press}
accessibilityAttributes={item.accessibilityAttributes}
>