From 24df2d023e3b3b227aa155e6db414c4150473e0c Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 14 Jan 2026 14:11:35 +0100
Subject: [PATCH 1/2] fix(AnalyticalCardHeader): add tooltip for numeric
 content

---
 .../AnalyticalCardHeader.cy.tsx               | 29 +++++++++++++++++++
 .../components/AnalyticalCardHeader/index.tsx | 13 +++++++--
 packages/main/src/enums/ValueColor.ts         |  3 +-
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx
index e281a7e279f..607dc1cdb46 100644
--- a/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx
+++ b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx
@@ -79,5 +79,34 @@ describe('AnalyticalCardHeader', () => {
     cy.get('[ui5-icon]').should('have.attr', 'name', 'up');
   });
 
+  Object.values(ValueColor).forEach((state: AnalyticalCardHeaderPropTypes['state']) => {
+    Object.values(DeviationIndicator).forEach((trend: AnalyticalCardHeaderPropTypes['trend']) => {
+      it(`numeric tooltip & aria-label (trend: ${trend}, state: ${state})`, () => {
+        cy.mount(<AnalyticalCardHeader titleText={'Header'} trend={trend} value={'65.34'} state={state} scale={'K'} />);
+        if (trend === 'None') {
+          cy.get('[data-component-name="AnalyticalCardHeaderNumericContent"]').should(
+            'have.attr',
+            'title',
+            `65.34K\n${semanticColorMap.get(state)}`.trim(),
+          );
+        } else {
+          cy.get('[data-component-name="AnalyticalCardHeaderNumericContent"]').should(
+            'have.attr',
+            'title',
+            `65.34K\n${trend === 'Up' ? 'Ascending' : 'Descending'}\n${semanticColorMap.get(state)}`.trim(),
+          );
+        }
+      });
+    });
+  });
+
   cypressPassThroughTestsFactory(AnalyticalCardHeader);
 });
+
+const semanticColorMap = new Map<AnalyticalCardHeaderPropTypes['state'], any>([
+  [ValueColor.Neutral, 'Neutral'],
+  [ValueColor.Good, 'Good'],
+  [ValueColor.Critical, 'Warning'],
+  [ValueColor.Error, 'Critical'],
+  [ValueColor.None, ''],
+]);
diff --git a/packages/main/src/components/AnalyticalCardHeader/index.tsx b/packages/main/src/components/AnalyticalCardHeader/index.tsx
index 6290d8e185f..494683bad97 100644
--- a/packages/main/src/components/AnalyticalCardHeader/index.tsx
+++ b/packages/main/src/components/AnalyticalCardHeader/index.tsx
@@ -59,6 +59,8 @@ export interface AnalyticalCardHeaderPropTypes extends CommonProps {
    * The semantic color which represents the state of the main number indicator.
    * Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Critical</code></li> <li><code>Good</code></li> <li><code>Neutral</code></li></ul>
    *
+   * __Note__: "None" has the same color as "Neutral" but doesn't add the tooltip and accessible-name.
+   *
    * @default `"None"`
    */
   state?: ValueColor | keyof typeof ValueColor;
@@ -185,9 +187,9 @@ export const AnalyticalCardHeader = forwardRef<HTMLDivElement, AnalyticalCardHea
       role="group"
       aria-roledescription={i18nBundle.getText(ARIA_DESC_CARD_HEADER)}
       aria-labelledby={cardLabelledBy}
+      slot="header"
       {...rest}
       onClick={onClick}
-      slot={'header'}
     >
       <div>
         <div className={classNames.headerTitles}>
@@ -209,7 +211,14 @@ export const AnalyticalCardHeader = forwardRef<HTMLDivElement, AnalyticalCardHea
           )}
         </div>
         <div className={classNames.kpiContent}>
-          <div className={valueAndUnitClasses} id={`${headerId}-mainIndicator`} aria-label={kpiAriaLabel} role="img">
+          <div
+            className={valueAndUnitClasses}
+            id={`${headerId}-mainIndicator`}
+            aria-label={kpiAriaLabel.trim()}
+            title={kpiAriaLabel.trim()}
+            role="img"
+            data-component-name="AnalyticalCardHeaderNumericContent"
+          >
             <span className={classNames.value}>{value}</span>
             <div className={classNames.indicatorAndUnit}>
               {trend !== DeviationIndicator.None && (
diff --git a/packages/main/src/enums/ValueColor.ts b/packages/main/src/enums/ValueColor.ts
index 1e190b742a8..fd56ea917ed 100644
--- a/packages/main/src/enums/ValueColor.ts
+++ b/packages/main/src/enums/ValueColor.ts
@@ -17,7 +17,8 @@ export enum ValueColor {
   Neutral = 'Neutral',
   /**
    * None value color.
-   * _Note_: The None value color is set to prevent the display of tooltip 'Neutral' for numeric content.
+   *
+   * __Note__: "None" has the same color as "Neutral" but doesn't add the tooltip and accessible-name.
    */
   None = 'None',
 }

From b0d70c6745ae211a10e8e9693f886d3a9976ea4d Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 14 Jan 2026 14:40:36 +0100
Subject: [PATCH 2/2] test `aria-label` val

---
 .../AnalyticalCardHeader.cy.tsx                     | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx
index 607dc1cdb46..5600be4ff19 100644
--- a/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx
+++ b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx
@@ -84,16 +84,21 @@ describe('AnalyticalCardHeader', () => {
       it(`numeric tooltip & aria-label (trend: ${trend}, state: ${state})`, () => {
         cy.mount(<AnalyticalCardHeader titleText={'Header'} trend={trend} value={'65.34'} state={state} scale={'K'} />);
         if (trend === 'None') {
+          const shouldVal = `65.34K\n${semanticColorMap.get(state)}`.trim();
+          cy.get('[data-component-name="AnalyticalCardHeaderNumericContent"]').should('have.attr', 'title', shouldVal);
           cy.get('[data-component-name="AnalyticalCardHeaderNumericContent"]').should(
             'have.attr',
-            'title',
-            `65.34K\n${semanticColorMap.get(state)}`.trim(),
+            'aria-label',
+            shouldVal,
           );
         } else {
+          const shouldVal =
+            `65.34K\n${trend === 'Up' ? 'Ascending' : 'Descending'}\n${semanticColorMap.get(state)}`.trim();
+          cy.get('[data-component-name="AnalyticalCardHeaderNumericContent"]').should('have.attr', 'title', shouldVal);
           cy.get('[data-component-name="AnalyticalCardHeaderNumericContent"]').should(
             'have.attr',
-            'title',
-            `65.34K\n${trend === 'Up' ? 'Ascending' : 'Descending'}\n${semanticColorMap.get(state)}`.trim(),
+            'aria-label',
+            shouldVal,
           );
         }
       });