fix(theme): fix collapsible sidebar behavior when prefers-reduced-motion (#8971)

Author: slorber

packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/index.tsx

@@ -7,7 +7,7 @@
 
 import React, {type ReactNode, useState, useCallback} from 'react';
 import clsx from 'clsx';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {prefersReducedMotion, ThemeClassNames} from '@docusaurus/theme-common';
 import {useDocsSidebar} from '@docusaurus/theme-common/internal';
 import {useLocation} from '@docusaurus/router';
 import DocSidebar from '@theme/DocSidebar';
@@ -40,6 +40,11 @@ export default function DocPageLayoutSidebar({
     if (hiddenSidebar) {
       setHiddenSidebar(false);
     }
+    // onTransitionEnd won't fire when sidebar animation is disabled
+    // fixes https://github.com/facebook/docusaurus/issues/8918
+    if (!hiddenSidebar && prefersReducedMotion()) {
+      setHiddenSidebar(true);
+    }
     setHiddenSidebarContainer((value) => !value);
   }, [setHiddenSidebarContainer, hiddenSidebar]);
 

packages/docusaurus-theme-common/src/components/Collapsible/index.tsx

@@ -17,6 +17,7 @@ import React, {
   type ReactNode,
 } from 'react';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import {prefersReducedMotion} from '../../utils/accessibilityUtils';
 
 const DefaultAnimationEasing = 'ease-in-out';
 
@@ -65,18 +66,14 @@ function applyCollapsedStyle(el: HTMLElement, collapsed: boolean) {
   el.style.height = collapsedStyles.height;
 }
 
-function userPrefersReducedMotion(): boolean {
-  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-
 /*
 Lex111: Dynamic transition duration is used in Material design, this technique
 is good for a large number of items.
 https://material.io/archive/guidelines/motion/duration-easing.html#duration-easing-dynamic-durations
 https://github.com/mui-org/material-ui/blob/e724d98eba018e55e1a684236a2037e24bcf050c/packages/material-ui/src/styles/createTransitions.js#L40-L43
  */
 function getAutoHeightDuration(height: number) {
-  if (userPrefersReducedMotion()) {
+  if (prefersReducedMotion()) {
     // Not using 0 because it prevents onTransitionEnd to fire and bubble up :/
     // See https://github.com/facebook/docusaurus/pull/8906
     return 1;

packages/docusaurus-theme-common/src/index.ts

@@ -43,6 +43,8 @@ export {useCollapsible, Collapsible} from './components/Collapsible';
 
 export {ThemeClassNames} from './utils/ThemeClassNames';
 
+export {prefersReducedMotion} from './utils/accessibilityUtils';
+
 export {
   useIsomorphicLayoutEffect,
   useEvent,

packages/docusaurus-theme-common/src/utils/accessibilityUtils.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export function prefersReducedMotion(): boolean {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}