Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SHS-4047: A11y: Adjust slide transition based on user's Reduced Motion Preference #1450

Merged
merged 6 commits into from
Feb 9, 2024

Conversation

mariannuar
Copy link
Collaborator

@mariannuar mariannuar commented Feb 8, 2024

READY FOR REVIEW

Summary

  • Adjust slide transition based on user's Reduced Motion Preference in the following components:
    • Banner Image(s) with Partial Overlay (with multiple slides)
    • Banner Image(s) with Text Box (with multiple slides)
    • Spotlight (with multiple slides)
    • Photo Album (in Slider mode)

Need Review By (Date)

02/09

Urgency

medium

Steps to Test

  1. For each component, you need to go to your System Settings > Accessibility > Display
  2. Turn on and off the Reduce motion in all the pages below

Banner Image(s) with Partial Overlay (with multiple slides)

Banner Image(s) with Text Box (with multiple slides)

Spotlight (with multiple slides)

Photo Album (in Slider mode)

PR Checklist

@mariannuar mariannuar changed the base branch from develop to fk-stnfd-sprint-43 February 8, 2024 17:43
Comment on lines 13 to 19
$(slickInstance).on('beforeChange', (event, slick) => {
slick.slickSetOption('cssEase', 'none', true);
});
} else {
$(slickInstance).on('beforeChange', (event, slick) => {
slick.slickSetOption('cssEase', 'ease', true);
});
Copy link
Collaborator Author

@mariannuar mariannuar Feb 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While testing more, I found out the library already does this by default (remove animations at all). Test in a different branch/env.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mariannuar mariannuar removed the request for review from cienvaras February 8, 2024 18:40
@mariannuar mariannuar requested a review from cienvaras February 8, 2024 21:55
Copy link
Collaborator

@cienvaras cienvaras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mariannuar Works great! Just fix a minor coding issue and we're done 🙂

(function ($, Drupal, window) {
Drupal.behaviors.mySlickBehavior = {
// eslint-disable-next-line no-unused-vars
attach(context, settings) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you're not using the settings argument, just remove it. That way you don't need the eslint-disable

Mari Núñez and others added 2 commits February 9, 2024 10:31
Copy link
Collaborator

@cienvaras cienvaras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@cienvaras cienvaras merged commit 071f361 into fk-stnfd-sprint-43 Feb 9, 2024
7 of 8 checks passed
@cienvaras cienvaras deleted the SHS-4047-a11y-adjust-slide-transition branch February 9, 2024 18:07
@pookmish pookmish mentioned this pull request Feb 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants