Support prefers-reduced-motion in CSS.

See #2928103: [policy, no patch] Use "prefers-reduced-motion" media query to disable animations for reasoning

CommentFileSizeAuthor
#21 2940677-21.patch920 bytesGauravvvv
#3 2940677-3.patch1.49 KBtedbow
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

tedbow created an issue. See original summary.

tedbow’s picture

tedbow
he/him
Primary language English
Location Ithaca, NY, USA
CreditAttribution: tedbow at Acquia commented
Issue summary: View changes
tedbow’s picture

tedbow
he/him
Primary language English
Location Ithaca, NY, USA
CreditAttribution: tedbow at Acquia commented
FileSize
2940677-3.patch1.49 KB

Ok here is a try at this.

andrewmacpherson’s picture

andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commented
Issue tags: +wcag21
Related issues: +#2864791: Implement new Success Criteria from WCAG 2.1
andrewmacpherson’s picture

andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commented

Thanks for starting a patch @tedbow. I'll try it when I'm near a Mac and Safari.

The off-canvas dialog is probably a high-risk animation for users affected by vestibular disorders, etc.. I'm going by the fact that it involves a large portion of the viewport, especially on the top-edge demo GIFs we'veseen for the Workspaces UI, though I'm not clear exactly how to assess animation risks.

Taking #2916781: Allow off-canvas dialog to be rendered at the top of the page and #2951547: Modify Layout Builder's use of the off-canvas tray to improve UX of larger block forms into account, it looks like several experimental modules are looking to use the off-canvas feature, with bigger dimensions than we currently have.

I think this issue ought to be a should-have for experimental modules which employ off-canvas from now on. It's coming in at AAA level in WCAG 2.1, so it's not a cornformance requirement for our a11y QA gate. But it is high-impact for affected users, and looks easy to implement. I'll mention this on the relevant big-plan issues for these initiatives, when I figure out which issues they are ;-)

andrewmacpherson’s picture

andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commented
Issue tags: +VIMS

"Visually-induced motion sickness". Adding a tag for @mgifford - he's linking to it from various external sites, like upstream issue queues for browser vendors.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

andrewmacpherson’s picture

andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commented
Issue tags: -Accessibility +accessibility

@tedbow - what's the purpose of the opacity here?

+@media (prefers-reduced-motion) {
+  .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
+    transition-property: opacity;

Why not transition: none;?

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
CreditAttribution: tim.plunkett at Acquia commented
Issue tags: -accessibility (duplicate tag) +Accessibility

Fixing tags

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford at OpenConcept Consulting Inc. commented

According to this 2015 A List Apart Article

Animation that involves only non-moving properties, like opacity, color, and blurs, are unlikely to be problematic.

.

So it would be a low risk. Is there a UX advantage @tedbow?

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford at CivicActions commented
Issue tags: +prefers-reduced-motion

We should definitely support this.

Gauravvvv’s picture

Gauravvvv CreditAttribution: Gauravvvv at Axelerant for Drupal India Association commented
Status: Active » Needs review
FileSize
2940677-21.patch920 bytes

I have attached a patch to remove transition on #drupal-off-canvas-wrapper summary. please review

smustgrave’s picture

smustgrave CreditAttribution: smustgrave at Mobomo commented
Status: Needs review » Needs work
Issue tags: +Needs screenshots

Think the issue summary should be updated to include screenshots of the changed behavior.