fix(AnalyticalCardHeader): add tooltip for numeric content

packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx

@@ -79,5 +79,39 @@ 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') {
+          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',
+            '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',
+            'aria-label',
+            shouldVal,
+          );
+        }
+      });
+    });
+  });
+
   cypressPassThroughTestsFactory(AnalyticalCardHeader);
 });
+
+const semanticColorMap = new Map<AnalyticalCardHeaderPropTypes['state'], any>([
+  [ValueColor.Neutral, 'Neutral'],
+  [ValueColor.Good, 'Good'],
+  [ValueColor.Critical, 'Warning'],
+  [ValueColor.Error, 'Critical'],
+  [ValueColor.None, ''],
+]);

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 && (

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',
 }