search

juice-shop / juice-shop

OWASP Juice Shop: Probably the most modern and sophisticated insecure web application
https://owasp-juice.shop
MIT License
10.11k stars 10.39k forks source link

[🚀] Allow running Juice Shop with Reduced Motion #2319

Open fauna654 opened 3 weeks ago

fauna654 commented 3 weeks ago

:rocket: Feature request

Description

The Juice Shop makes heavy use of animations. Most of the time that is a fun addition to the user experience, but there are some use cases where a reduced motion mode would be preferred e.g.

Solution ideas

I have tried to remove animations manually by importing Angular's NoopAnimationsModule in frontend/src/app/app.module.ts. However I had no success with that. It would be cool if it was possible to set an option in the config file to disable animations application-wide.

Possible alternatives

Alternatively to an option in the config file, the application could check the prefers-reduced-motion CSS media feature, but depending on the operating system this can be hard to configure for the user (e.g. I have no idea how it could be done in Kali) so adding a flag in the Juice Shop config might be nicer.

bkimminich commented 2 weeks ago

If there's a simple and non-invasive way to make Juice Shop more accessible, I'm all for it. But adding a server-side configuration is hardly it, this would have to be determined on client-side. To add something like this as an offer for low-end machine users seems a little like overkill, especially when I have no data how much performance impact the animations actually have on such a machine.

fauna654 commented 2 weeks ago

In that case the "prefers-reduced-motion" media feature might be the best approach. I don't know a lot about Angular, would it be acceptable to implement this purely in CSS, or is this something to be done on the JS side of things?

bkimminich commented 1 week ago

In that case the "prefers-reduced-motion" media feature might be the best approach. I don't know a lot about Angular, would it be acceptable to implement this purely in CSS, or is this something to be done on the JS side of things?

That would be okay, sure. But it should be postponed until https://github.com/juice-shop/juice-shop/issues/2173 gets finished, because we otherwise might add more potential for merge conflicts there.