Repository: gooddata/gooddata-ui-sdk
Pull request #6316: feat: Headline Acc. keyboard
Author: login: NestorEncinas
Labels: name: ready to review
description: PR is ready to final code review
Created: 2025-05-02T10:38:47Z | Merged: 2025-05-05T10:31:32Z

risk: low
JIRA: LX-1027

<!--
Description of changes.
-->

---

> [!IMPORTANT]
> Please, **don't forget to run `rush change`** for the commits that introduce **new features** or **significant changes** 🙏 This information is used to generate the [change log](https://github.com/gooddata/gooddata-ui-sdk/blob/master/libs/sdk-ui-all/CHANGELOG.md).

---

### Run extended test by pull request comment

Commands can be triggered by posting a comment with specific text on the pull request. It is possible to trigger multiple commands simultaneously.

```
extended-test --backstop | --integrated | --isolated | --record [--filter <file1>,<file2>,...,<fileN>]
```

#### Explanation

-   `--backstop` The command to run screen tests (optionally with keeping passing screenshots).
-   `--integrated` The command to run integrated tests against the live backend.
-   `--isolated` The command to run isolated tests against recordings.
-   `--record` The command to create new recordings for isolated tests.
-   `--filter` (Optional) A comma-separated list of test files to run. This parameter is valid only for the `--integrated`, `--isolated`, and `--record` commands.

#### Examples

```
extended-test --backstop
extended-test --backstop --keep-passing-screenshots
extended-test --integrated
extended-test --integrated --filter test1.spec.ts,test2.spec.ts
extended-test --isolated
extended-test --isolated --filter test1.spec.ts,test2.spec.ts
extended-test --record
extended-test --record --filter test1.spec.ts,test2.spec.ts
```

#### Commands for Bear platform working on branch rel/9.9

```
extended-test-legacy --backstop
extended-test-legacy --isolated
extended-test-legacy --record
```



Diff:
diff --git a/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/CompareSection.tsx b/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/CompareSection.tsx
index 4462c50248a..ae237545d04 100644
--- a/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/CompareSection.tsx
+++ b/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/CompareSection.tsx
@@ -1,4 +1,4 @@
-// (C) 2023 GoodData Corporation
+// (C) 2023-2025 GoodData Corporation
 import React, { createRef, useMemo } from "react";
 
 import { HeadlinePagination, shouldRenderPagination } from "@gooddata/sdk-ui-vis-commons";
@@ -7,6 +7,7 @@ import CompareSectionItem from "./CompareSectionItem.js";
 import { getCompareSectionClasses } from "../../utils/HeadlineDataItemUtils.js";
 import { useBaseHeadline } from "./BaseHeadlineContext.js";
 import { BaseHeadlineItemAccepted, IBaseHeadlineItem } from "../../interfaces/BaseHeadlines.js";
