Merge branch 'master' into fix-anno-marker-wrap

.eslintignore

@@ -1,7 +1,4 @@
 # Force include
-!.storybook
-!.storybook-docs
-!.playground
 !.*.js
 
 # Ignore

.eslintrc.js

@@ -424,7 +424,7 @@ module.exports = {
       },
     },
     {
-      files: ['.playground/**/*.ts?(x)'],
+      files: ['playground/**/*.ts?(x)'],
       rules: {
         'react/prefer-stateless-function': 0,
       },

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;
 }

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;
+    }
+  }
+}

integration/helpers.ts

@@ -77,6 +77,7 @@ function encodeString(string: string) {
  */
 const storiesToSkip: Record<string, string[]> = {
   // Interactions: ['Some story name'],
+  'Test Cases': ['No Series'],
 };
 
 /**

integration/page_objects/common.ts

@@ -388,7 +388,6 @@ class CommonPage {
     options?: Omit<ScreenshotElementAtUrlOptions, 'action'>,
   ) {
     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
    *

integration/tests/all.test.ts

@@ -21,18 +21,18 @@ 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,
 }));
 
 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);
       });
     });
   });

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(

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
     });
   });
 

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
       },
     );
   });

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",

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<SeriesType>;
-  description?: string;
-  useDefaultSummary: boolean;
-  chartId: string;
+  a11ySettings: A11ySettings;
 }
 
 interface ReactiveChartDispatchProps {
@@ -159,9 +163,7 @@ class XYChartComponent extends React.Component<XYChartProps> {
       isChartEmpty,
       chartContainerDimensions: { width, height },
       seriesTypes,
-      description,
-      useDefaultSummary,
-      chartId,
+      a11ySettings,
     } = this.props;
 
     if (!initialized || isChartEmpty) {
@@ -171,9 +173,9 @@ class XYChartComponent extends React.Component<XYChartProps> {
 
     const chartSeriesTypes =
       seriesTypes.size > 1 ? `Mixed chart: ${[...seriesTypes].join(' and ')} chart` : `${[...seriesTypes]} chart`;
-    const chartIdDescription = `${chartId}--description`;
+
     return (
-      <figure>
+      <figure aria-labelledby={a11ySettings.labelId} aria-describedby={a11ySettings.descriptionId}>
         <canvas
           ref={forwardStageRef}
           className="echCanvasRenderer"
@@ -185,19 +187,17 @@ class XYChartComponent extends React.Component<XYChartProps> {
           }}
           // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
           role="presentation"
-          {...(description ? { 'aria-describedby': chartIdDescription } : {})}
         >
-          {(description || useDefaultSummary) && (
-            <div className="echScreenReaderOnly">
-              {description && <p id={chartIdDescription}>{description}</p>}
-              {useDefaultSummary && (
-                <dl>
-                  <dt>Chart type</dt>
-                  <dd>{chartSeriesTypes}</dd>
-                </dl>
-              )}
-            </div>
-          )}
+          <div className="echScreenReaderOnly">
+            <Label {...a11ySettings} />
+            <Description {...a11ySettings} />
+            {a11ySettings.defaultSummaryId && (
+              <dl id={a11ySettings.defaultSummaryId}>
+                <dt>Chart type</dt>
+                <dd>{chartSeriesTypes}</dd>
+              </dl>
+            )}
+          </div>
         </canvas>
       </figure>
     );
@@ -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),
   };
 };