Skip to content

Commit 3b056c3

Browse files
authored
fix(xy): line annotation marker aria label fix (#2558)
1 parent b283f92 commit 3b056c3

File tree

3 files changed

+8
-0
lines changed

3 files changed

+8
-0
lines changed

packages/charts/api/charts.api.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1927,6 +1927,7 @@ export const LineAnnotation: <D = any>(props: SFProps<LineAnnotationSpec<D>, key
19271927

19281928
// @public
19291929
export interface LineAnnotationDatum<D = any> {
1930+
ariaLabel?: string;
19301931
dataValue: D;
19311932
details?: string;
19321933
header?: string;

packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/line_marker.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,8 @@ export function LineMarker({
119119

120120
void popper?.current?.update?.();
121121

122+
const ariaLabel = datum.ariaLabel ?? datum.details ?? datum.header ?? `line annotation ${datum.dataValue}`;
123+
122124
// want it to be tabbable if interactive if there is a click handler
123125
return clickable ? (
124126
<button
@@ -135,6 +137,7 @@ export function LineMarker({
135137
onClick={onDOMElementClick}
136138
style={{ ...markerStyle, ...transform }}
137139
type="button"
140+
aria-label={ariaLabel}
138141
>
139142
<div ref={iconRef} className="echAnnotation__icon">
140143
{renderWithProps(icon, datum)}

packages/charts/src/chart_types/xy_chart/utils/specs.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -823,6 +823,10 @@ export interface LineAnnotationDatum<D = any> {
823823
* An header of the annotation. If undefined, than the formatted dataValue will be used
824824
*/
825825
header?: string;
826+
/**
827+
* Aria label for the annotation
828+
*/
829+
ariaLabel?: string;
826830
}
827831

828832
/** @public */

0 commit comments

Comments
 (0)