Administration: view transitions should be disabled when a user disabled animation effects

[wildworks]

Related ticket: #64470

Users can disable animation effects at the OS level. For example, on Windows, this can be done via Settings → Accessibility → Visual effects. Similar settings should be available on all major operating systems.

In my opinion, if a user prefers reduced motion, view transitions should also be disabled.

We may be able to simply change it as follows:

@view-transition {
        navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
        @view-transition {
                navigation: none;
        }
}

#adminmenu > .menu-top {
        view-transition-name: attr(id type(<custom-ident>), none);
}

or:

@media (prefers-reduced-motion: no-preference) {
        @view-transition {
                navigation: auto;
        }

        #adminmenu > .menu-top {
                view-transition-name: attr(id type(<custom-ident>), none);
        }
}

[solankisoftware]

I’ve added a patch to disable admin view transitions when users prefer reduced motion.

The patch uses prefers-reduced-motion to set navigation:none for ::view-transition,
ensuring OS-level accessibility settings are respected.

Tested on Windows 11 (Animation effects disabled).
Patch attached. Feedback welcome.

Trac ticket: https://core.trac.wordpress.org/ticket/64529

This PR addresses accessibility concerns regarding the View Transitions API. Currently, cross-document transitions trigger automatically if enabled, which may cause discomfort or distraction for users with vestibular disorders or motion sensitivities.

Following the principle of Progressive Enhancement, this change ensures that view transitions are only activated for users who have not expressed a preference for reduced motion at the OS level.

[mukesh27]

Thanks @solankisoftware for sharing the patch 64529-disable-view-transitions-reduced-motion.patch​.

It looks like the patch targets wp-admin/css/common.css, but the original view transition styles live in a dedicated file: src/wp-admin/css/view-transitions.css.

Because of that, I’ve opened a PR that takes a more progressive approach to addressing the issue: ​https://github.com/WordPress/wordpress-develop/pull/10762

If you have a moment, I’d really appreciate you taking a look. Thanks!

[solankisoftware]

Thanks for the clarification and for opening the PR.
The progressive enhancement approach using prefers-reduced-motion: no-preference makes sense, and moving the logic into view-transitions.css looks cleaner.

[westonruter]

In 61502:

Administration: Ensure View Transitions only apply when reduced motion is not preferred.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10762

Follow-up to [61491].

Props mukesh27, wildworks, solankisoftware, westonruter.
See #64470.
Fixes #64529.