Previewing an issue one has edited on Drupal.org results in unrequested scrolling. It would be conformant with the proposed Drupal policy on animation that where a user has their operating system set to not animate and is using a browser which exposes this setting to websites through the Prefers Reduced Motion media query, that the animation is suppressed and the site simply displays the content at the appropriate scroll distance.

Steps to recreate:

In Windows 10:

1. Activate Start menu
2. Click Settings
3. Click Ease of Access
4. Click Display
5. Set Show animations in Windows to Off

In Firefox 64 or later:

6. Go to https://www.drupal.org/project/ideas/issues/2928103
7. Click Edit
8. Type your edit in the issue description (not needed to recreate issue, but is the use case)
9. Scroll down to the bottom and click Preview.

Expected results: Page displays at the Preview without motion.

Actual results: Page displays and autoscrolls to the the Preview.

CommentFileSizeAuthor
#5 respect-reduced-motion-3025176-5.patch805 bytesavpaderno

Comments

Charles Belov created an issue. See original summary.

charles belov’s picture

Issue tags: +VIMS

Added VIMS issue tag.

avpaderno’s picture

Title: Respect Prefers Reduced Motion when site visitor clicks Preview on an issue » Respect "Prefers reduced motion" when users click on "Preview" when editing an issue
Project: Drupal.org site moderators » Project issue tracking
Version: » 7.x-2.x-dev
Component: Textual improvements » Issues

I can confirm it happens only with project issues; I could not reproduce the same with other content types. This means the observed behavior is not caused by Drupal core, but from custom code running on Drupal.org, or from code in the Project issue tracking module.

Since I didn't find anything in the custom code running on Drupal.org, the culprit should be the Project issue tracking module.
I apologize if I moved the issue in the wrong queue.

drumm’s picture

Yes, this is done with js/project-issue.js:

  /**
   * Jump to the actual preview and the form.
   */
  Drupal.behaviors.projectIssueJumpToNodeEditBlock = {
    attach: function () {
      $('#project-issue-ajax-form div.preview, #project-issue-ajax-form table.diff').once(function() {
        $('html, body').animate({scrollTop: $('#project-issue-ajax-form').offset().top});
      });
    }
  };
avpaderno’s picture

Status: Active » Needs review
StatusFileSize
new805 bytes
avpaderno’s picture

It seems the project branch is not passing tests because a Composer require failure. There isn't any link to the test results, so it's not clear what exactly is causing the failure.

avpaderno’s picture

I found the error on https://www.drupal.org/pift-ci-job/1138043, but I don't understand where that version constraint comes from.

--- Commands Executed ---
sudo -u www-data /usr/local/bin/composer require drupal/project_issue dev-2.x --prefer-source --prefer-stable --no-progress --no-suggest --no-interaction --working-dir /var/www/html
Return Code: 1
--- Output ---
--- Errors ---
[RuntimeException]
Could not load package drupal/project_issue in https://packages.drupal.org/7: [UnexpectedValueException] Could not parse version constraint !=2.0.0-unstable1: Invalid version string "2.0.0-unstable1"
[UnexpectedValueException]
Could not parse version constraint !=2.0.0-unstable1: Invalid version string "2.0.0-unstable1"

drumm’s picture

Status: Needs review » Needs work

I went back to the discussion on the original implementation, #2192121: Previewing comments not possible, to see if there was a UX reason to use animate the scrolling. I’m not seeing any; I’m not seeing a good reason to keep the animation in any case.

Using window.location.hash = 'project-issue-ajax-form'; also sets the focussed element to the preview, which should be the right thing to do for accessibility, too.

(https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView is an option too, reducing our dependency on jQuery is nice to have. It does offer animation in most browsers now, but does not respect prefers-reduced-motion on its own.)

  • drumm committed 6070484 on 7.x-2.x
    Issue #3025173 by kiamlaluno, Charles Belov, drumm: Remove scroll...
drumm’s picture

Status: Needs work » Fixed

I’ve deployed the non-animated version of this to www.drupal.org.

I also removed the Drupal.behaviors wrapper since this behavior will not need to be reapplied when the page changes.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.