a11y videos have aria-hidden but can still receive focus

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

src/components/Video/Video.tsx

@@ -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}
     >

src/components/Video/__tests__/Video.test.tsx

@@ -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('');

src/pages/[platform]/build-a-backend/data/connect-to-existing-data-sources/connect-postgres-mysql-database/index.mdx

@@ -195,9 +195,9 @@ const { data: events } = await client.models.event.list()
 
 When deploying your app to production, you need to [add the database connection string as a secret](/[platform]/deploy-and-host/fullstack-branching/secrets-and-vars/#set-secrets). Make sure to add the appropriate database connection string with the same secret name you used in the sandbox environment. For example, we used `SQL_CONNECTION_STRING` above.
 
-<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
+<Video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true} description="Video - Configuring database connection for production">
   <source src="/images/gen2/secrets-and-vars/secrets.mp4" />
-</video>
+</Video>
 
 ## Rename generated models and fields
 

src/pages/[platform]/build-a-backend/q-developer/index.mdx

@@ -81,7 +81,7 @@ import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
 
 **Step 3:** Select the inline code suggestion generated by Amazon Q developer. The inline code suggestion feature assists you in defining the schema and hover over the output to select from other options.
 
-<Video src="/images/gen2/q-developer/Amplify-Gen2-Q-Developer.mp4" />
+<Video src="/images/gen2/q-developer/Amplify-Gen2-Q-Developer.mp4" description="Video - Q Developer" />
 
 <Callout informational>
 

src/pages/[platform]/deploy-and-host/fullstack-branching/branch-deployments/index.mdx

@@ -43,7 +43,7 @@ After you've deployed your [first branch](/[platform]/start/quickstart/), you ca
 You can also define a pattern to connect only certain branches. For example, setting `dev`, `staging`, and `feature/*` will automatically connect all three branch types. Your `dev` and `staging` branches, as well as any branch that begins with `feature/`, will be connected.
 </Callout>
 
-<Video src="/images/gen2/fullstack-branching/Enable-branch-autodetection.mp4" />
+<Video src="/images/gen2/fullstack-branching/Enable-branch-autodetection.mp4" description="Video - Enable branch autodetection" />
 
 3. Push a commit to your `feature/A` and `staging` branches that match the pattern. You should start seeing deployments on the console page. You will now have three fullstack branches deployed.
 
@@ -104,6 +104,6 @@ npx ampx generate outputs --app-id <your-amplify-app-id> --branch <your-git-bran
 
 Once the sandbox environment is running, you would also generate the configuration file for your application. However, Xcode won't recognize the file by default. To recognize the files, you need to drag and drop the generated configuration file to your project.
 
-<Video src="/images/gen2/getting-started/ios/ios-getting-started-2.mp4" />
+<Video src="/images/gen2/getting-started/ios/ios-getting-started-2.mp4" description="Video - iOS Getting Started" />
 
 </InlineFilter>

src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx

@@ -38,11 +38,11 @@ This guide walks you through how to create a trunk-based, multi-region deploymen
 
 </Callout>
 
