diff --git a/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx index e281a7e279f..5600be4ff19 100644 --- a/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx +++ b/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(); + 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([ + [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: * + * __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
@@ -209,7 +211,14 @@ export const AnalyticalCardHeader = forwardRef
-