Skip to content

Commit e9950e0

Browse files
walterraclaude
walterra
and
claude
committed
fix(a11y): move screen reader elements outside canvas and add specific test assertions
- Fix invalid HTML structure by moving ScreenReaderSummary components outside canvas elements in Goal and Heatmap charts - Update e2e test helpers to handle multiple screen reader elements more robustly - Replace generic accessibility content checks with specific expected text assertions in all a11y tests - Improve waitForA11yContent to use proper Playwright locator patterns 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 7c8052d commit e9950e0

File tree

9 files changed

+43
-132
lines changed

9 files changed

+43
-132
lines changed

‎e2e/page_objects/common.ts‎

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -621,6 +621,7 @@ export class CommonPage {
621621
const texts = await Promise.all(Array.from({ length: count }, (_, i) => elements.nth(i).textContent()));
622622

623623
return texts.filter((text): text is string => text !== null).join(' ');
624+
<<<<<<< HEAD
624625
};
625626

626627
/**
@@ -637,6 +638,8 @@ export class CommonPage {
637638

638639
const summaryText = await this.getA11ySummaryText(page)();
639640
expect(summaryText).toBe(expectedSummary);
641+
=======
642+
>>>>>>> a0fd511cf0 (fix(a11y): move screen reader elements outside canvas and add specific test assertions)
640643
};
641644

642645
/**
@@ -646,34 +649,6 @@ export class CommonPage {
646649
const descElement = await page.locator('.echScreenReaderOnly p').first().waitFor({ state: 'attached' });
647650
return (await descElement.textContent()) || '';
648651
};
649-
650-
/**
651-
* Assert accessibility summary matches expected pattern
652-
*/
653-
expectA11ySummaryToMatch =
654-
(page: Page) =>
655-
async (expectedPattern: string | RegExp): Promise<void> => {
656-
const summaryText = await this.getA11ySummaryText(page)();
657-
if (typeof expectedPattern === 'string') {
658-
expect(summaryText).toBe(expectedPattern);
659-
} else {
660-
expect(summaryText).toMatch(expectedPattern);
661-
}
662-
};
663-
664-
/**
665-
* Assert accessibility description matches expected pattern
666-
*/
667-
expectA11yDescriptionToMatch =
668-
(page: Page) =>
669-
async (expectedPattern: string | RegExp): Promise<void> => {
670-
const descriptionText = await this.getA11yDescription(page)();
671-
if (typeof expectedPattern === 'string') {
672-
expect(descriptionText).toBe(expectedPattern);
673-
} else {
674-
expect(descriptionText).toMatch(expectedPattern);
675-
}
676-
};
677652
}
678653

