fix(ui5-dynamic-page): correct pin button tooltip based on pinned state (#12086)

The pin button tooltip now correctly displays:
- "Pin Header" when header is not pinned
- "Unpin Header" when header is pinned

Previously, the tooltip always showed "Pin Header" regardless
of the current pinned state, which was confusing for users.

Fixes: #12064

Author: kgogov

packages/fiori/cypress/specs/DynamicPage.cy.tsx

@@ -35,4 +35,38 @@ describe("DynamicPage", () => {
       .invoke("prop", "headerPinned")
       .should("be.false");
   });
+
+  it("should show correct tooltip for pin button based on pinned state", () => {
+    // Initially the header should not be pinned, so tooltip should be "Pin Header"
+    cy.get("@dynamicPage")
+      .shadow()
+      .find("ui5-dynamic-page-header-actions")
+      .shadow()
+      .find(".ui5-dynamic-page-header-action-pin")
+      .should("have.attr", "tooltip", "Pin Header");
+
+    // Pin the header
+    cy.get("@dynamicPage")
+      .invoke("prop", "headerPinned", true);
+
+    // After pinning, tooltip should change to "Unpin Header"
+    cy.get("@dynamicPage")
+      .shadow()
+      .find("ui5-dynamic-page-header-actions")
+      .shadow()
+      .find(".ui5-dynamic-page-header-action-pin")
+      .should("have.attr", "tooltip", "Unpin Header");
+
+    // Unpin the header
+    cy.get("@dynamicPage")
+      .invoke("prop", "headerPinned", false);
+
+    // After unpinning, tooltip should change back to "Pin Header"
+    cy.get("@dynamicPage")
+      .shadow()
+      .find("ui5-dynamic-page-header-actions")
+      .shadow()
+      .find(".ui5-dynamic-page-header-action-pin")
+      .should("have.attr", "tooltip", "Pin Header");
+  });
 });

packages/fiori/src/DynamicPageHeaderActions.ts

@@ -26,6 +26,7 @@ import {
 	DYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER,
 	DYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER,
 	DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER,
+	DYNAMIC_PAGE_ARIA_LABEL_UNPIN_HEADER,
 } from "./generated/i18n/i18n-defaults.js";
 
 type DynamicPageHeaderActionsAccessibilityAttributes = Pick<AccessibilityAttributes, "controls">;
@@ -153,7 +154,9 @@ class DynamicPageHeaderActions extends UI5Element {
 	}
 
 	get pinLabel() {
-		return DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER);
+		return this.pinned
+			? DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_UNPIN_HEADER)
+			: DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER);
 	}
 
 	get expandLabel() {

packages/fiori/src/i18n/messagebundle.properties

@@ -23,6 +23,9 @@ DYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER=Snap Header
 #XACT: Aria label for the button that pins the header
 DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER=Pin Header
 
+#XACT: Aria label for the button that unpins the header
+DYNAMIC_PAGE_ARIA_LABEL_UNPIN_HEADER=Unpin Header
+
 #XACT: Aria description for the button that toggles the header
 DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER=Toggle Header