Addon-a11y: Fix buggy scroll behavior

addons/a11y/README.md

@@ -58,10 +58,11 @@ addParameters({
   a11y: {
     // ... axe options
     element: '#root', // optional selector which element to inspect
+    config: {} // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
+    options: {} // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
   },
 });
 
-
 storiesOf('button', module)
   .add('Accessible', () => (
     <button style={{ backgroundColor: 'black', color: 'white', }}>

addons/a11y/src/index.js

@@ -9,7 +9,7 @@ import EVENTS, { PARAM_KEY } from './constants';
 
 const channel = addons.getChannel();
 let progress = Promise.resolve();
-let options;
+let setup;
 
 const getElement = () => {
   const storyRoot = document.getElementById('story-root');
@@ -24,13 +24,20 @@ const report = input => {
   channel.emit(EVENTS.RESULT, input);
 };
 
-const run = o => {
+const run = (c, o) => {
   progress = progress.then(() => {
     axe.reset();
-    if (o) {
-      axe.configure(o);
+    if (c) {
+      axe.configure(c);
     }
-    return axe.run(getElement()).then(report);
+    return axe
+      .run(
+        getElement(),
+        o || {
+          restoreScroll: true,
+        }
+      )
+      .then(report);
   });
 };
 
@@ -41,14 +48,14 @@ export const withA11Y = makeDecorator({
   allowDeprecatedUsage: false,
 
   wrapper: (getStory, context, opt) => {
-    options = opt.parameters || opt.options;
+    setup = opt.parameters || opt.options;
 
     return getStory(context);
   },
 });
 
-channel.on(STORY_RENDERED, () => run(options));
-channel.on(EVENTS.REQUEST, () => run(options));
+channel.on(STORY_RENDERED, () => run(setup.config, setup.options));
+channel.on(EVENTS.REQUEST, () => run(setup.config, setup.options));
 
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
@@ -63,7 +70,7 @@ export const checkA11y = deprecate(
 // TODO: REMOVE at v6.0.0
 export const configureA11y = deprecate(
   config => {
-    options = config;
+    setup = config;
   },
   stripIndents`
     configureA11y is deprecated, please configure addon-a11y using the addParameter api:

examples/official-storybook/config.js

@@ -41,7 +41,13 @@ addDecorator(storyFn => (
 ));
 
 addParameters({
-  a11y: {},
+  a11y: {
+    configure: {},
+    options: {
+      checks: { 'color-contrast': { options: { noScroll: true } } },
+      restoreScroll: true,
+    },
+  },
   options: {
     name: 'Storybook',
     hierarchySeparator: /\/|\./,

examples/official-storybook/stories/core/scroll.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default {
+  title: 'Core|Scroll',
+};
+
+export const story1 = () => (
+  <div>
+    <pre>START, when switching stories, you should be able to read this at the top of the page</pre>
+    <div style={{ height: '100vh' }} />
+    <pre>
+      END, this text should be below the scroll "fold" and therefore only be readable after
+      scrolling
+    </pre>
+  </div>
+);
+story1.title = 'story with 100vh padding 1';
+
+export const story2 = () => (
+  <div>
+    <pre>START, when switching stories, you should be able to read this at the top of the page</pre>
+    <div style={{ height: '100vh' }} />
+    <pre>
+      END, this text should be below the scroll "fold" and therefore only be readable after
+      scrolling
+    </pre>
+  </div>
+);
+story2.title = 'story with 100vh padding 2';

examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap

@@ -2641,7 +2641,19 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
     "hierarchySeparator": {},
     "name": "Storybook"
   },
-  "a11y": {},
+  "a11y": {
+    "configure": {},
+    "options": {
+      "checks": {
+        "color-contrast": {
+          "options": {
+            "noScroll": true
+          }
+        }
+      },
+      "restoreScroll": true
+    }
+  },
   "viewports": {
     "iphone5": {
       "name": "iPhone 5",
@@ -2811,6 +2823,34 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
 </pre>
 `;
 
+exports[`Storyshots Core|Scroll story with 100vh padding 1 1`] = `
+<div>
+  <pre>
+    START, when switching stories, you should be able to read this at the top of the page
+  </pre>
+  <div
+    style="height:100vh"
+  />
+  <pre>
+    END, this text should be below the scroll "fold" and therefore only be readable after scrolling
+  </pre>
+</div>
+`;
+
+exports[`Storyshots Core|Scroll story with 100vh padding 2 1`] = `
+<div>
+  <pre>
+    START, when switching stories, you should be able to read this at the top of the page
+  </pre>
+  <div
+    style="height:100vh"
+  />
+  <pre>
+    END, this text should be below the scroll "fold" and therefore only be readable after scrolling
+  </pre>
+</div>
+`;
+
 exports[`Storyshots UI|Notifications/NotificationItem longText 1`] = `
 .emotion-1 {
   display: block;

lib/core/src/client/preview/start.js

@@ -131,11 +131,6 @@ export default function start(render, { decorateStory } = {}) {
         return;
       }
 
-      if (!forceRender) {
-        // Scroll to top of the page when changing story
-        document.documentElement.scrollTop = 0;
-      }
-
       if (!forceRender && previousKind && previousStory) {
         addons.getChannel().emit(Events.STORY_CHANGED, id);
       }
@@ -155,6 +150,10 @@ export default function start(render, { decorateStory } = {}) {
     previousRevision = revision;
     previousKind = kind;
     previousStory = name;
+
+    if (!forceRender) {
+      document.documentElement.scrollTop = 0;
+    }
   };
 
   // initialize the UI