Merge pull request #1114 from hiTyagi/hiTyagi/prefers-reduced-motion-support

Author: elwayman02

addon/modifiers/scroll-into-view.js

@@ -45,18 +45,22 @@ function scrollIntoView(element, positional, named = {}) {
 
   shouldScrollPromise.then((shouldScrollValue) => {
     if (shouldScrollValue && element && !hasBeenRemoved) {
+      let { behavior = 'auto' } = options || {};
+      behavior =
+        behavior === 'smooth' &&
+        window.matchMedia(`(prefers-reduced-motion: reduce)`).matches
+          ? 'instant'
+          : behavior;
       if (
         options?.topOffset === undefined &&
         options?.leftOffset === undefined
       ) {
-        element.scrollIntoView(options);
+        element.scrollIntoView({
+          ...options,
+          ...(options?.behavior && { behavior }),
+        });
       } else {
-        const {
-          behavior = 'auto',
-          topOffset,
-          leftOffset,
-          scrollContainerId,
-        } = options;
+        const { topOffset, leftOffset, scrollContainerId } = options;
 
         let scrollContainer, left, top;
         if (scrollContainerId !== undefined) {

tests/integration/modifiers/scroll-into-view-test.js

@@ -8,6 +8,7 @@ module('Integration | Modifier | scroll-into-view', function (hooks) {
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function () {
+    window.matchMedia = sinon.stub().returns({ matches: false });
     this.scrollIntoViewSpy = sinon.spy(Element.prototype, 'scrollIntoView');
   });
 
@@ -366,4 +367,129 @@ module('Integration | Modifier | scroll-into-view', function (hooks) {
         .isFocused('First focusable element has focus');
     });
   });
+
+  module('prefers-reduced-motion', function (motionHooks) {
+    motionHooks.beforeEach(function () {
+      this.scrollToSpyMotion = sinon.spy(window, 'scrollTo');
+
+      this.smoothOptions = { behavior: 'smooth' };
+      this.instantOptions = { behavior: 'instant' };
+    });
+
+    test('it handles prefers-reduced-motion setting enabled', async function (assert) {
+      window.matchMedia = sinon.stub().returns({ matches: true });
+
+      await render(
+        hbs`<div {{scroll-into-view options=this.smoothOptions shouldScroll=true}}></div>`,
+      );
+
+      assert.ok(this.scrollIntoViewSpy.called, 'scrollIntoView was called');
+
+      assert.deepEqual(
+        this.scrollIntoViewSpy.args[0][0],
+        this.instantOptions,
+        'scrollIntoView was called with correct params',
+      );
+    });
+
+    test('it handles prefers-reduced-motion setting disabled and request behavior smooth', async function (assert) {
+      window.matchMedia = sinon.stub().returns({ matches: false });
+
+      await render(
+        hbs`<div {{scroll-into-view options=this.smoothOptions shouldScroll=true}}></div>`,
+      );
+
+      assert.ok(this.scrollIntoViewSpy.called, 'scrollIntoView was called');
+
+      assert.deepEqual(
+        this.scrollIntoViewSpy.args[0][0],
+        this.smoothOptions,
+        'scrollIntoView was called with correct params',
+      );
+    });
+
+    test('it handles prefers-reduced-motion setting disabled and request behavior instant', async function (assert) {
+      window.matchMedia = sinon.stub().returns({ matches: false });
+
+      await render(
+        hbs`<div {{scroll-into-view options=this.instantOptions shouldScroll=true}}></div>`,
+      );
+
+      assert.ok(this.scrollIntoViewSpy.called, 'scrollIntoView was called');
+
+      assert.deepEqual(
+        this.scrollIntoViewSpy.args[0][0],
+        this.instantOptions,
+        'scrollIntoView was called with correct params',
+      );
+    });
+
+    test('it does not set behavior when not passed as option', async function (assert) {
+      window.matchMedia = sinon.stub().returns({ matches: true });
+      this.options = { test: 'test' };
+
+      await render(
+        hbs`<div {{scroll-into-view options=this.options shouldScroll=true}}></div>`,
+      );
+
+      assert.ok(this.scrollIntoViewSpy.called, 'scrollIntoView was called');
+
+      assert.deepEqual(
+        this.scrollIntoViewSpy.args[0][0],
+        this.options,
+        'scrollIntoView was called with correct params',
+      );
+    });
+
+    test('it does not override default behavior when not passed as option with offset', async function (assert) {
+      window.matchMedia = sinon.stub().returns({ matches: true });
+      this.options = { test: 'test', topOffset: 50 };
+
+      await render(
+        hbs`<div {{scroll-into-view options=this.options shouldScroll=true}}></div>`,
+      );
+
+      assert.strictEqual(
+        this.scrollToSpyMotion.args[0][0].behavior,
+        'auto',
+        'scrollTo was called with correct behavior',
+      );
+    });
+
+    test('it handles prefers-reduced-motion setting enabled with offset present', async function (assert) {
+      window.matchMedia = sinon.stub().returns({ matches: true });
+      this.options = {
+        ...this.smoothOptions,
+        topOffset: 50,
+      };
+
+      await render(
+        hbs`<div {{scroll-into-view shouldScroll=true options=this.options}}></div>`,
+      );
+
+      assert.strictEqual(
+        this.scrollToSpyMotion.args[0][0].behavior,
+        this.instantOptions.behavior,
+        'scrollTo was called with correct behavior',
+      );
+    });
+
+    test('it handles prefers-reduced-motion setting disabled with offset present', async function (assert) {
+      window.matchMedia = sinon.stub().returns({ matches: false });
+      this.options = {
+        ...this.smoothOptions,
+        topOffset: 50,
+      };
+
+      await render(
+        hbs`<div {{scroll-into-view shouldScroll=true options=this.options}}></div>`,
+      );
+
+      assert.strictEqual(
+        this.scrollToSpyMotion.args[0][0].behavior,
+        this.smoothOptions.behavior,
+        'scrollTo was called with correct behavior',
+      );
+    });
+  });
 });