Skip to content

Commit 9da5a51

Browse files
PixselvePixselve
committed
a11y: adds aria description to markers
1 parent 61377c6 commit 9da5a51

File tree

15 files changed

+139
-138
lines changed

15 files changed

+139
-138
lines changed

‎package-lock.json‎

Lines changed: 10 additions & 66 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pages/03-core/core-legend.page.tsx‎

Lines changed: 3 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,6 @@ import { PageSettingsForm, useChartSettings } from "../common/page-settings";
1919
import { Page } from "../common/templates";
2020
import pseudoRandom from "../utils/pseudo-random";
2121

22-
const i18nStrings = {
23-
seriesStatusWarningAriaLabel: "warning",
24-
};
25-
2622
function randomInt(min: number, max: number) {
2723
return min + Math.floor(pseudoRandom() * (max - min));
2824
}
@@ -109,45 +105,21 @@ const initialLegendItems: readonly LegendItem[] = [
109105
{
110106
id: "CPU Utilization",
111107
name: "CPU Utilization",
112-
marker: (
113-
<ChartSeriesMarker
114-
status={"default"}
115-
i18nStrings={i18nStrings}
116-
color={colors[0]}
117-
type={"square"}
118-
visible={true}
119-
/>
120-
),
108+
marker: <ChartSeriesMarker status={"default"} color={colors[0]} type={"square"} visible={true} />,
121109
visible: true,
122110
highlighted: false,
123111
},
124112
{
125113
id: "Memory Usage",
126114
name: "Memory Usage",
127-
marker: (
128-
<ChartSeriesMarker
129-
status={"default"}
130-
i18nStrings={i18nStrings}
131-
color={colors[1]}
132-
type={"square"}
133-
visible={true}
134-
/>
135-
),
115+
marker: <ChartSeriesMarker status={"default"} color={colors[1]} type={"square"} visible={true} />,
136116
visible: true,
137117
highlighted: false,
138118
},
139119
{
140120
id: "Storage Capacity",
141121
name: "Storage Capacity",
142-
marker: (
143-
<ChartSeriesMarker
144-
status={"default"}
145-
i18nStrings={i18nStrings}
146-
color={colors[2]}
147-
type={"square"}
148-
visible={true}
149-
/>
150-
),
122+
marker: <ChartSeriesMarker status={"default"} color={colors[2]} type={"square"} visible={true} />,
151123
visible: true,
152124
highlighted: false,
153125
},
@@ -211,7 +183,6 @@ export default function () {
211183
marker: (
212184
<ChartSeriesMarker
213185
status={"default"}
214-
i18nStrings={i18nStrings}
215186
color={colors[index % colors.length]}
216187
type={"square"}
217188
visible={visible}

‎pages/03-core/core-line-chart.page.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,10 @@ export default function () {
106106
<CoreChart
107107
{...chartProps.core}
108108
highcharts={Highcharts}
109+
i18nStrings={{
110+
chartItemStatusWarning: "warning",
111+
chartMarkerAriaDescriptionTemplate: "Series with status {status}",
112+
}}
109113
options={{
110114
lang: {
111115
accessibility: {

‎pages/03-core/events-sync-demo.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export default function LegendEventsDemo() {
113113
const legendItems: LegendItem[] = series.map((s) => ({
114114
id: s.name,
115115
name: s.name,
116-
marker: <ChartSeriesMarker color={s.color} type="line" />,
116+
marker: <ChartSeriesMarker color={s.color} type="line" status="default" />,
117117
visible: visibleItems.has(s.name),
118118
highlighted: highlightedItem === s.name,
119119
}));

‎pages/03-core/marker-permutations.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const permutationsForColors = [
5353
"triangle-down",
5454
],
5555
color: [color],
56-
i18nStrings: [{ seriesStatusWarningAriaLabel: "warning" }],
56+
markerAriaDescription: ["aria"],
5757
status: ["default"],
5858
},
5959
]),

‎src/core/__tests__/chart-core-utils.test.tsx‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -263,23 +263,43 @@ describe("CoreChart: utils", () => {
263263
scenario: "getItemProps is undefined",
264264
getItemProps: undefined,
265265
id: "item1",
266-
expected: { status: "default" },
266+
expected: { status: "default", markerAriaDescription: undefined },
267267
},
268268
{
269269
scenario: "getItemProps returns empty object",
270270
getItemProps: () => ({}),
271271
id: "item1",
272-
expected: { status: "default" },
272+
expected: { status: "default", markerAriaDescription: undefined },
273273
},
274274
{
275275
scenario: "getItemProps returns status",
276-
getItemProps: () => ({ status: "active" as const }),
276+
getItemProps: () => ({ status: "warning" as const }),
277277
id: "item1",
278-
expected: { status: "active" },
278+
expected: { status: "warning", markerAriaDescription: undefined },
279279
},
280-
])("$scenario", ({ getItemProps, id, expected }) => {
280+
{
281+
scenario: "getItemProps returns status and contains i18n",
282+
getItemProps: () => ({ status: "warning" as const }),
283+
id: "item1",
284+
expected: { status: "warning", markerAriaDescription: "hello hi" },
285+
options: {
286+
markerAriaDescriptionTemplate: "hello {status}",
287+
getI18nFromStatus: (): string => "hi",
288+
},
289+
},
290+
{
291+
scenario: "getItemProps returns status and contains i18n - getI18nFromStatus returns undefined",
292+
getItemProps: () => ({ status: "warning" as const }),
293+
id: "item1",
294+
expected: { status: "warning", markerAriaDescription: undefined },
295+
options: {
296+
markerAriaDescriptionTemplate: "hello {status}",
297+
getI18nFromStatus: (): undefined => undefined,
298+
},
299+
},
300+
])("$scenario", ({ getItemProps, id, expected, options }) => {
281301
it("should return correct default values", () => {
282-
const result = fillDefaultsForGetItemProps(getItemProps);
302+
const result = fillDefaultsForGetItemProps(getItemProps, options);
283303
expect(result(id)).toEqual(expected);
284304
});
285305
});

‎src/core/chart-api/chart-extra-legend.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,12 @@ export class ChartExtraLegend extends AsyncStore<ReactiveLegendState> {
8585
private initLegend = () => {
8686
const prevState = this.get().items.reduce((map, item) => map.set(item.id, item), new Map<string, LegendItem>());
8787
const itemSpecs = getChartLegendItems(this.context.chart(), this.context.settings.getItemProps);
88-
const legendItems = itemSpecs.map(({ id, name, color, markerType, visible, status, isSecondary }) => {
89-
const marker = this.renderMarker(markerType, color, visible, status);
90-
return { id, name, marker, visible, isSecondary, highlighted: prevState.get(id)?.highlighted ?? false };
91-
});
88+
const legendItems = itemSpecs.map(
89+
({ id, name, color, markerType, visible, status, isSecondary, markerAriaDescription }) => {
90+
const marker = this.renderMarker(markerType, color, visible, status, markerAriaDescription);
91+
return { id, name, marker, visible, isSecondary, highlighted: prevState.get(id)?.highlighted ?? false };
92+
},
93+
);
9294
this.updateLegendItems(legendItems);
9395
};
9496

@@ -115,6 +117,7 @@ export class ChartExtraLegend extends AsyncStore<ReactiveLegendState> {
115117
color: string,
116118
visible = true,
117119
status: ChartSeriesMarkerStatus,
120+
markerAriaDescription?: string,
118121
): React.ReactNode {
119122
const key = `${type}:${color}:${visible}:${status}`;
120123
const marker = this.markersCache.get(key) ?? (
@@ -123,7 +126,7 @@ export class ChartExtraLegend extends AsyncStore<ReactiveLegendState> {
123126
color={color}
124127
visible={visible}
125128
status={status}
126-
i18nStrings={this.context.settings.labels}
129+
markerAriaDescription={markerAriaDescription}
127130
/>
128131
);
129132
this.markersCache.set(key, marker);

‎src/core/chart-core.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { VerticalAxisTitle } from "./components/core-vertical-axis-title";
3030
import { getFormatter } from "./formatters";
3131
import { useChartI18n } from "./i18n-utils";
3232
import { CoreChartProps } from "./interfaces";
33-
import { fillDefaultsForGetItemProps } from "./utils";
33+
import { fillDefaultsForGetItemProps, i18nStatus } from "./utils";
3434
import { getLegendsProps, getPointAccessibleDescription } from "./utils";
3535

3636
import styles from "./styles.css.js";
@@ -80,7 +80,10 @@ export function InternalCoreChart({
8080
tooltipEnabled: tooltipOptions?.enabled !== false,
8181
keyboardNavigationEnabled: keyboardNavigation,
8282
labels,
83-
getItemProps: fillDefaultsForGetItemProps(getItemProps),
83+
getItemProps: fillDefaultsForGetItemProps(getItemProps, {
84+
markerAriaDescriptionTemplate: i18nStrings?.chartMarkerAriaDescriptionTemplate,
85+
getI18nFromStatus: i18nStatus(i18nStrings),
86+
}),
8487
};
8588
const handlers = { onHighlight, onClearHighlight, onVisibleItemsChange };
8689
const state = { visibleItems };

‎src/core/components/core-tooltip.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -161,13 +161,16 @@ function getTooltipContentCartesian(
161161
// By design, every point of the group has the same x value.
162162
const x = group[0].x;
163163
const chart = group[0].series.chart;
164-
const getSeriesMarker = (series: Highcharts.Series) =>
165-
api.renderMarker(
164+
const getSeriesMarker = (series: Highcharts.Series) => {
165+
const itemProps = api.context.settings.getItemProps(getSeriesId(series));
166+
return api.renderMarker(
166167
getSeriesMarkerType(series),
167168
getSeriesColor(series),
168169
true,
169-
api.context.settings.getItemProps(getSeriesId(series)).status,
170+
itemProps.status,
171+
itemProps.markerAriaDescription,
170172
);
173+
};
171174
const matchedItems = findTooltipSeriesItems(getChartSeries(chart.series), group, seriesSorting);
172175
const detailItems: ChartSeriesDetailItem[] = matchedItems.map((item) => {
173176
const valueFormatter = getFormatter(item.point.series.yAxis);
@@ -185,6 +188,7 @@ function getTooltipContentCartesian(
185188
subItems: customContent?.subItems,
186189
expandableId: customContent?.expandable ? item.point.series.name : undefined,
187190
highlighted: item.point.x === point?.x && item.point.y === point?.y,
191+
itemAriaLabel: "awd",
188192
description:
189193
customContent?.description === undefined && item.errorRanges.length ? (
190194
<>
@@ -253,6 +257,7 @@ function getTooltipContentPie(
253257
getPointColor(point),
254258
true,
255259
api.context.settings.getItemProps(getPointId(point)).status,
260+
api.context.settings.getItemProps(getPointId(point)).markerAriaDescription,
256261
)}
257262
<Box variant="span" fontWeight="bold">
258263
{point.name}

‎src/core/i18n-utils.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33

44
import { useInternalI18n } from "@cloudscape-design/components/internal/do-not-use/i18n";
55

6-
import { ChartSeriesMarkerI18n } from "../internal/components/series-marker/interfaces";
76
import { CoreChartProps } from "./interfaces";
87

9-
export interface ChartLabels extends ChartSeriesMarkerI18n {
8+
export interface ChartLabels {
109
chartLabel?: string;
1110
chartDescription?: string;
1211
chartContainerLabel?: string;

0 commit comments

Comments
 (0)