fix(motion): accessibility and initial status fixes

ovflowd · benhalverson · commit bcc4e151f44a · 2022-06-27T21:21:05.000-07:00
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -1,6 +1,7 @@
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
 import 'prismjs/themes/prism-okaidia.css';
 import React from 'react';
+import { MotionConfig } from 'framer-motion';
 import Header from '../Header';
 import Footer from '../Footer';
 import '../../styles/tokens.scss';
@@ -34,11 +35,13 @@ const Layout = ({
         location={location}
         img={img}
       />
-      <div className="layout-container">
-        <Header />
-        {children}
-        {showFooter && <Footer />}
-      </div>
+      <MotionConfig reducedMotion="user">
+        <div className="layout-container">
+          <Header />
+          {children}
+          {showFooter && <Footer />}
+        </div>
+      </MotionConfig>
     </>
   );
 };
diff --git a/src/components/SearchBar/SearchInput.tsx b/src/components/SearchBar/SearchInput.tsx
@@ -74,6 +74,7 @@ const SearchInput = ({ localSearchLearnPages }: SearchProps): JSX.Element => {
     <motion.div
       className="searchBarContainer"
       animate={isExpanded ? 'expanded' : 'collapsed'}
+      initial="collapsed"
       variants={containerVariants}
       transition={containerTransition}
       ref={parentRef}
