diff --git a/.eslintignore b/.eslintignore index 98f4449052..13ca9d8266 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,7 +1,4 @@ # Force include -!.storybook -!.storybook-docs -!.playground !.*.js # Ignore diff --git a/.eslintrc.js b/.eslintrc.js index fa1a39cf2e..8f22a683ea 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -424,7 +424,7 @@ module.exports = { }, }, { - files: ['.playground/**/*.ts?(x)'], + files: ['playground/**/*.ts?(x)'], rules: { 'react/prefer-stateless-function': 0, }, diff --git a/.storybook-docs/tsconfig.json b/.storybook-docs/tsconfig.json deleted file mode 100644 index 19e4ef33e9..0000000000 --- a/.storybook-docs/tsconfig.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - // "compilerOptions": { - // "outDir": "build/lib", - // "module": "commonjs", - // "target": "es5", - // "lib": ["es5", "es6", "es7", "es2017", "dom"], - // "sourceMap": true, - // "allowJs": false, - // "jsx": "react", - // "moduleResolution": "node", - // "rootDirs": ["src", "docs"], - // "baseUrl": "src", - // "forceConsistentCasingInFileNames": true, - // "noImplicitReturns": true, - // "noImplicitThis": true, - // "noImplicitAny": true, - // "strictNullChecks": true, - // "suppressImplicitAnyIndexErrors": true, - // "noUnusedLocals": true, - // "declaration": true, - // "allowSyntheticDefaultImports": true, - // "experimentalDecorators": true, - // "emitDecoratorMetadata": true - // }, - "extends": "../tsconfig", - "include": ["../src/**/*", "../stories/**/*", "./**/*", "../.storybook-docs/config.ts"], - "exclude": ["../**/*.test.*"] -} diff --git a/.storybook/tsconfig.json b/.storybook/tsconfig.json deleted file mode 100644 index d1c81f1004..0000000000 --- a/.storybook/tsconfig.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../tsconfig", - "include": ["../src/**/*", "../stories/**/*", "./**/*", "../.storybook-docs/config.docs.ts"], - "exclude": ["../**/*.test.*"] -} diff --git a/api/charts.api.md b/api/charts.api.md index d7051b8f06..fdd3efed83 100644 --- a/api/charts.api.md +++ b/api/charts.api.md @@ -625,7 +625,7 @@ export const DEFAULT_TOOLTIP_SNAP = true; export const DEFAULT_TOOLTIP_TYPE: "vertical"; // @public (undocumented) -export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'hideDuplicateAxes' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'description' | 'useDefaultSummary'; +export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'hideDuplicateAxes' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'ariaUseDefaultSummary' | 'ariaLabelHeadingLevel'; // @public (undocumented) export const DEPTH_KEY = "depth"; @@ -1743,12 +1743,17 @@ export interface SettingsSpec extends Spec, LegendSpec { allowBrushingLastHistogramBucket?: boolean; // (undocumented) animateData: boolean; + ariaDescribedBy?: string; + ariaDescription?: string; + ariaLabel?: string; + ariaLabelHeadingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'; + ariaLabelledBy?: string; + ariaUseDefaultSummary: boolean; baseTheme?: Theme; brushAxis?: BrushAxis; debug: boolean; // @alpha debugState?: boolean; - description?: string; // @alpha externalPointerEvents: ExternalPointerEventsSettings; hideDuplicateAxes: boolean; @@ -1779,7 +1784,6 @@ export interface SettingsSpec extends Spec, LegendSpec { roundHistogramBrushValues?: boolean; theme?: PartialTheme | PartialTheme[]; tooltip: TooltipSettings; - useDefaultSummary: boolean; // (undocumented) xDomain?: CustomXDomain; } diff --git a/global.d.ts b/global.d.ts index d41127d0e7..4a3ea50387 100644 --- a/global.d.ts +++ b/global.d.ts @@ -18,3 +18,43 @@ */ import 'jest-extended'; // https://github.com/jest-community/jest-extended + +declare global { + namespace NodeJS { + interface ProcessEnv { + /** + * Node enviroment + */ + NODE_ENV: 'development' | 'production' | 'test'; + /** + * Port used for dev servers including: + * - storybook + * - playground + */ + PORT?: string; + /** + * Timezone flag used on jest.ts.config.js + */ + TZ: string; + /** + * Flag used to enable a more suitable version of storybook for visual regression tests. + * + * Including: + * - disabling animations + * - preloading icons + */ + STORYBOOK_VRT: string; + /** + * Flag used to enable debug state on visual regression test runnner + */ + DEBUG: string; + /** + * String used for seeding a random number generator used in storybook and test files + * + * When seeded all rng use a deterministic random set of numbers. + * When no see is provided a truely _random_ number set will be used. + */ + RNG_SEED: string; + } + } +} diff --git a/integration/helpers.ts b/integration/helpers.ts index fee162e3c1..49dbd2acc1 100644 --- a/integration/helpers.ts +++ b/integration/helpers.ts @@ -77,6 +77,7 @@ function encodeString(string: string) { */ const storiesToSkip: Record = { // Interactions: ['Some story name'], + 'Test Cases': ['No Series'], }; /** diff --git a/integration/page_objects/common.ts b/integration/page_objects/common.ts index 8db68687b7..f90335b86a 100644 --- a/integration/page_objects/common.ts +++ b/integration/page_objects/common.ts @@ -388,7 +388,6 @@ class CommonPage { options?: Omit, ) { const action = async () => { - await this.disableAnimations(); // click to focus within the chart await this.clickMouseRelativeToDOMElement({ top: 0, left: 0 }, this.chartSelector); // eslint-disable-next-line no-restricted-syntax @@ -446,12 +445,6 @@ class CommonPage { }); } - async disableAnimations() { - await page.evaluate(() => { - document.querySelector('#story-root')!.classList.add('disable-animations'); - }); - } - /** * Wait for an element to be on the DOM * diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-add-custom-description-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-accessibility-customizations-visually-looks-correct-1-snap.png similarity index 100% rename from integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-add-custom-description-visually-looks-correct-1-snap.png rename to integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-accessibility-customizations-visually-looks-correct-1-snap.png diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png index 80564887bf..44f19badd3 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png differ diff --git a/integration/tests/all.test.ts b/integration/tests/all.test.ts index 8a9658003d..3ed9cc0b46 100644 --- a/integration/tests/all.test.ts +++ b/integration/tests/all.test.ts @@ -21,7 +21,7 @@ import { getStorybookInfo } from '../helpers'; import { common } from '../page_objects'; // mock required for importing trick, otherwise .scss files will throw an error -jest.mock('../../.storybook/theme_service.ts', () => ({ +jest.mock('../../storybook/theme_service.ts', () => ({ switchTheme: () => undefined, })); @@ -29,10 +29,10 @@ const storyGroups = getStorybookInfo(); describe('Baseline Visual tests for all stories', () => { describe.each(storyGroups)('%s', (_group, encodedGroup, stories) => { - describe.each(stories)('%s', (_title, encodedTitle, delay) => { + describe.each(stories)('%s', (_title, encodedTitle) => { it('visually looks correct', async () => { const url = `http://localhost:9001?id=${encodedGroup}--${encodedTitle}`; - await common.expectChartAtUrlToMatchScreenshot(url, { delay }); + await common.expectChartAtUrlToMatchScreenshot(url); }); }); }); diff --git a/integration/tests/area_stories.test.ts b/integration/tests/area_stories.test.ts index 66a9eada27..1f3492b532 100644 --- a/integration/tests/area_stories.test.ts +++ b/integration/tests/area_stories.test.ts @@ -89,7 +89,6 @@ describe('Area series stories', () => { it('shows only positive values when hiding negative one', async () => { const action = async () => { - await common.disableAnimations(); await page.click('.echLegendItem:nth-child(2) .echLegendItem__label'); }; await common.expectChartAtUrlToMatchScreenshot( @@ -100,7 +99,6 @@ describe('Area series stories', () => { it('shows only negative values when hiding positive one', async () => { const action = async () => { - await common.disableAnimations(); await page.click('.echLegendItem:nth-child(1) .echLegendItem__label'); }; await common.expectChartAtUrlToMatchScreenshot( diff --git a/integration/tests/legend_stories.test.ts b/integration/tests/legend_stories.test.ts index b0afea39ad..4e22ed8fdc 100644 --- a/integration/tests/legend_stories.test.ts +++ b/integration/tests/legend_stories.test.ts @@ -49,7 +49,6 @@ describe('Legend stories', () => { it('should render color picker on mouse click', async () => { const action = async () => { - await common.disableAnimations(); await common.clickMouseRelativeToDOMElement({ left: 0, top: 0 }, '.echLegendItem__color'); }; await common.expectElementAtUrlToMatchScreenshot( @@ -58,19 +57,16 @@ describe('Legend stories', () => { { action, waitSelector: common.chartWaitSelector, - delay: 500, // needed for popover animation to complete }, ); }); it('should render legend action on mouse hover', async () => { const action = async () => { - await common.disableAnimations(); await common.moveMouseRelativeToDOMElement({ left: 30, top: 10 }, '.echLegendItem'); }; await common.expectChartAtUrlToMatchScreenshot('http://localhost:9001/?path=/story/legend--actions', { action, - delay: 500, // needed for icon to load }); }); diff --git a/integration/tests/test_cases_stories.test.ts b/integration/tests/test_cases_stories.test.ts index e385439b07..326e433032 100644 --- a/integration/tests/test_cases_stories.test.ts +++ b/integration/tests/test_cases_stories.test.ts @@ -26,7 +26,6 @@ describe('Test cases stories', () => { 'http://localhost:9001/?path=/story/test-cases--no-series&knob-Show custom no results=true', { waitSelector: '.echReactiveChart_noResults .euiIcon:not(.euiIcon-isLoading)', - delay: 500, // wait for icon to load }, ); }); diff --git a/package.json b/package.json index edf24a8521..492e283da4 100644 --- a/package.json +++ b/package.json @@ -33,14 +33,14 @@ "lint": "NODE_ENV=production eslint --quiet --ext .tsx,.ts,.js .", "lint:fix": "yarn lint --fix", "prettier:check": "prettier --check \"**/*.{json,html,css,scss}\"", - "playground": "cd .playground && webpack-dev-server", - "playground:ie": "cd .playground && webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIp", + "playground": "cd playground && webpack-dev-server", + "playground:ie": "cd playground && webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIp", "pq": "pretty-quick", "semantic-release": "semantic-release", "start": "yarn storybook", - "start-docs": "start-storybook -p 8001 -c .storybook-docs --ci", - "storybook": "RNG_SEED='elastic-charts' start-storybook -s ./public -p 9001 -c .storybook --ci --no-version-updates", - "storybook:build": "rm -rf .out && build-storybook -s ./public -c .storybook -o .out", + "start-docs": "start-storybook -p 8001 -c storybook-docs --ci", + "storybook": "STORYBOOK_VRT='true' start-storybook -s ./public -p 9001 -c storybook --ci --no-version-updates", + "storybook:build": "rm -rf .out && build-storybook -s ./public -c storybook -o .out", "test": "jest --verbose --config jest.config.js", "test:tz": "yarn test:tz-utc && yarn test:tz-ny && yarn test:tz-jp", "test:tz-utc": "TZ=UTC jest --verbose --config=jest.tz.config.js", diff --git a/.playground/index.html b/playground/index.html similarity index 100% rename from .playground/index.html rename to playground/index.html diff --git a/.playground/index.tsx b/playground/index.tsx similarity index 100% rename from .playground/index.tsx rename to playground/index.tsx diff --git a/.playground/playground.tsx b/playground/playground.tsx similarity index 100% rename from .playground/playground.tsx rename to playground/playground.tsx diff --git a/.playground/tsconfig.json b/playground/tsconfig.json similarity index 100% rename from .playground/tsconfig.json rename to playground/tsconfig.json diff --git a/.playground/webpack.config.js b/playground/webpack.config.js similarity index 100% rename from .playground/webpack.config.js rename to playground/webpack.config.js 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 e9b35ea5db..ee1aba5f03 100644 --- a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx +++ b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx @@ -22,10 +22,16 @@ import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { LegendItem } from '../../../../common/legend'; +import { Description } from '../../../../components/accessibility/description'; +import { Label } from '../../../../components/accessibility/label'; import { onChartRendered } from '../../../../state/actions/chart'; import { GlobalChartState } from '../../../../state/chart_state'; +import { + A11ySettings, + DEFAULT_A11_SETTINGS, + getA11ySettingsSelector, +} from '../../../../state/selectors/get_accessibility_config'; import { getChartContainerDimensionsSelector } from '../../../../state/selectors/get_chart_container_dimensions'; -import { getChartIdSelector } from '../../../../state/selectors/get_chart_id'; import { getChartRotationSelector } from '../../../../state/selectors/get_chart_rotation'; import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme'; import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized'; @@ -79,9 +85,7 @@ export interface ReactiveChartStateProps { annotationSpecs: AnnotationSpec[]; panelGeoms: PanelGeoms; seriesTypes: Set; - description?: string; - useDefaultSummary: boolean; - chartId: string; + a11ySettings: A11ySettings; } interface ReactiveChartDispatchProps { @@ -159,9 +163,7 @@ class XYChartComponent extends React.Component { isChartEmpty, chartContainerDimensions: { width, height }, seriesTypes, - description, - useDefaultSummary, - chartId, + a11ySettings, } = this.props; if (!initialized || isChartEmpty) { @@ -171,9 +173,9 @@ 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': chartIdDescription } : {})} > - {(description || useDefaultSummary) && ( -
- {description &&

{description}

} - {useDefaultSummary && ( -
-
Chart type
-
{chartSeriesTypes}
-
- )} -
- )} +
+
); @@ -252,9 +252,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = { annotationSpecs: [], panelGeoms: [], seriesTypes: new Set(), - description: undefined, - useDefaultSummary: true, - chartId: '', + a11ySettings: DEFAULT_A11_SETTINGS, }; const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { @@ -263,7 +261,7 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { } const { geometries, geometriesIndex } = computeSeriesGeometriesSelector(state); - const { debug, description, useDefaultSummary } = getSettingsSpecSelector(state); + const { debug } = getSettingsSpecSelector(state); return { initialized: true, @@ -285,9 +283,7 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { annotationSpecs: getAnnotationSpecsSelector(state), panelGeoms: computePanelsSelectors(state), seriesTypes: getSeriesTypes(state), - description, - useDefaultSummary, - chartId: getChartIdSelector(state), + a11ySettings: getA11ySettingsSelector(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 deleted file mode 100644 index cc296f7c06..0000000000 --- a/src/chart_types/xy_chart/state/chart_state.a11y.test.ts +++ /dev/null @@ -1,76 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import { Store } from 'redux'; - -import { MockGlobalSpec, MockSeriesSpec } from '../../../mocks/specs'; -import { MockStore } from '../../../mocks/store/store'; -import { GlobalChartState } from '../../../state/chart_state'; -import { getSettingsSpecSelector } from '../../../state/selectors/get_settings_specs'; - -describe('custom description for screen readers', () => { - let store: Store; - beforeEach(() => { - store = MockStore.default(); - MockStore.addSpecs( - [ - MockSeriesSpec.bar({ - data: [ - { x: 1, y: 10 }, - { x: 2, y: 5 }, - ], - }), - MockGlobalSpec.settings(), - ], - store, - ); - }); - it('should test defaults', () => { - const state = store.getState(); - const { description, useDefaultSummary } = getSettingsSpecSelector(state); - expect(description).toBeUndefined(); - expect(useDefaultSummary).toBeTrue(); - }); - it('should allow user to set a custom description for chart', () => { - MockStore.addSpecs( - [ - MockGlobalSpec.settings({ - description: 'This is sample Kibana data', - }), - ], - store, - ); - const state = store.getState(); - const { description } = getSettingsSpecSelector(state); - expect(description).toBe('This is sample Kibana data'); - }); - it('should be able to disable generated descriptions', () => { - MockStore.addSpecs( - [ - MockGlobalSpec.settings({ - useDefaultSummary: false, - }), - ], - store, - ); - const state = store.getState(); - const { useDefaultSummary } = getSettingsSpecSelector(state); - expect(useDefaultSummary).toBe(false); - }); -}); diff --git a/src/chart_types/xy_chart/state/chart_state.accessibility.test.ts b/src/chart_types/xy_chart/state/chart_state.accessibility.test.ts new file mode 100644 index 0000000000..b07e9fbf63 --- /dev/null +++ b/src/chart_types/xy_chart/state/chart_state.accessibility.test.ts @@ -0,0 +1,161 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { Store } from 'redux'; + +import { MockGlobalSpec, MockSeriesSpec } from '../../../mocks/specs'; +import { MockStore } from '../../../mocks/store/store'; +import { GlobalChartState } from '../../../state/chart_state'; +import { DEFAULT_A11_SETTINGS } from '../../../state/selectors/get_accessibility_config'; +import { getSettingsSpecSelector } from '../../../state/selectors/get_settings_specs'; + +describe('test accessibility prop defaults', () => { + let store: Store; + beforeEach(() => { + store = MockStore.default(); + MockStore.addSpecs( + [ + MockSeriesSpec.bar({ + data: [ + { x: 1, y: 10 }, + { x: 2, y: 5 }, + ], + }), + MockGlobalSpec.settings(), + ], + store, + ); + }); + it('should test defaults', () => { + const state = store.getState(); + const { + ariaDescription, + ariaUseDefaultSummary, + ariaLabelHeadingLevel, + ariaLabel, + ariaLabelledBy, + } = getSettingsSpecSelector(state); + expect(ariaDescription).toBeUndefined(); + expect(ariaUseDefaultSummary).toBeTrue(); + expect(ariaLabelHeadingLevel).toBe(DEFAULT_A11_SETTINGS.labelHeadingLevel); + expect(ariaLabel).toBeUndefined(); + expect(ariaLabelledBy).toBeUndefined(); + }); +}); +describe('custom description for screen readers', () => { + let store: Store; + beforeEach(() => { + store = MockStore.default(); + MockStore.addSpecs( + [ + MockSeriesSpec.bar({ + data: [ + { x: 1, y: 10 }, + { x: 2, y: 5 }, + ], + }), + MockGlobalSpec.settings(), + ], + store, + ); + }); + it('should allow user to set a custom description for chart', () => { + MockStore.addSpecs( + [ + MockGlobalSpec.settings({ + ariaDescription: 'This is sample Kibana data', + }), + ], + store, + ); + const state = store.getState(); + const { ariaDescription } = getSettingsSpecSelector(state); + expect(ariaDescription).toBe('This is sample Kibana data'); + }); + it('should be able to disable generated descriptions', () => { + MockStore.addSpecs( + [ + MockGlobalSpec.settings({ + ariaUseDefaultSummary: false, + }), + ], + store, + ); + const state = store.getState(); + const { ariaUseDefaultSummary } = getSettingsSpecSelector(state); + expect(ariaUseDefaultSummary).toBe(false); + }); +}); +describe('custom labels for screen readers', () => { + let store: Store; + beforeEach(() => { + store = MockStore.default(); + MockStore.addSpecs( + [ + MockSeriesSpec.bar({ + data: [ + { x: 1, y: 10 }, + { x: 2, y: 5 }, + ], + }), + MockGlobalSpec.settings(), + ], + store, + ); + }); + it('should allow label set by the user', () => { + MockStore.addSpecs( + [ + MockGlobalSpec.settings({ + ariaLabel: 'Label set by user', + }), + ], + store, + ); + const state = store.getState(); + const { ariaLabel } = getSettingsSpecSelector(state); + expect(ariaLabel).toBe('Label set by user'); + }); + it('should allow labelledBy set by the user', () => { + MockStore.addSpecs( + [ + MockGlobalSpec.settings({ + ariaLabelledBy: 'label-id', + }), + ], + store, + ); + const state = store.getState(); + const { ariaLabelledBy } = getSettingsSpecSelector(state); + expect(ariaLabelledBy).toBe('label-id'); + }); + it('should allow users to specify valid heading levels', () => { + MockStore.addSpecs( + [ + MockGlobalSpec.settings({ + ariaLabelHeadingLevel: 'h5', + }), + ], + store, + ); + const state = store.getState(); + const { ariaLabelHeadingLevel } = getSettingsSpecSelector(state); + expect(ariaLabelHeadingLevel).toBe('h5'); + }); +}); diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap index ba2896c888..81330afa13 100644 --- a/src/components/__snapshots__/chart.test.tsx.snap +++ b/src/components/__snapshots__/chart.test.tsx.snap @@ -54,7 +54,7 @@ exports[`Chart should render the legend name test 1`] = ` - + @@ -72,11 +72,13 @@ exports[`Chart should render the legend name test 1`] = ` - -
+ +
-
+