Merge branch 'main' into a11y-mobile-toc

Author: katiegoines

Readme.md

@@ -175,7 +175,7 @@ let mut a = String::from("a");
 Videos can be added using the `<Video />` component and referencing a path to the video file. The video should be an `.mp4` file and should exist in the `/public` directory
 
 ```jsx
-<Video src="/path/to/video.mp4" />
+<Video src="/path/to/video.mp4" description="Video - [video description]" />
 ```
 
 ## Accessibility testing

package.json

@@ -89,7 +89,7 @@
     "loader-utils": "2.0.4",
     "minimatch": "3.1.2",
     "decode-uri-component": "0.2.1",
-    "fast-xml-parser": "4.2.5",
+    "**/fast-xml-parser": "4.4.1",
     "semver": "7.5.2",
     "tough-cookie": "4.1.3",
     "aws-cdk-lib": "2.80.0",

public/images/gen2/fullstack-branching/monorepo.png

@@ -113,7 +113,8 @@ export const Modal = ({ isGen1 }: ModalProps) => {
           variation="primary"
           className="modal-action modal-action--primary"
         >
-          Learn more <IconChevron className="icon-rotate-270" />
+          Learn more about Gen 2
+          <IconChevron className="icon-rotate-270" />
         </InternalLinkButton>
       </Flex>
     </Flex>

public/images/gen2/manage/data-manager.mp4

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { View } from '@aws-amplify/ui-react';
 
 interface VideoProps {
+  description: string;
   autoPlay?: boolean;
   muted?: boolean;
   loop?: true;
@@ -14,17 +15,21 @@ export const reducedMotionMediaQuery =
 
 /**
  * @description The Video component defaults to a muted, auto play video.
- * Currently, we also assume the surrounding content will adequately describe
- * the video so we default to aria-hidden="true".
  */
 export const Video = ({
+  description,
   autoPlay = true,
   muted = true,
   loop = true,
   src,
   testId,
   ...rest
 }: VideoProps) => {
+  if (!description) {
+    throw new Error(
+      `<Video src="${src}"> is missing required description prop`
+    );
+  }
   /**
    * Assume user prefers reduced motion until we can check
    * in the useEffect for the media query match, otherwise Next SSG
@@ -70,7 +75,7 @@ export const Video = ({
       width="100%"
       playsInline={true}
       controls={true}
-      aria-hidden="true"
+      aria-label={description}
       testId={testId}
       {...rest}
     >

public/images/gen2/manage/storage-manager.mp4

@@ -30,7 +30,13 @@ const playSpy = jest
 
 describe('Video', () => {
   const testId = 'videoTest';
-  const component = <Video src="test-video.mp4" testId={testId}></Video>;
+  const component = (
+    <Video
+      src="test-video.mp4"
+      description="Video - Test"
+      testId={testId}
+    ></Video>
+  );
 
   beforeEach(() => {
     mockMatchMedia('');

public/images/gen2/manage/user-manager.mp4

@@ -39,7 +39,7 @@ export const directory = {
               path: 'src/pages/[platform]/start/manual-installation/index.mdx'
             },
             {
-              path: 'src/pages/[platform]/start/connect-existing-aws-resources/index.mdx'
+              path: 'src/pages/[platform]/start/connect-to-aws-resources/index.mdx'
             },
             {
               path: 'src/pages/[platform]/start/kotlin-coroutines/index.mdx'
@@ -136,6 +136,9 @@ export const directory = {
                     },
                     {
                       path: 'src/pages/[platform]/build-a-backend/auth/manage-users/manage-devices/index.mdx'
+                    },
+                    {
+                      path: 'src/pages/[platform]/build-a-backend/auth/manage-users/with-amplify-console/index.mdx'
                     }
                   ]
                 },
@@ -311,6 +314,9 @@ export const directory = {
                 },
                 {
                   path: 'src/pages/[platform]/build-a-backend/data/override-resources/index.mdx'
+                },
+                {
+                  path: 'src/pages/[platform]/build-a-backend/data/manage-with-amplify-console/index.mdx'
                 }
               ]
             },
@@ -352,6 +358,9 @@ export const directory = {
                 },
                 {
                   path: 'src/pages/[platform]/build-a-backend/storage/data-usage/index.mdx'
+                },
+                {
+                  path: 'src/pages/[platform]/build-a-backend/storage/manage-with-amplify-console/index.mdx'
                 }
               ]
             },
@@ -367,6 +376,9 @@ export const directory = {
                 {
                   path: 'src/pages/[platform]/build-a-backend/functions/configure-functions/index.mdx'
                 },
+                {
+                  path: 'src/pages/[platform]/build-a-backend/functions/scheduling-functions/index.mdx'
+                },
                 {
                   path: 'src/pages/[platform]/build-a-backend/functions/streaming-logs/index.mdx'
                 },