fix(xy): line annotation marker aria label fix (#2558)

elastic · Nov 14, 2024 · 3b056c3 · 3b056c3
1 parent b283f92
commit 3b056c3
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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 */