679654
function getSnapshotOptions(options?: ScreenshotDOMElementOptions) {

‎e2e/tests/a11y/edge_cases_a11y.test.ts‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,20 @@ import { test, expect } from '@playwright/test';
1111
import { common } from '../../page_objects/common';
1212

1313
test.describe('Edge Cases Accessibility', () => {
14-
test('should handle empty data gracefully', async ({ page }) => {
14+
test('no screen reader summary for empty charts', async ({ page }) => {
1515
const url = 'http://localhost:9001/?path=/story/test-cases--no-series';
1616
await common.loadElementFromURL(page)(url, '.echChart');
1717

1818
// For empty charts, accessibility content may not exist, so we check if the chart element exists
1919
const chartElement = page.locator('.echChart').first();
2020
await expect(chartElement).toBeVisible();
21-
22-
// Check if accessibility content exists, if not, that's expected for empty charts
21+
const chartText = await chartElement.textContent();
22+
expect(chartText).toBe('No Results');
2323
const a11yExists = await page.locator('.echScreenReaderOnly').count();
24-
if (a11yExists === 0) {
25-
// Empty chart doesn't have accessibility content, which is expected
26-
expect(true).toBe(true);
27-
} else {
28-
const summaryText = await common.getA11ySummaryText(page)();
29-
expect(summaryText).toBeTruthy();
30-
}
24+
expect(a11yExists).toBe(0);
3125
});
3226

33-
test('should handle single data point', async ({ page }) => {
27+
test('should handle bar chart with empty data points', async ({ page }) => {
3428
const url = 'http://localhost:9001/?path=/story/bar-chart--with-linear-x-axis';
3529
await common.loadElementFromURL(page)(url, '.echChart');
3630
await common.waitForA11yContent(page)();

‎e2e/tests/a11y/goal_chart_a11y.test.ts‎

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,12 @@ test.describe('Goal Chart Accessibility', () => {
1717

1818
// Wait for the chart to load
1919
await page.waitForSelector('.echChart', { timeout: 5000 });
20+
await common.waitForA11yContent(page)();
2021

21-
// Check if accessibility content exists (regardless of visibility)
22-
const a11yElements = page.locator('.echScreenReaderOnly');
23-
const count = await a11yElements.count();
24-
25-
if (count > 0) {
26-
const summaryText = await common.getA11ySummaryText(page)();
27-
expect(summaryText).toBeTruthy();
28-
} else {
29-
// If no accessibility content, test that the chart loaded
30-
const chartElement = page.locator('.echChart').first();
31-
await expect(chartElement).toBeVisible();
32-
}
22+
const summaryText = await common.getA11ySummaryText(page)();
23+
expect(summaryText).toBe(
24+
'Revenue 2020 YTD (thousand USD) Goal chart. Revenue 2020 YTD (thousand USD). Minimum: 0, Maximum: 300, Target: 260, Value: 280.',
25+
);
3326
});
3427

3528
test('should generate correct a11y summary for gauge chart', async ({ page }) => {
@@ -38,18 +31,11 @@ test.describe('Goal Chart Accessibility', () => {
3831

3932
// Wait for the chart to load
4033
await page.waitForSelector('.echChart', { timeout: 5000 });
34+
await common.waitForA11yContent(page)();
4135

42-
// Check if accessibility content exists (regardless of visibility)
43-
const a11yElements = page.locator('.echScreenReaderOnly');
44-
const count = await a11yElements.count();
45-
46-
if (count > 0) {
47-
const summaryText = await common.getA11ySummaryText(page)();
48-
expect(summaryText).toBeTruthy();
49-
} else {
50-
// If no accessibility content, test that the chart loaded
51-
const chartElement = page.locator('.echChart').first();
52-
await expect(chartElement).toBeVisible();
53-
}
36+
const summaryText = await common.getA11ySummaryText(page)();
37+
expect(summaryText).toBe(
38+
'Revenue 2020 YTD (thousand USD) Goal chart. Revenue 2020 YTD (thousand USD). Minimum: 0, Maximum: 300, Target: 260, Value: 170.',
39+
);
5440
});
5541
});

‎e2e/tests/a11y/heatmap_chart_a11y.test.ts‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,9 @@ test.describe('Heatmap Chart Accessibility', () => {
1717

1818
// Wait for the chart to load
1919
await page.waitForSelector('.echChart', { timeout: 5000 });
20+
await common.waitForA11yContent(page)();
2021

21-
// Check if accessibility content exists (regardless of visibility)
22-
const a11yElements = page.locator('.echScreenReaderOnly');
23-
const count = await a11yElements.count();
24-
25-
if (count > 0) {
26-
const summaryText = await common.getA11ySummaryText(page)();
27-
expect(summaryText).toBeTruthy();
28-
} else {
29-
// If no accessibility content, test that the chart loaded
30-
const chartElement = page.locator('.echChart').first();
31-
await expect(chartElement).toBeVisible();
32-
}
22+
const summaryText = await common.getA11ySummaryText(page)();
23+
expect(summaryText).toBe('142 data points.');
3324
});
3425
});

‎e2e/tests/a11y/metric_chart_a11y.test.ts‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,12 @@ test.describe('Metric Chart Accessibility', () => {
1515
const url = 'http://localhost:9001/?path=/story/metric-alpha--basic';
1616
await common.loadElementFromURL(page)(url, '.echChart');
1717

18-
// Wait for the chart to load
19-
await page.waitForSelector('.echChart', { timeout: 5000 });
18+
const sparklines = await page.locator('.echSingleMetricSparkline').elementHandles();
19+
expect(sparklines.length).toBe(1);
2020

21-
// Check if accessibility content exists (regardless of visibility)
22-
const a11yElements = page.locator('.echScreenReaderOnly');
23-
const count = await a11yElements.count();
21+
await common.waitForA11yContent(page)();
2422

25-
if (count > 0) {
26-
const summaryText = await common.getA11ySummaryText(page)();
27-
expect(summaryText).toBeTruthy();
28-
} else {
29-
// If no accessibility content, test that the chart loaded
30-
const chartElement = page.locator('.echChart').first();
31-
await expect(chartElement).toBeVisible();
32-
}
23+
const summaryText = await common.getA11ySummaryText(page)();
24+
expect(summaryText).toBe('The Cluster CPU Usage trend The trend shows a peak of CPU usage in the last 5 minutes');
3325
});
3426
});

‎e2e/tests/a11y/pie_chart_a11y.test.ts‎

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,12 @@ test.describe('Pie Chart Accessibility', () => {
1818
// Wait for the chart to load
1919
await page.waitForSelector('.echChart', { timeout: 5000 });
2020

21-
// Check if accessibility content exists (regardless of visibility)
22-
const a11yElements = page.locator('.echScreenReaderOnly');
23-
const count = await a11yElements.count();
24-
25-
if (count > 0) {
26-
const summaryText = await common.getA11ySummaryText(page)();
27-
expect(summaryText).toBeTruthy();
28-
} else {
29-
// If no accessibility content, test that the chart loaded
30-
const chartElement = page.locator('.echChart').first();
31-
await expect(chartElement).toBeVisible();
32-
}
21+
await common.waitForA11yContent(page)();
22+
23+
const summaryText = await common.getA11ySummaryText(page)();
24+
expect(summaryText).toBe(
25+
'Sunburst chart. 10 data points. The table fully represents the dataset of 10 data pointsLabelValuePercentageMineral fuels, lubricants and related materials$1,930 Bn22%Chemicals and related products$848 Bn10%Miscellaneous manufactured articles$817 Bn9%Manufactured goods classified chiefly by material$745 Bn9%Commodities and transactions not classified elsewhere$451 Bn5%Crude materials, inedible, except fuels$394 Bn5%Food and live animals$353 Bn4%Beverages and tobacco$54 Bn1%Animal and vegetable oils, fats and waxes$36 Bn0%Machinery and transport equipment$3,110 Bn36%',
26+
);
3327
});
3428

3529
test('should generate correct a11y summary for donut chart', async ({ page }) => {
@@ -39,17 +33,11 @@ test.describe('Pie Chart Accessibility', () => {
3933
// Wait for the chart to load
4034
await page.waitForSelector('.echChart', { timeout: 5000 });
4135

42-
// Check if accessibility content exists (regardless of visibility)
43-
const a11yElements = page.locator('.echScreenReaderOnly');
44-
const count = await a11yElements.count();
45-
46-
if (count > 0) {
47-
const summaryText = await common.getA11ySummaryText(page)();
48-
expect(summaryText).toBeTruthy();
49-
} else {
50-
// If no accessibility content, test that the chart loaded
51-
const chartElement = page.locator('.echChart').first();
52-
await expect(chartElement).toBeVisible();
53-
}
36+
await common.waitForA11yContent(page)();
37+
38+
const summaryText = await common.getA11ySummaryText(page)();
39+
expect(summaryText).toBe(
40+
'Sunburst chart. 10 data points. The table fully represents the dataset of 10 data pointsLabelValuePercentageMineral fuels, lubricants and related materials$1,930 Bn22%Chemicals and related products$848 Bn10%Miscellaneous manufactured articles$817 Bn9%Manufactured goods classified chiefly by material$745 Bn9%Commodities and transactions not classified elsewhere$451 Bn5%Crude materials, inedible, except fuels$394 Bn5%Food and live animals$353 Bn4%Beverages and tobacco$54 Bn1%Animal and vegetable oils, fats and waxes$36 Bn0%Machinery and transport equipment$3,110 Bn36%',
41+
);
5442
});
5543
});

‎e2e/tests/bar_stories.test.ts‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { test } from '@playwright/test';
1111
import type { DisplayValueStyleAlignment } from '../constants';
1212
import { HorizontalAlignment, VerticalAlignment } from '../constants';
1313
import { eachRotation, pwEach } from '../helpers';
14-
import { A11Y_PATTERNS } from '../helpers/accessibility';
1514
import { common } from '../page_objects';
1615

1716
test.describe('Bar series stories', () => {
@@ -20,10 +19,6 @@ test.describe('Bar series stories', () => {
2019
async ({ page, rotation }) => {
2120
const url = `http://localhost:9001/?path=/story/interactions--brush-selection-tool-on-histogram-time-charts&knob-debug=&knob-chartRotation=${rotation}`;
2221
await common.expectChartAtUrlToMatchScreenshot(page)(url);
23-
24-
// Add a11y assertions
25-
await common.waitForA11yContent(page)();
26-
await common.expectA11ySummaryToMatch(page)(A11Y_PATTERNS.barChart);
2722
},
2823
(r) => `Should render correct axis - rotation ${r}`,
2924
);
@@ -34,21 +29,13 @@ test.describe('Bar series stories', () => {
3429
const url =
3530
'http://localhost:9001/?path=/story/bar-chart--test-switch-ordinal-linear-axis&knob-scaleType=ordinal';
3631
await common.expectChartAtUrlToMatchScreenshot(page)(url);
37-
38-
// Add a11y assertions
39-
await common.waitForA11yContent(page)();
40-
await common.expectA11ySummaryToMatch(page)(A11Y_PATTERNS.barChart);
4132
});
4233
});
4334

4435
test.describe('[test] discover', () => {
4536
test('using no custom minInterval', async ({ page }) => {
4637
const url = 'http://localhost:9001/?path=/story/bar-chart--test-discover&knob-use custom minInterval of 30s=';
4738
await common.expectChartAtUrlToMatchScreenshot(page)(url);
48-
49-
// Add a11y assertions
50-
await common.waitForA11yContent(page)();
51-
await common.expectA11ySummaryToMatch(page)(A11Y_PATTERNS.barChart);
5239
});
5340
});
5441

‎packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -139,10 +139,9 @@ class Component extends React.Component<Props> {
139139
}}
140140
// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
141141
role="presentation"
142-
>
143-
<ScreenReaderSummary />
144-
<GoalSemanticDescription bandLabels={bandLabels} firstValue={firstValue} {...a11ySettings} />
145-
</canvas>
142+
/>
143+
<ScreenReaderSummary />
144+
<GoalSemanticDescription bandLabels={bandLabels} firstValue={firstValue} {...a11ySettings} />
146145
</figure>
147146
);
148147
}

‎packages/charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,9 +136,8 @@ class Component extends React.Component<Props> {
136136
}}
137137
// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
138138
role="presentation"
139-
>
140-
<ScreenReaderSummary />
141-
</canvas>
139+
/>
140+
<ScreenReaderSummary />
142141
</figure>
143142
);
144143
}

0 commit comments

Comments
 (0)