-### Step 1: Set up an Amazon CodeCatalyst space
+## Step 1: Set up an Amazon CodeCatalyst space
 
 Please refer to this Amazon CodeCatalyst [guide](https://docs.aws.amazon.com/codecatalyst/latest/userguide/setting-up-topnode.html) for a detailed step-by-step walkthrough to set up your [space](https://docs.aws.amazon.com/codecatalyst/latest/userguide/spaces.html).
 
-### Step 2: Deploy a fullstack Amplify Gen 2 app
+## Step 2: Deploy a fullstack Amplify Gen 2 app
 
 <InlineFilter filters={["nextjs"]}>
 
@@ -68,19 +68,19 @@ Please refer to this Amazon CodeCatalyst [guide](https://docs.aws.amazon.com/cod
 
 ![Screenshot of completed deployment in AWS Amplify Gen 2 console](images/gen2/cross-account-deployments/pipeline1.png)
 
-### Step 3: Update build specification
+## Step 3: Update build specification
 
 Add the `npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID` command to the build spec and comment out the `npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID` command. `ampx pipeline-deploy` runs a script to deploy backend updates, while `ampx generate outputs` fetches the latest `amplify_outputs.json` for the specified environment.
 
 ![Screenshot of Build image settings section in AWS Amplify Gen 2 console, with details about the app build specification](images/gen2/cross-account-deployments/pipeline10.png)
 
-### Step 4: Disable automatic builds on the branch
+## Step 4: Disable automatic builds on the branch
 
 You can configure Amplify to disable automatic builds on every code commit. Navigate to the app in the Amplify console. Under **App settings**, select **Branch settings**. From the **Branches** section, select the branch and then choose **Disable auto build** from the **Actions** dropdown menu.
 
-<Video src="/images/gen2/fullstack-branching/auto-build.mp4" />
+<Video src="/images/gen2/fullstack-branching/auto-build.mp4" description="Video - Disable automatic builds on the branch" />
 
-### Step 5: Create an incoming webhook
+## Step 5: Create an incoming webhook
 
 You can set up an incoming webhook to trigger a build without committing code to your Git repository. Use the Amplify Console to create an [incoming webhook](https://docs.aws.amazon.com/amplify/latest/userguide/webhooks.html).
 
@@ -92,7 +92,7 @@ Next, select the webhook and copy the `curl` command which will be used to trigg
 
 ![Screenshot of the Incoming webhooks page in the Amplify console displaying the newly created webhook](/images/gen2/fullstack-branching/multirepo6.png)
 
-### Step 6: Create a new Amazon CodeCatalyst project
+## Step 6: Create a new Amazon CodeCatalyst project
 
 Please refer to this Amazon CodeCatalyst [guide](https://docs.aws.amazon.com/codecatalyst/latest/userguide/projects-create.html#projects-create-github) for a detailed step-by-step walkthrough to create a new [project](https://docs.aws.amazon.com/codecatalyst/latest/userguide/projects.html).
 
@@ -104,19 +104,19 @@ Please refer to this Amazon CodeCatalyst [guide](https://docs.aws.amazon.com/cod
 
 ![Screenshot of CodeCatalyst console showing Source repositories section](images/gen2/cross-account-deployments/pipeline2.png)
 
-### Step 7: Set up the resources in a different or target AWS account
+## Step 7: Set up the resources in a different or target AWS account
 
 To achieve a cross-account deployment, you will need to implement Steps 1 through 6 outlined previously in this guide in a different AWS account (for example, `production` account).
 
-### Step 8: Add the target AWS account to the CodeCatalyst space
+## Step 8: Add the target AWS account to the CodeCatalyst space
 
 Navigate to the CodeCatalyst space created as part of Step 1, select **Settings**, and then select **AWS accounts**. Add the target **AWS account ID** (Step 7) to it and select **Associate AWS account**.
 
 ![Screenshot of CodeCatalyst console showing details of the Associate AWS account section](images/gen2/cross-account-deployments/pipeline12.png)
 
 You will also need to create an IAM role in the target AWS account which will be assumed by the `staging` environment to perform actions and deploy resources in the `production` environment. As a best practice, we recommend attaching the [`AmplifyBackendDeployFullAccess`](https://docs.aws.amazon.com/amplify/latest/userguide/security-iam-awsmanpol.html#security-iam-awsmanpol-AmplifyBackendDeployFullAccess) AWS managed policy to the IAM role as it contains all the required permissions to deploy Gen 2 resources in your account. You can learn more about adding IAM roles to account connections in the CodeCatalyst [documentation](https://docs.aws.amazon.com/codecatalyst/latest/userguide/ipa-connect-account-addroles.html).
 
-### Step 9: Create a workflow in the Amazon CodeCatalyst project
+## Step 9: Create a workflow in the Amazon CodeCatalyst project
 
 A workflow is an automated procedure that describes how to build, test, and deploy your code as part of a continuous integration and continuous delivery (CI/CD) system. You can learn more about workflows in the [Amazon CodeCatalyst User Guide](https://docs.aws.amazon.com/codecatalyst/latest/userguide/flows.html).
 

src/pages/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx

@@ -39,7 +39,7 @@ You can set up your backend deployments using the following steps:
 
 2.  Disable Auto-build for your branch. This will ensure code commits to your branch will not trigger a build.
 
-<Video src="/images/gen2/fullstack-branching/auto-build.mp4" />
+<Video src="/images/gen2/fullstack-branching/auto-build.mp4"  description="Video - Disable auto-build" />
 
 3. Update the Amplify build specification file to add `npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID` and comment out the `pipeline-deploy` script. `ampx pipeline-deploy` runs a script to deploy backend updates, while `ampx generate outputs` fetches the latest `amplify_outputs.json` for the specified environment.
 

src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx

@@ -107,7 +107,7 @@ npx ampx generate outputs --app-id <your-backend-amplify-app-id> --branch main
 
 Once the sandbox environment is running, you would also generate the configuration files for your application. However, Xcode won't be able to recognize them. For recognizing the files, you need to drag and drop the generated files to your project.
 
-<Video src="/images/gen2/getting-started/ios/ios-getting-started-2.mp4" />
+<Video src="/images/gen2/getting-started/ios/ios-getting-started-2.mp4" description="Video - iOS Getting Started" />
 
 </InlineFilter>
 

src/pages/[platform]/deploy-and-host/fullstack-branching/secrets-and-vars/index.mdx

@@ -43,7 +43,7 @@ You can set secrets for your fullstack branch deployments or your local dev serv
 
 You can add secrets for branch deployments in the Amplify console. From the App home page, navigate to **Hosting > Secrets**, and then choose the **Manage secrets** button. You can add a secret key or value that applies to all deployed branches or just specific branches.
 
-<Video src="/images/gen2/secrets-and-vars/secrets.mp4" />
+<Video src="/images/gen2/secrets-and-vars/secrets.mp4" description="Video - Secrets" />
 
 Secrets are stored in AWS Systems Manager Parameter Store under the following naming conventions:
 
@@ -114,7 +114,7 @@ npx ampx sandbox secret remove foo
 
 Environment variables work like key-value pairs to help manage configurable settings across different deployment environments, including development, staging, and production. Unlike secrets, which store sensitive data, environment variables are typically nonconfidential and are used for controlling application behavior in different environments. Another key difference is that environment variables are stored and managed by the Amplify managed service. You can set environment variables in the Amplify console (view the [AWS Amplify Hosting User Guide](https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html#setting-env-vars) for detailed instructions).
 
-<Video src="/images/gen2/secrets-and-vars/env-vars.mp4" />
+<Video src="/images/gen2/secrets-and-vars/env-vars.mp4" description="Video - Secrets" />
 
 ## Access environment variables
 

src/pages/[platform]/deploy-and-host/sandbox-environments/features/index.mdx

@@ -206,7 +206,7 @@ npx ampx sandbox --outputs-format json-mobile
 
 Once the sandbox environment is running, you would also generate the configuration files for your application. However, Xcode won't be able to recognize them. For recognizing the files, you need to drag and drop the generated files to your project.
 
-<Video src="/images/gen2/getting-started/ios/ios-getting-started-2.mp4" />
+<Video src="/images/gen2/getting-started/ios/ios-getting-started-2.mp4" description="Video - iOS getting started" />
 
 </InlineFilter>
 
@@ -244,7 +244,7 @@ npx ampx generate outputs --app-id <app-id> --format json-mobile
 
 Once the sandbox environment is running, it will generate the backend outputs file for your frontend application. However, Xcode won't be able to recognize them. For recognizing the files, you need to drag and drop the generated files to your project.
 
-<Video src="/images/gen2/getting-started/ios/ios-getting-started-2.mp4" />
+<Video src="/images/gen2/getting-started/ios/ios-getting-started-2.mp4" description="Video - iOS Getting Started" />
 
 </InlineFilter>
 

src/pages/[platform]/how-amplify-works/concepts/index.mdx

@@ -58,7 +58,7 @@ All shared environments (such as `production`, `staging`, `gamma`) map 1:1 to Gi
 
 All branches can be managed in the new Amplify console. The Amplify Gen 2 console provides a single place for you to manage your builds, hosting settings (such as custom domains), deployed resources (such as data browser or user management), and environment variables and secrets. Even though you can access deployed resources directly in other AWS service consoles, the Amplify console will offer a first-party experience for the categories almost every app needs—data, auth, storage, and functions. For example, with Data, Amplify offers an API playground and a data manager (coming soon) with relationship building, seed data generation, and file upload capabilities.
 
-<Video src="/images/gen2/how-amplify-works/console.mp4" />
+<Video src="/images/gen2/how-amplify-works/console.mp4" description="Video - Amplify Gen 2 Console" />
 
 ## Build an app
 

src/pages/[platform]/index.tsx

@@ -175,7 +175,9 @@ const Gen2Overview = () => {
       </Flex>
       <Flex className="home-section">
         <Heading level={2}>Develop</Heading>
-        {!isMobilePlatform && <Video src="/videos/typed-api.mp4" />}
+        {!isMobilePlatform && (
+          <Video src="/videos/typed-api.mp4" description="Video - Develop" />
+        )}
 
         <Columns columns={2} as="ul">
           {!isMobilePlatform && (

src/pages/[platform]/reference/iam-policy/index.mdx

@@ -33,7 +33,7 @@ export function getStaticProps(context) {
 
 Branch deployments require the [`AmplifyBackendDeployFullAccess`](https://docs.aws.amazon.com/amplify/latest/userguide/security-iam-awsmanpol.html#security-iam-awsmanpol-AmplifyBackendDeployFullAccess) managed policy to be able to deploy backend resources during a fullstack deployment. When connecting your project through the console, a role with this policy attached will be automatically created for you.
 
-<Video src="/images/gen2/references/iam-policy.mp4" />
+<Video src="/images/gen2/references/iam-policy.mp4" description="Video - IAM Policy" />
 
 ## Cloud sandbox deployments
 

src/pages/[platform]/start/account-setup/index.mdx

@@ -87,7 +87,7 @@ A dialog will open, prompting you to "Choose how to configure IAM Identity Cente
 
 Next, we are going to automate a number of steps that simulate the operations of setting up a user in the IAM Identity Center console. To get started open CloudShell, located in the console footer.
 
-<Video src="/images/gen2/account-setup/sso-cloud-shell.mp4" />
+<Video src="/images/gen2/account-setup/sso-cloud-shell.mp4" description="Video - Open CloudShell" />
 
 Paste the following command in the CloudShell terminal and enter an email address you would like to associate with this AWS account:
 
@@ -175,7 +175,7 @@ Username: amplify-admin
 
 Now create a password for the user that we need for the next step. In the IdC console, navigate to _Users > amplify_admin > Reset password > Send an email to the user with instructions for resetting the password_.
 
-<Video src="/images/gen2/account-setup/sso-reset-password.mp4" />
+<Video src="/images/gen2/account-setup/sso-reset-password.mp4" description="Video - Reset Password" />
 
 Check your email (make sure you also check your spam folder). Click on the _Reset password_ link and choose a password of your choice. When signing in make sure to use _amplify-admin_ as the _Username_.