feat: Announce selected state of chart legend button by screen reader (…

…#602)
cloudscape-design · Dec 29, 2022 · bf862c9 · bf862c9
1 parent fb861ef
commit bf862c9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/internal/components/chart-legend/__tests__/chart-legend.test.tsx b/src/internal/components/chart-legend/__tests__/chart-legend.test.tsx
@@ -115,4 +115,14 @@ describe('Chart legend', () => {
     legend.pressLeft();
     expect(legend.findFocusedLabel()).toEqual(series[2].label);
   });
+
+  test('should set aria-pressed as true when the button is selected', () => {
+    const legend = renderChartLegend();
+
+    legend.focus();
+    legend.pressLeft();
+    expect(legend.wrapper.find('[role="button"]')!.getElement().getAttribute('aria-pressed')).toBe('true');
+    legend.pressLeft();
+    expect(legend.wrapper.find('[role="button"]')!.getElement().getAttribute('aria-pressed')).toBe('false');
+  });
 });
diff --git a/src/internal/components/chart-legend/index.tsx b/src/internal/components/chart-legend/index.tsx
@@ -127,6 +127,7 @@ function ChartLegend<T>({
                 {...focusVisible}
                 role="button"
                 key={index}
+                aria-pressed={isHighlighted}
                 className={clsx(styles.marker, {
                   [styles['marker--dimmed']]: isDimmed,
                   [styles['marker--highlighted']]: isHighlighted,