feat(legend): add keyboard navigation

.storybook/style.scss

@@ -26,17 +26,18 @@ html {
   box-sizing: border-box;
   background-color: blanchedalmond;
 
-  // *,
-  // *::after,
-  // *::before,
-  // .echLegendItem {
-  //   transition-delay: 0s !important;
-  //   transition-duration: 0s !important;
-  //   animation-delay: -0.0001s !important;
-  //   animation-duration: 0s !important;
-  //   animation-play-state: paused !important;
-  //   caret-color: transparent !important;
-  // }
+  &.disable-animations {
+    *,
+    *::after,
+    *::before {
+      transition-delay: 0s !important;
+      transition-duration: 0s !important;
+      animation-delay: -0.0001s !important;
+      animation-duration: 0s !important;
+      animation-play-state: paused !important;
+      caret-color: transparent !important;
+    }
+  }
 }
 
 #story-root + div table {

integration/defaults.js

@@ -21,5 +21,4 @@ module.exports = {
   PORT: '9009',
   HOST: process.env.DEBUG === 'true' ? 'localhost' : 'host.docker.internal',
   LOCAL_STORYBOOK_VRT: false,
-  global_setup: '../../.storybook/style_test.scss',
 };

integration/page_objects/common.ts

@@ -347,26 +347,6 @@ class CommonPage {
    * @param options
    */
   async expectChartAtUrlToMatchScreenshot(url: string, options?: ScreenshotElementAtUrlOptions) {
-    await page.evaluateOnNewDocument(() => {
-      const style = document.createElement('style');
-      style.type = 'text/css';
-      style.innerHTML = `
-      *,
-      *::after,
-      *::before,
-      .echLegendItem {
-        transition-delay: 0s !important;
-        transition-duration: 0s !important;
-        animation-delay: -0.0001s !important;
-        animation-duration: 0s !important;
-        animation-play-state: paused !important;
-        caret-color: transparent !important;
-      };`;
-      const storyRoot = document.getElementById('#story-root');
-      if (storyRoot) {
-        storyRoot.appendChild(style);
-      }
-    });
     await this.expectElementAtUrlToMatchScreenshot(url, this.chartSelector, {
       waitSelector: this.chartWaitSelector,
       ...options,
@@ -404,8 +384,8 @@ class CommonPage {
     options?: Omit<ScreenshotElementAtUrlOptions, 'action'>,
   ) {
     const action = async () => {
+      await this.disableAnimations('http://localhost:9001/?path=/story/legend--right');
       await this.clickMouseRelativeToDOMElement({ top: 242, left: 910 }, this.chartSelector);
-
       // eslint-disable-next-line no-restricted-syntax
       for (const actions of keyboardEvents) {
         await this.pressKey(actions.actionLabel, actions.count);
@@ -460,6 +440,13 @@ class CommonPage {
     });
   }
 
+  async disableAnimations(url: string) {
+    await this.loadElementFromURL(url, '#story-root');
+    await page.evaluate(() => {
+      document.querySelector('#story-root')!.classList.add('disable-animations');
+    });
+  }
+
   /**
    * Wait for an element to be on the DOM
    *

integration/tests/area_stories.test.ts

@@ -64,27 +64,37 @@ describe('Area series stories', () => {
     });
   });
   describe('Negative log Areas', () => {
-    it('snows negative values with log scale', async () => {
+    it('shows negative values with log scale', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
         'http://localhost:9001/?path=/story/area-chart--with-negative-values&knob-Y scale=log',
       );
     });
-    it('snows only positive domain mixed polarity domain', async () => {
+    it('shows only positive domain mixed polarity domain', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
         'http://localhost:9001/?path=/story/area-chart--with-negative-and-positive&knob-Y scale=log',
       );
     });
 
-    it('snows only positive values when hiding negative one', async () => {
-      const action = async () => await page.click('.echLegendItem:nth-child(2) .echLegendItem__label');
+    it('shows only positive values when hiding negative one', async () => {
+      const action = async () => {
+        await common.disableAnimations(
+          'http://localhost:9001/?path=/story/area-chart--with-negative-and-positive&knob-Y scale=log',
+        );
+        await page.click('.echLegendItem:nth-child(2) .echLegendItem__label');
+      };
       await common.expectChartAtUrlToMatchScreenshot(
         'http://localhost:9001/?path=/story/area-chart--with-negative-and-positive&knob-Y scale=log',
         { action },
       );
     });
 
-    it('snows only negative values when hiding positive one', async () => {
-      const action = async () => await page.click('.echLegendItem:nth-child(1) .echLegendItem__label');
+    it('shows only negative values when hiding positive one', async () => {
+      const action = async () => {
+        await common.disableAnimations(
+          'http://localhost:9001/?path=/story/area-chart--with-negative-and-positive&knob-Y scale=log',
+        );
+        await page.click('.echLegendItem:nth-child(1) .echLegendItem__label');
+      };
       await common.expectChartAtUrlToMatchScreenshot(
         'http://localhost:9001/?path=/story/area-chart--with-negative-and-positive&knob-Y scale=log',
         { action },

integration/tests/legend_stories.test.ts

@@ -93,6 +93,9 @@ describe('Legend stories', () => {
     });
   });
   describe('keyboard navigation', () => {
+    beforeEach(async () => {
+      await common.disableAnimations('http://localhost:9001/?path=/story/legend--right');
+    });
     // eslint-disable-next-line jest/expect-expect
     it('should navigate to legend item with tab', async () => {
       await common.expectChartWithKeyboardEventsAtUrlToMatchScreenshot(