diff --git a/packages/main/src/components/AnalyticalCardHeader/index.tsx b/packages/main/src/components/AnalyticalCardHeader/index.tsx index fac2df3a531..7fd5573df9b 100644 --- a/packages/main/src/components/AnalyticalCardHeader/index.tsx +++ b/packages/main/src/components/AnalyticalCardHeader/index.tsx @@ -4,7 +4,7 @@ import iconDown from '@ui5/webcomponents-icons/dist/down.js'; import iconUp from '@ui5/webcomponents-icons/dist/up.js'; import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; -import type { MouseEventHandler, ReactElement, ReactNode } from 'react'; +import type { HTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from 'react'; import { cloneElement, forwardRef, useId } from 'react'; import { DeviationIndicator, ValueColor } from '../../enums/index.js'; import { @@ -27,6 +27,14 @@ export interface AnalyticalCardHeaderPropTypes extends CommonProps { * The title of the card */ titleText?: string; + /** + * Determines the ARIA level of the `titleText`. + * + * __Note:__ Defining a `titleTextLevel` will apply the `aria-level` attribute with a value from 1 to 6. + * + * @default 3 + */ + titleTextLevel?: HTMLAttributes['aria-level']; /** * The subtitle of the card */ @@ -98,6 +106,7 @@ const deviationMap = new Map([ export const AnalyticalCardHeader = forwardRef((props, ref) => { const { titleText, + titleTextLevel = 3, subtitleText, value, scale, @@ -182,7 +191,7 @@ export const AnalyticalCardHeader = forwardRef
- + {titleText} {status && {status}}