diff --git a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx index c6ea583edd..e9b35ea5db 100644 --- a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx +++ b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx @@ -171,6 +171,7 @@ class XYChartComponent extends React.Component { const chartSeriesTypes = seriesTypes.size > 1 ? `Mixed chart: ${[...seriesTypes].join(' and ')} chart` : `${[...seriesTypes]} chart`; + const chartIdDescription = `${chartId}--description`; return (
{ }} // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role role="presentation" - {...(description ? { 'aria-describedby': `${chartId}--${chartSeriesTypes.length}` } : {})} + {...(description ? { 'aria-describedby': chartIdDescription } : {})} > {(description || useDefaultSummary) && (
- {description &&

{description}

} + {description &&

{description}

} {useDefaultSummary && (
Chart type
@@ -262,11 +263,12 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { } const { geometries, geometriesIndex } = computeSeriesGeometriesSelector(state); + const { debug, description, useDefaultSummary } = getSettingsSpecSelector(state); return { initialized: true, isChartEmpty: isChartEmptySelector(state), - debug: getSettingsSpecSelector(state).debug, + debug, geometries, geometriesIndex, theme: getChartThemeSelector(state), @@ -283,8 +285,8 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { annotationSpecs: getAnnotationSpecsSelector(state), panelGeoms: computePanelsSelectors(state), seriesTypes: getSeriesTypes(state), - description: getSettingsSpecSelector(state).description, - useDefaultSummary: getSettingsSpecSelector(state).useDefaultSummary, + description, + useDefaultSummary, chartId: getChartIdSelector(state), }; }; diff --git a/src/chart_types/xy_chart/state/chart_state.a11y.test.ts b/src/chart_types/xy_chart/state/chart_state.a11y.test.ts index 4312ff054d..cc296f7c06 100644 --- a/src/chart_types/xy_chart/state/chart_state.a11y.test.ts +++ b/src/chart_types/xy_chart/state/chart_state.a11y.test.ts @@ -36,17 +36,16 @@ describe('custom description for screen readers', () => { { x: 2, y: 5 }, ], }), + MockGlobalSpec.settings(), ], store, ); - MockStore.addSpecs([MockGlobalSpec.settings()], store); }); it('should test defaults', () => { const state = store.getState(); - const descriptionValue = getSettingsSpecSelector(state).description; - const defaultGeneratedSeriesTypes = getSettingsSpecSelector(state).useDefaultSummary; - expect(descriptionValue).toBeUndefined(); - expect(defaultGeneratedSeriesTypes).toBeTrue(); + const { description, useDefaultSummary } = getSettingsSpecSelector(state); + expect(description).toBeUndefined(); + expect(useDefaultSummary).toBeTrue(); }); it('should allow user to set a custom description for chart', () => { MockStore.addSpecs( @@ -58,8 +57,8 @@ describe('custom description for screen readers', () => { store, ); const state = store.getState(); - const descriptionValue = getSettingsSpecSelector(state).description; - expect(descriptionValue).toBe('This is sample Kibana data'); + const { description } = getSettingsSpecSelector(state); + expect(description).toBe('This is sample Kibana data'); }); it('should be able to disable generated descriptions', () => { MockStore.addSpecs( @@ -71,7 +70,7 @@ describe('custom description for screen readers', () => { store, ); const state = store.getState(); - const disableGeneratedSeriesTypes = getSettingsSpecSelector(state).useDefaultSummary; - expect(disableGeneratedSeriesTypes).toBe(false); + const { useDefaultSummary } = getSettingsSpecSelector(state); + expect(useDefaultSummary).toBe(false); }); });