From 3b056c395c5ff87044ea989a3b737022cea20509 Mon Sep 17 00:00:00 2001
From: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com>
Date: Thu, 14 Nov 2024 18:44:30 +0100
Subject: [PATCH] fix(xy): line annotation marker aria label fix (#2558)

---
 packages/charts/api/charts.api.md                             | 1 +
 .../xy_chart/renderer/dom/annotations/line_marker.tsx         | 3 +++
 packages/charts/src/chart_types/xy_chart/utils/specs.ts       | 4 ++++
 3 files changed, 8 insertions(+)

diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
index 8f1a11ae7f..4477ad87c0 100644
--- a/packages/charts/api/charts.api.md
+++ b/packages/charts/api/charts.api.md
@@ -1927,6 +1927,7 @@ export const LineAnnotation: <D = any>(props: SFProps<LineAnnotationSpec<D>, key
 
 // @public
 export interface LineAnnotationDatum<D = any> {
+    ariaLabel?: string;
     dataValue: D;
     details?: string;
     header?: string;
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/line_marker.tsx b/packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/line_marker.tsx
index 156e6e5ab7..867c62329b 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/line_marker.tsx
+++ b/packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/line_marker.tsx
@@ -119,6 +119,8 @@ export function LineMarker({
 
   void popper?.current?.update?.();
 
+  const ariaLabel = datum.ariaLabel ?? datum.details ?? datum.header ?? `line annotation ${datum.dataValue}`;
+
   // want it to be tabbable if interactive if there is a click handler
   return clickable ? (
     <button
@@ -135,6 +137,7 @@ export function LineMarker({
       onClick={onDOMElementClick}
       style={{ ...markerStyle, ...transform }}
       type="button"
+      aria-label={ariaLabel}
     >
       <div ref={iconRef} className="echAnnotation__icon">
         {renderWithProps(icon, datum)}
diff --git a/packages/charts/src/chart_types/xy_chart/utils/specs.ts b/packages/charts/src/chart_types/xy_chart/utils/specs.ts
index 56d9e2ca2e..cad8c1c19b 100644
--- a/packages/charts/src/chart_types/xy_chart/utils/specs.ts
+++ b/packages/charts/src/chart_types/xy_chart/utils/specs.ts
@@ -823,6 +823,10 @@ export interface LineAnnotationDatum<D = any> {
    * An header of the annotation. If undefined, than the formatted dataValue will be used
    */
   header?: string;
+  /**
+   * Aria label for the annotation
+   */
+  ariaLabel?: string;
 }
 
 /** @public */