Chart type:
diff --git a/packages/charts/src/components/accessibility/accessibility.test.tsx b/packages/charts/src/components/accessibility/accessibility.test.tsx
index 668cadbc10..9491f5bce4 100644
--- a/packages/charts/src/components/accessibility/accessibility.test.tsx
+++ b/packages/charts/src/components/accessibility/accessibility.test.tsx
@@ -20,6 +20,8 @@
import { mount } from 'enzyme';
import React from 'react';
+import { Goal } from '../../chart_types/goal_chart/specs';
+import { GoalSubtype } from '../../chart_types/goal_chart/specs/constants';
import { config } from '../../chart_types/partition_chart/layout/config';
import { PartitionLayout } from '../../chart_types/partition_chart/layout/types/config_types';
import { arrayToLookup } from '../../common/color_calcs';
@@ -132,4 +134,30 @@ describe('Accessibility', () => {
expect(sunburstLayerWrapper.find('tr').first().text()).toBe('DepthLabelParentValuePercentage');
});
});
+
+ describe('Goal chart type accessibility', () => {
+ const goalChartWrapper = mount(
+
+
+ ,
+ );
+ it('should test defaults for goal charts', () => {
+ expect(goalChartWrapper.find('.echScreenReaderOnly').first().text()).toBe(
+ 'Revenue 2020 YTD (thousand USD) Chart type:goal chartMinimum:0Maximum:300Target:$260Value:170',
+ );
+ });
+ });
});
diff --git a/packages/charts/src/components/accessibility/index.ts b/packages/charts/src/components/accessibility/index.ts
index c4b3e8087d..d20347fcdb 100644
--- a/packages/charts/src/components/accessibility/index.ts
+++ b/packages/charts/src/components/accessibility/index.ts
@@ -19,3 +19,4 @@
/* @internal */
export { ScreenReaderSummary } from './screen_reader_summary';
+export { ScreenReaderPartitionTable } from './partitions_data_table';
diff --git a/packages/charts/src/components/accessibility/label.tsx b/packages/charts/src/components/accessibility/label.tsx
index 151ace8cba..7ba3d383e2 100644
--- a/packages/charts/src/components/accessibility/label.tsx
+++ b/packages/charts/src/components/accessibility/label.tsx
@@ -19,11 +19,37 @@
import React from 'react';
+import { GoalChartLabels } from '../../chart_types/goal_chart/state/selectors/get_goal_chart_data';
import { A11ySettings } from '../../state/selectors/get_accessibility_config';
+interface ScreenReaderLabelProps {
+ goalChartLabels?: GoalChartLabels;
+}
+
/** @internal */
-export function ScreenReaderLabel(props: A11ySettings) {
- if (!props.label) return null;
- const Heading = props.labelHeadingLevel;
- return {props.label};
+export function ScreenReaderLabel({
+ label,
+ labelHeadingLevel,
+ labelId,
+ goalChartLabels,
+}: A11ySettings & ScreenReaderLabelProps) {
+ const Heading = labelHeadingLevel;
+
+ if (!label && !goalChartLabels?.majorLabel && !goalChartLabels?.minorLabel) return null;
+
+ let unifiedLabel = '';
+ if (!label && goalChartLabels?.majorLabel) {
+ unifiedLabel = goalChartLabels?.majorLabel;
+ } else if (label && !goalChartLabels?.majorLabel) {
+ unifiedLabel = label;
+ } else if (label && goalChartLabels?.majorLabel && label !== goalChartLabels?.majorLabel) {
+ unifiedLabel = `${label}; Chart visible label: ${goalChartLabels?.majorLabel}`;
+ }
+
+ return (
+ <>
+ {unifiedLabel && {unifiedLabel}}
+ {goalChartLabels?.minorLabel && {goalChartLabels?.minorLabel}
}
+ >
+ );
}
diff --git a/packages/charts/src/components/accessibility/screen_reader_summary.tsx b/packages/charts/src/components/accessibility/screen_reader_summary.tsx
index a2efd1a55a..81e3ae664c 100644
--- a/packages/charts/src/components/accessibility/screen_reader_summary.tsx
+++ b/packages/charts/src/components/accessibility/screen_reader_summary.tsx
@@ -20,6 +20,12 @@
import React, { memo } from 'react';
import { connect } from 'react-redux';
+import {
+ getGoalChartDataSelector,
+ getGoalChartLabelsSelector,
+ GoalChartData,
+ GoalChartLabels,
+} from '../../chart_types/goal_chart/state/selectors/get_goal_chart_data';
import { GlobalChartState } from '../../state/chart_state';
import {
A11ySettings,
@@ -35,14 +41,21 @@ import { ScreenReaderTypes } from './types';
interface ScreenReaderSummaryStateProps {
a11ySettings: A11ySettings;
chartTypeDescription: string;
+ goalChartData?: GoalChartData;
+ goalChartLabels?: GoalChartLabels;
}
-const ScreenReaderSummaryComponent = ({ a11ySettings, chartTypeDescription }: ScreenReaderSummaryStateProps) => {
+const ScreenReaderSummaryComponent = ({
+ a11ySettings,
+ chartTypeDescription,
+ goalChartData,
+ goalChartLabels,
+}: ScreenReaderSummaryStateProps) => {
return (
-
+
-
+
);
};
@@ -50,6 +63,7 @@ const ScreenReaderSummaryComponent = ({ a11ySettings, chartTypeDescription }: Sc
const DEFAULT_SCREEN_READER_SUMMARY = {
a11ySettings: DEFAULT_A11Y_SETTINGS,
chartTypeDescription: '',
+ goalChartData: undefined,
};
const mapStateToProps = (state: GlobalChartState): ScreenReaderSummaryStateProps => {
@@ -59,6 +73,8 @@ const mapStateToProps = (state: GlobalChartState): ScreenReaderSummaryStateProps
return {
chartTypeDescription: getChartTypeDescriptionSelector(state),
a11ySettings: getA11ySettingsSelector(state),
+ goalChartData: getGoalChartDataSelector(state),
+ goalChartLabels: getGoalChartLabelsSelector(state),
};
};
diff --git a/packages/charts/src/components/accessibility/types.tsx b/packages/charts/src/components/accessibility/types.tsx
index aca5c91d40..d4839730f9 100644
--- a/packages/charts/src/components/accessibility/types.tsx
+++ b/packages/charts/src/components/accessibility/types.tsx
@@ -19,19 +19,41 @@
import React from 'react';
+import { GoalChartData } from '../../chart_types/goal_chart/state/selectors/get_goal_chart_data';
import { A11ySettings } from '../../state/selectors/get_accessibility_config';
interface ScreenReaderTypesProps {
chartTypeDescription: string;
+ goalChartData?: GoalChartData;
}
/** @internal */
-export function ScreenReaderTypes(props: A11ySettings & ScreenReaderTypesProps) {
- if (!props.defaultSummaryId) return null;
+export function ScreenReaderTypes({
+ goalChartData,
+ defaultSummaryId,
+ chartTypeDescription,
+}: A11ySettings & ScreenReaderTypesProps) {
+ if (!defaultSummaryId && !goalChartData) return null;
+ const validGoalChart =
+ chartTypeDescription === 'goal chart' ||
+ chartTypeDescription === 'horizontalBullet chart' ||
+ chartTypeDescription === 'verticalBullet chart';
return (