+import { useIntl } from "react-intl";
 
 interface ICompareSectionProps {
     secondaryItem: IBaseHeadlineItem<BaseHeadlineItemAccepted>;
@@ -17,6 +18,8 @@ const CompareSection: React.FC<ICompareSectionProps> = ({ secondaryItem, tertiar
     const { config, clientHeight, clientWidth } = useBaseHeadline();
     const { enableCompactSize } = config;
 
+    const intl = useIntl();
+
     const secondaryItemTitleWrapperRef = createRef<HTMLDivElement>();
 
     const pagination = useMemo(
@@ -36,6 +39,14 @@ const CompareSection: React.FC<ICompareSectionProps> = ({ secondaryItem, tertiar
                     <CompareSectionItem dataItem={secondaryItem} titleRef={secondaryItemTitleWrapperRef} />
                 )}
                 renderTertiaryItem={() => <CompareSectionItem dataItem={tertiaryItem} />}
+                accessibilityConfig={{
+                    nextAriaLabel: intl.formatMessage({
+                        id: "visualizations.headline.pagination.next.metricLabel",
+                    }),
+                    previousAriaLabel: intl.formatMessage({
+                        id: "visualizations.headline.pagination.previous.metricLabel",
+                    }),
+                }}
             />
         </div>
     ) : (
diff --git a/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/baseHeadlineDataItems/withDrillable.tsx b/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/baseHeadlineDataItems/withDrillable.tsx
index 2f72731c3fb..cbb58dd858d 100644
--- a/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/baseHeadlineDataItems/withDrillable.tsx
+++ b/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/baseHeadlineDataItems/withDrillable.tsx
@@ -1,4 +1,4 @@
-// (C) 2023 GoodData Corporation
+// (C) 2023-2025 GoodData Corporation
 import React, { useCallback } from "react";
 import { wrapDisplayName } from "@gooddata/sdk-ui";
 
@@ -14,7 +14,7 @@ export const withDrillable = <T extends IWithDrillableItemProps<IHeadlineDataIte
         const { fireDrillEvent } = useBaseHeadline();
 
         const handleDrillable = useCallback(
-            (event: React.MouseEvent<EventTarget>) => {
+            (event: React.MouseEvent<EventTarget> | React.KeyboardEvent<EventTarget>) => {
                 if (dataItem?.isDrillable) {
                     fireDrillEvent(dataItem, elementType, event.target);
                 }
@@ -23,12 +23,12 @@ export const withDrillable = <T extends IWithDrillableItemProps<IHeadlineDataIte
         );
 
         return dataItem?.isDrillable ? (
-            <div
-                className="is-drillable s-is-drillable headline-item-link s-headline-item-link"
+            <button
+                className="gd-headline-drillable-button is-drillable s-is-drillable headline-item-link s-headline-item-link"
                 onClick={handleDrillable}
             >
                 <BaseHeadlineValueItem {...props} />
-            </div>
+            </button>
         ) : (
             <BaseHeadlineValueItem {...props} />
         );
diff --git a/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/tests/BaseHeadline.test.tsx b/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/tests/BaseHeadline.test.tsx
index 52bbeb71f39..506e5e82dc5 100644
--- a/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/tests/BaseHeadline.test.tsx
+++ b/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/tests/BaseHeadline.test.tsx
@@ -7,6 +7,7 @@ import { TEST_BASE_HEADLINE_ITEM } from "../../../tests/TestData.fixtures.js";
 import { IBaseHeadlineItem } from "../../../interfaces/BaseHeadlines.js";
 import * as PrimarySection from "../PrimarySection.js";
 import * as CompareSection from "../CompareSection.js";
+import { withIntl } from "@gooddata/sdk-ui";
 
 describe("BaseHeadline", () => {
     let MockPrimarySection: SpyInstance;
@@ -45,7 +46,9 @@ describe("BaseHeadline", () => {
             onDrill: vi.fn(),
             onAfterRender: params.onAfterRender || vi.fn(),
         };
-        return render(<BaseHeadline {...props} />);
+
+        const WrappedBaseHeadline = withIntl(BaseHeadline);
+        return render(<WrappedBaseHeadline {...props} />);
     };
 
     beforeEach(() => {
diff --git a/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/tests/CompareSection.test.tsx b/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/tests/CompareSection.test.tsx
index 2e2032b582e..cb39af3870e 100644
--- a/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/tests/CompareSection.test.tsx
+++ b/libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/tests/CompareSection.test.tsx
@@ -1,4 +1,4 @@
-// (C) 2023 GoodData Corporation
+// (C) 2023-2025 GoodData Corporation
 import React from "react";
 import { afterAll, beforeEach, describe, expect, it, SpyInstance, vi } from "vitest";
 import { render } from "@testing-library/react";
@@ -12,6 +12,7 @@ import {
     TEST_BASE_HEADLINE_ITEM,
 } from "../../../tests/TestData.fixtures.js";
 import { IHeadlineDataItem } from "../../../interfaces/Headlines.js";
+import { withIntl } from "@gooddata/sdk-ui";
 
 describe("CompareSection", () => {
     let MockCompareItem: SpyInstance;
@@ -29,7 +30,8 @@ describe("CompareSection", () => {
         secondaryItem: IBaseHeadlineItem<IHeadlineDataItem>;
         tertiaryItem?: IBaseHeadlineItem<IHeadlineDataItem>;
     }) => {
-        return render(<CompareSection {...props} />);
+        const WrappedHeadlineCompareSection = withIntl(CompareSection);
+        return render(<WrappedHeadlineCompareSection {...props} />);
     };
 
     beforeEach(() => {
diff --git a/libs/sdk-ui-charts/src/charts/headline/internal/transformations/ComparisonTransformation.tsx b/libs/sdk-ui-charts/src/charts/headline/internal/transformations/ComparisonTransformation.tsx
index 4abf648afa4..33169facfc3 100644
--- a/libs/sdk-ui-charts/src/charts/headline/internal/transformations/ComparisonTransformation.tsx
+++ b/libs/sdk-ui-charts/src/charts/headline/internal/transformations/ComparisonTransformation.tsx
@@ -1,4 +1,4 @@
-// (C) 2023 GoodData Corporation
+// (C) 2023-2025 GoodData Corporation
 import React, { useMemo } from "react";
 import { useIntl } from "react-intl";
 
diff --git a/libs/sdk-ui-charts/src/charts/headline/internal/transformations/MultiMeasuresTransformation.tsx b/libs/sdk-ui-charts/src/charts/headline/internal/transformations/MultiMeasuresTransformation.tsx
index 44296fd3f1d..a5874c6b0b9 100644
--- a/libs/sdk-ui-charts/src/charts/headline/internal/transformations/MultiMeasuresTransformation.tsx
+++ b/libs/sdk-ui-charts/src/charts/headline/internal/transformations/MultiMeasuresTransformation.tsx
@@ -1,4 +1,4 @@
-// (C) 2023 GoodData Corporation
+// (C) 2023-2025 GoodData Corporation
 import React, { useMemo } from "react";
 import BaseHeadline from "../headlines/baseHeadline/BaseHeadline.js";
 import { getBaseHeadlineData } from "../utils/BaseHeadlineTransformationUtils.js";
diff --git a/libs/sdk-ui-charts/styles/scss/headline.scss b/libs/sdk-ui-charts/styles/scss/headline.scss
index 8fda0832cd1..0996e34756b 100644
--- a/libs/sdk-ui-charts/styles/scss/headline.scss
+++ b/libs/sdk-ui-charts/styles/scss/headline.scss
@@ -1,4 +1,4 @@
-// (C) 2007-2024 GoodData Corporation
+// (C) 2007-2025 GoodData Corporation
 @use "sass:color";
 @use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
 @use "@gooddata/sdk-ui-kit/styles/scss/typo-mixins";
@@ -39,6 +39,20 @@
             -webkit-backface-visibility: hidden;
         }
 
+        .gd-headline-drillable-button {
+            background: none;
+            border: none;
+            font-size: 50px;
+            overflow: hidden;
+            line-height: 60px;
+            white-space: nowrap;
+            color: var(--gd-kpi-primaryMeasureColor, kit-variables.$gd-color-dark);
+            display: inline-block;
+            font-family: inherit;
+            font-weight: bold;
+            padding: 0;
+        }
+
         &.is-drillable,
         .is-drillable {
             .headline-value-wrapper {
@@ -73,6 +87,16 @@
         flex-shrink: 1;
         padding-right: 0;
 
+        .gd-headline-drillable-button {
+            background: none;
+            border: none;
+            display: inline-block;
+            font-family: inherit;
+            color: inherit;
+            width: 100%;
+            padding: 0;
+        }
+
         &.is-drillable,
         .is-drillable {
             cursor: pointer;
diff --git a/libs/sdk-ui-dashboard/src/presentation/presentationComponents/DashboardItems/DashboardItem.tsx b/libs/sdk-ui-dashboard/src/presentation/presentationComponents/DashboardItems/DashboardItem.tsx
index 0d5a7cefaa6..19b3c585866 100644
--- a/libs/sdk-ui-dashboard/src/presentation/presentationComponents/DashboardItems/DashboardItem.tsx
+++ b/libs/sdk-ui-dashboard/src/presentation/presentationComponents/DashboardItems/DashboardItem.tsx
@@ -7,6 +7,7 @@ import { useId } from "@gooddata/sdk-ui-kit";
 interface IDashboardItemProps extends React.HTMLAttributes<HTMLDivElement> {
     screen: ScreenSize;
     description?: string;
+    titleId?: string;
     ref?: React.Ref<HTMLDivElement>;
     exportData?: CommonExportDataAttributes;
 }
@@ -21,7 +22,7 @@ const screenClasses: { [S in ScreenSize]: string } = {
 };
 
 export const DashboardItem: React.FC<IDashboardItemProps> = React.forwardRef(
-    ({ className, screen, description, exportData, ...props }, ref) => {
+    ({ className, screen, description, exportData, titleId, ...props }, ref) => {
         const id = useId();
         const itemFigureId = `dashboard-item-${id}`;
         return (
@@ -39,6 +40,7 @@ export const DashboardItem: React.FC<IDashboardItemProps> = React.forwardRef(
                 ref={ref}
                 role="figure"
                 aria-describedby={description ? itemFigureId : undefined}
+                aria-labelledby={titleId ? titleId : undefined}
             >
                 {description ? (
                     <span className={"sr-only"} id={itemFigureId}>
diff --git a/libs/sdk-ui-dashboard/src/presentation/presentationComponents/DashboardItems/DashboardItemHeadline.tsx b/libs/sdk-ui-dashboard/src/presentation/presentationComponents/DashboardItems/DashboardItemHeadline.tsx
index 3ee706b08ee..7db91204743 100644
--- a/libs/sdk-ui-dashboard/src/presentation/presentationComponents/DashboardItems/DashboardItemHeadline.tsx
+++ b/libs/sdk-ui-dashboard/src/presentation/presentationComponents/DashboardItems/DashboardItemHeadline.tsx
@@ -10,12 +10,14 @@ import { CommonExportDataAttributes } from "../../export/index.js";
 
 interface IDashboardItemHeadlineProps {
     title: string;
+    titleId?: string;
     clientHeight?: number;
     exportData?: CommonExportDataAttributes;
 }
 
 export const DashboardItemHeadline: React.FC<IDashboardItemHeadlineProps> = ({
     title,
+    titleId,
     clientHeight,
     exportData,
 }) => {
@@ -51,7 +53,7 @@ export const DashboardItemHeadline: React.FC<IDashboardItemHeadlineProps> = ({
     }, [title, elementWidth]);
 
     return (
-        <DashboardItemHeadlineContainer clientHeight={clientHeight} exportData={exportData}>
+        <DashboardItemHeadlineContainer clientHeight={clientHeight} exportData={exportData} titleId={titleId}>
             {truncatedTitlePart}
         </DashboardItemHeadlineContainer>
     );
diff --git a/libs/sdk-ui-dashboard/src/presentation/presentationComponents/DashboardItems/DashboardItemHeadlineContainer.tsx b/libs/sdk-ui-dashboard/src/presentation/presentationComponents/DashboardItems/DashboardItemHeadlineContainer.tsx
index f48d50d3f38..ce378c0e223 100644
--- a/libs/sdk-ui-dashboard/src/presentation/presentationComponents/DashboardItems/DashboardItemHeadlineContainer.tsx
+++ b/libs/sdk-ui-dashboard/src/presentation/presentationComponents/DashboardItems/DashboardItemHeadlineContainer.tsx
@@ -4,6 +4,7 @@ import { CommonExportDataAttributes } from "../../export/index.js";
 
 interface IDashboardItemHeadlineContainerProps {
     children: React.ReactNode;
+    titleId?: string;
     clientHeight?: number;
     exportData?: CommonExportDataAttributes;
 }
@@ -48,11 +49,13 @@ function getOuterStyle(
 const DashboardItemHeadlineContainerInner: React.FC<{
     hasCustomMargin: boolean;
     isCustomHeightSmall: boolean;
+    titleId?: string;
     exportData?: CommonExportDataAttributes;
     children?: React.ReactNode;
 }> = memo(function DashboardItemHeadlineContainerInner({
     hasCustomMargin,
     isCustomHeightSmall,
+    titleId,
     exportData,
     children,
 }) {
@@ -62,7 +65,11 @@ const DashboardItemHeadlineContainerInner: React.FC<{
             style={getOuterStyle(hasCustomMargin, isCustomHeightSmall)}
             {...exportData}
         >
-            <div className="item-headline" style={isCustomHeightSmall ? INNER_STYLE_SMALL : undefined}>
+            <div
+                id={titleId}
+                className="item-headline"
+                style={isCustomHeightSmall ? INNER_STYLE_SMALL : undefined}
+            >
                 {children}
             </div>
         </div>
@@ -71,6 +78,7 @@ const DashboardItemHeadlineContainerInner: React.FC<{
 
 export const DashboardItemHeadlineContainer: React.FC<IDashboardItemHeadlineContainerProps> = ({
     children,
+    titleId,
     clientHeight,
     exportData,
 }) => {
@@ -79,6 +87,7 @@ export const DashboardItemHeadlineContainer: React.FC<IDashboardItemHeadlineCont
             hasCustomMargin={clientHeight !== undefined ? clientHeight <= SMALL_WIDGET_HEIGHT : false}
             isCustomHeightSmall={isSmallCustomHeight(clientHeight)}
             exportData={exportData}
+            titleId={titleId}
         >
             {children}
         </DashboardItemHeadlineContainerInner>
diff --git a/libs/sdk-ui-dashboard/src/presentation/widget/widget/InsightWidget/DefaultDashboardInsightWidget.tsx b/libs/sdk-ui-dashboard/src/presentation/widget/widget/InsightWidget/DefaultDashboardInsightWidget.tsx
index d30479ceda8..ccc21095b73 100644
--- a/libs/sdk-ui-dashboard/src/presentation/widget/widget/InsightWidget/DefaultDashboardInsightWidget.tsx
+++ b/libs/sdk-ui-dashboard/src/presentation/widget/widget/InsightWidget/DefaultDashboardInsightWidget.tsx
@@ -26,6 +26,7 @@ import { IDefaultDashboardInsightWidgetProps } from "./types.js";
 import { useAlertingAndScheduling } from "./useAlertingAndScheduling.js";
 import { useWidgetHighlighting } from "../../common/useWidgetHighlighting.js";
 import { useInsightWidgetDescriptionComponent } from "../../description/InsightWidgetDescriptionComponentProvider.js";
+import { useId } from "@gooddata/sdk-ui-kit";
 
 export const DefaultDashboardInsightWidget: React.FC<Omit<IDefaultDashboardInsightWidgetProps, "insight">> = (
     props,
@@ -164,6 +165,8 @@ const DefaultDashboardInsightWidgetCore: React.FC<
             : insight.insight.summary
         : "";
 
+    const titleId = useId();
+
     return (
         <DashboardItem
             className={cx(
@@ -177,6 +180,7 @@ const DefaultDashboardInsightWidgetCore: React.FC<
             ref={elementRef}
             description={accessibilityWidgetDescription}
             exportData={exportData?.section}
+            titleId={titleId}
         >
             <DashboardItemVisualization
                 isExport={!!exportData}
@@ -184,6 +188,7 @@ const DefaultDashboardInsightWidgetCore: React.FC<
                     !widget.configuration?.hideTitle && (
                         <DashboardItemHeadline
                             title={widget.title}
+                            titleId={titleId}
                             clientHeight={clientHeight}
                             exportData={exportData?.title}
                         />
diff --git a/libs/sdk-ui-vis-commons/api/sdk-ui-vis-commons.api.md b/libs/sdk-ui-vis-commons/api/sdk-ui-vis-commons.api.md
index d4a86af1ce9..0bea136881b 100644
--- a/libs/sdk-ui-vis-commons/api/sdk-ui-vis-commons.api.md
+++ b/libs/sdk-ui-vis-commons/api/sdk-ui-vis-commons.api.md
@@ -230,6 +230,11 @@ export interface IGeoChartLegendData {
 
 // @internal (undocumented)
 export interface IHeadlinePaginationProps {
+    // (undocumented)
+    accessibilityConfig?: {
+        nextAriaLabel?: string;
+        previousAriaLabel?: string;
+    };
     // (undocumented)
     renderSecondaryItem: () => JSX.Element;
     // (undocumented)
diff --git a/libs/sdk-ui-vis-commons/src/compactSize/HeadlinePagination.tsx b/libs/sdk-ui-vis-commons/src/compactSize/HeadlinePagination.tsx
index 312b7b7039e..9ac658d8d6b 100644
--- a/libs/sdk-ui-vis-commons/src/compactSize/HeadlinePagination.tsx
+++ b/libs/sdk-ui-vis-commons/src/compactSize/HeadlinePagination.tsx
@@ -1,4 +1,4 @@
-// (C) 2021 GoodData Corporation
+// (C) 2021-2025 GoodData Corporation
 import React, { useState } from "react";
 
 import { HeadlinePaginationRenderer } from "./HeadlinePaginationRenderer.js";
@@ -9,6 +9,10 @@ import { HeadlinePaginationRenderer } from "./HeadlinePaginationRenderer.js";
 export interface IHeadlinePaginationProps {
     renderSecondaryItem: () => JSX.Element;
     renderTertiaryItem: () => JSX.Element;
+    accessibilityConfig?: {
+        nextAriaLabel?: string;
+        previousAriaLabel?: string;
+    };
 }
 
 /**
@@ -17,7 +21,9 @@ export interface IHeadlinePaginationProps {
 export const HeadlinePagination: React.FC<IHeadlinePaginationProps> = ({
     renderSecondaryItem,
     renderTertiaryItem,
+    accessibilityConfig,
 }) => {
+    const { nextAriaLabel, previousAriaLabel } = accessibilityConfig ?? {};
     const [item, setItem] = useState<number>(1);
 
     const showNextItem = (): void => setItem(item + 1);
@@ -26,7 +32,15 @@ export const HeadlinePagination: React.FC<IHeadlinePaginationProps> = ({
 
     return (
         <>
-            <HeadlinePaginationRenderer item={item} showNextItem={showNextItem} showPrevItem={showPrevItem} />
+            <HeadlinePaginationRenderer
+                item={item}
+                showNextItem={showNextItem}
+                showPrevItem={showPrevItem}
+                accessibilityConfig={{
+                    nextAriaLabel,
+                    previousAriaLabel,
+                }}
+            />
             {item === 1 && renderSecondaryItem()}
             {item === 2 && renderTertiaryItem()}
         </>
diff --git a/libs/sdk-ui-vis-commons/src/compactSize/HeadlinePaginationRenderer.tsx b/libs/sdk-ui-vis-commons/src/compactSize/HeadlinePaginationRenderer.tsx
index a36c756c508..c4a3bc38b2d 100644
--- a/libs/sdk-ui-vis-commons/src/compactSize/HeadlinePaginationRenderer.tsx
+++ b/libs/sdk-ui-vis-commons/src/compactSize/HeadlinePaginationRenderer.tsx
@@ -1,30 +1,43 @@
-// (C) 2021 GoodData Corporation
+// (C) 2021-2025 GoodData Corporation
 import React from "react";
 
 interface IHeadlinePaginationProps {
     item: number;
+    accessibilityConfig?: {
+        nextAriaLabel?: string;
+        previousAriaLabel?: string;
+    };
     showPrevItem: () => void;
     showNextItem: () => void;
 }
 
 export const HeadlinePaginationRenderer: React.FC<IHeadlinePaginationProps> = ({
     item,
+    accessibilityConfig,
     showPrevItem,
     showNextItem,
 }) => {
+    const { nextAriaLabel, previousAriaLabel } = accessibilityConfig ?? {};
     const commonClassNames = "gd-button-link gd-button-icon-only pagination";
 
+    const isFirstItemDisabled = item === 1;
+    const isSecondItemDisabled = item === 2;
+
     return (
         <div className="headline-pagination">
             <button
                 className={`${commonClassNames} first-item gd-icon-chevron-left`}
                 onClick={showPrevItem}
-                disabled={item === 1}
+                disabled={isFirstItemDisabled}
+                aria-disabled={isFirstItemDisabled}
+                aria-label={previousAriaLabel}
             />
             <button
                 className={`${commonClassNames} second-item gd-icon-chevron-right`}
                 onClick={showNextItem}
-                disabled={item === 2}
+                disabled={isSecondItemDisabled}
+                aria-disabled={isSecondItemDisabled}
+                aria-label={nextAriaLabel}
             />
         </div>
     );
diff --git a/libs/sdk-ui/src/base/localization/bundles/en-US.json b/libs/sdk-ui/src/base/localization/bundles/en-US.json
index 105996df6cc..6b0e1c51eee 100644
--- a/libs/sdk-ui/src/base/localization/bundles/en-US.json
+++ b/libs/sdk-ui/src/base/localization/bundles/en-US.json
@@ -272,6 +272,16 @@
         "comment": "The label will be used when the arithmetic operation is `difference` and primary value is equals secondary value.",
         "limit": 0
     },
+    "visualizations.headline.pagination.next.metricLabel": {
+        "value": "Show next comparative metric",
+        "comment": "",
+        "limit": 0
+    },
+    "visualizations.headline.pagination.previous.metricLabel": {
+        "value": "Show previous comparative metric",
+        "comment": "",
+        "limit": 0
+    },
     "visualization.numericValues.k": {
         "value": "k",
         "comment": "Character 'k' stands for metric prefix kilo (1.000).",


Reviews:
user: login: ivan-nejezchleb
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T09:59:39Z
user: login: NestorEncinas
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T10:13:56Z
user: login: ivan-nejezchleb
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T10:17:42Z

Review comments:
diff_hunk: @@ -36,6 +39,12 @@ const CompareSection: React.FC<ICompareSectionProps> = ({ secondaryItem, tertiar
                     <CompareSectionItem dataItem={secondaryItem} titleRef={secondaryItemTitleWrapperRef} />
                 )}
                 renderTertiaryItem={() => <CompareSectionItem dataItem={tertiaryItem} />}
+                nextAriaLabel={intl.formatMessage({
path: libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/CompareSection.tsx
user: login: ivan-nejezchleb
body: group it to accessibilityConfig
created_at: 2025-05-05T09:59:39Z
author_association: CONTRIBUTOR
diff_hunk: @@ -36,6 +39,12 @@ const CompareSection: React.FC<ICompareSectionProps> = ({ secondaryItem, tertiar
                     <CompareSectionItem dataItem={secondaryItem} titleRef={secondaryItemTitleWrapperRef} />
                 )}
                 renderTertiaryItem={() => <CompareSectionItem dataItem={tertiaryItem} />}
+                nextAriaLabel={intl.formatMessage({
path: libs/sdk-ui-charts/src/charts/headline/internal/headlines/baseHeadline/CompareSection.tsx
user: login: NestorEncinas
body: Updated.
created_at: 2025-05-05T10:13:56Z
author_association: CONTRIBUTOR

PR comments:
user: login: NestorEncinas
created_at: 2025-05-02T11:35:54Z
body: extended-test --integrated
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-02T11:36:25Z
body: "extended-test --integrated" started. Check the progress [here](https://github.com/gooddata/gooddata-ui-sdk/actions/runs/14794446694).
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-02T11:43:26Z
body: ✅ "extended-test --integrated" finished with result **success**. Check the results [here](https://github.com/gooddata/gooddata-ui-sdk/actions/runs/14794446694).
author_association: NONE
user: login: NestorEncinas
created_at: 2025-05-02T12:05:09Z
body: extended-test --isolated
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-02T12:05:38Z
body: "extended-test --isolated" started. Check the progress [here](https://github.com/gooddata/gooddata-ui-sdk/actions/runs/14794841506).
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-02T12:13:24Z
body: ✅ "extended-test --isolated" finished with result **success**. Check the results [here](https://github.com/gooddata/gooddata-ui-sdk/actions/runs/14794841506).
author_association: NONE
user: login: NestorEncinas
created_at: 2025-05-02T12:21:02Z
body: extended-test --backstop
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-02T12:21:29Z
body: "extended-test --backstop" started. Check the progress [here](https://github.com/gooddata/gooddata-ui-sdk/actions/runs/14795084764).
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-02T12:50:24Z
body: ❌ "extended-test --backstop" finished with result **failure**. Check the results [here](https://github.com/gooddata/gooddata-ui-sdk/actions/runs/14795084764).
author_association: NONE
user: login: NestorEncinas
created_at: 2025-05-05T07:29:08Z
body: extended-test --backstop
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-05T07:29:40Z
body: "extended-test --backstop" started. Check the progress [here](https://github.com/gooddata/gooddata-ui-sdk/actions/runs/14831308248).
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-05T07:59:29Z
body: ❌ "extended-test --backstop" finished with result **failure**. Check the results [here](https://github.com/gooddata/gooddata-ui-sdk/actions/runs/14831308248).
author_association: NONE