aws-amplify
diff --git a/‎Readme.md
Lines changed: 1 addition & 1 deletion b/‎Readme.md
Lines changed: 1 addition & 1 deletion
diff --git a/‎cspell.json
Lines changed: 1 addition & 0 deletions b/‎cspell.json
Lines changed: 1 addition & 0 deletions
diff --git a/‎package.json
Lines changed: 2 additions & 2 deletions b/‎package.json
Lines changed: 2 additions & 2 deletions
diff --git a/‎public/images/gen2/fullstack-branching/monorepo.png
3.75 KB b/‎public/images/gen2/fullstack-branching/monorepo.png
3.75 KB
diff --git a/‎public/images/gen2/manage/data-manager.mp4
643 KB b/‎public/images/gen2/manage/data-manager.mp4
643 KB
diff --git a/‎public/images/gen2/manage/storage-manager.mp4
994 KB b/‎public/images/gen2/manage/storage-manager.mp4
994 KB
diff --git a/‎public/images/gen2/manage/user-manager.mp4
1.5 MB b/‎public/images/gen2/manage/user-manager.mp4
1.5 MB
diff --git a/‎src/components/ExternalLink/__tests__/ExternalLink.test.tsx
Lines changed: 10 additions & 3 deletions b/‎src/components/ExternalLink/__tests__/ExternalLink.test.tsx
Lines changed: 10 additions & 3 deletions
diff --git a/‎src/components/ExternalLink/index.tsx
Lines changed: 13 additions & 1 deletion b/‎src/components/ExternalLink/index.tsx
Lines changed: 13 additions & 1 deletion
diff --git a/‎src/components/ExternalLinkButton/ExternalLinkButton.tsx
Lines changed: 14 additions & 0 deletions b/‎src/components/ExternalLinkButton/ExternalLinkButton.tsx
Lines changed: 14 additions & 0 deletions
diff --git a/‎src/components/ExternalLinkButton/__tests__/ExternalLinkButton.test.tsx
Lines changed: 8 additions & 3 deletions b/‎src/components/ExternalLinkButton/__tests__/ExternalLinkButton.test.tsx
Lines changed: 8 additions & 3 deletions
diff --git a/‎src/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap
Lines changed: 1 addition & 1 deletion b/‎src/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/components/GlobalNav/__tests__/GlobalNav.test.tsx
Lines changed: 3 additions & 1 deletion b/‎src/components/GlobalNav/__tests__/GlobalNav.test.tsx
Lines changed: 3 additions & 1 deletion
diff --git a/‎src/components/GlobalNav/components/NavMenuLink.tsx
Lines changed: 1 addition & 0 deletions b/‎src/components/GlobalNav/components/NavMenuLink.tsx
Lines changed: 1 addition & 0 deletions
diff --git a/‎src/components/LinkCard/LinkCard.tsx
Lines changed: 6 additions & 1 deletion b/‎src/components/LinkCard/LinkCard.tsx
Lines changed: 6 additions & 1 deletion
diff --git a/‎src/components/LinkCards/__tests__/LinkCards.test.tsx
Lines changed: 4 additions & 4 deletions b/‎src/components/LinkCards/__tests__/LinkCards.test.tsx
Lines changed: 4 additions & 4 deletions
diff --git a/‎src/components/MDXComponents/__tests__/MDXLink.test.tsx
Lines changed: 8 additions & 2 deletions b/‎src/components/MDXComponents/__tests__/MDXLink.test.tsx
Lines changed: 8 additions & 2 deletions
diff --git a/‎src/components/Menu/MenuItem.tsx
Lines changed: 1 addition & 0 deletions b/‎src/components/Menu/MenuItem.tsx
Lines changed: 1 addition & 0 deletions
diff --git a/‎src/components/Menu/RepoActions/index.tsx
Lines changed: 1 addition & 4 deletions b/‎src/components/Menu/RepoActions/index.tsx
Lines changed: 1 addition & 4 deletions
diff --git a/‎src/components/Modal/Modal.tsx
Lines changed: 2 additions & 1 deletion b/‎src/components/Modal/Modal.tsx
Lines changed: 2 additions & 1 deletion
diff --git a/‎src/components/PlatformNavigator/index.tsx
Lines changed: 2 additions & 1 deletion b/‎src/components/PlatformNavigator/index.tsx
Lines changed: 2 additions & 1 deletion
diff --git a/‎src/components/Video/Video.tsx
Lines changed: 8 additions & 3 deletions b/‎src/components/Video/Video.tsx
Lines changed: 8 additions & 3 deletions
diff --git a/‎src/components/Video/__tests__/Video.test.tsx
Lines changed: 7 additions & 1 deletion b/‎src/components/Video/__tests__/Video.test.tsx
Lines changed: 7 additions & 1 deletion
diff --git a/‎src/components/contribute/HowItWorks.tsx
Lines changed: 6 additions & 15 deletions b/‎src/components/contribute/HowItWorks.tsx
Lines changed: 6 additions & 15 deletions
@@ -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
 
@@ -1396,6 +1396,7 @@
     "validationData",
     "vanillajs",
     "varchar",
+    "vendedlogs",
     "verify.js",
     "VerifyAuthChallengeResponse",
     "VeriSign",
 
@@ -42,7 +42,7 @@
     "@types/react": "^18.0.0",
     "@types/url-parse": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "axios": "^1.3.4",
+    "axios": "^1.7.4",
     "cheerio": "^1.0.0-rc.12",
     "classnames": "^2.3.2",
     "cross-env": "^7.0.3",
@@ -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",
 
@@ -14,20 +14,27 @@ describe('ExternalLink', () => {
   it('should render the ExternalLink component', async () => {
     render(component);
     const externalLink = await screen.getByRole('link', {
-      name: 'Click Here!'
+      name: '(opens in new tab)'
     });
+    const externalLinkText = await screen.findByText('Click Here!');
 
-    expect(externalLink).toBeInTheDocument();
+    await waitFor(() => {
+      expect(externalLink).toBeInTheDocument();
+      expect(externalLinkText).toBeInTheDocument();
+    });
   });
 
   it('should open external links in a new window', async () => {
     render(component);
     const externalLink = await screen.getByRole('link', {
-      name: 'Click Here!'
+      name: '(opens in new tab)'
     });
+    const externalLinkText = await screen.findByText('Click Here!');
 
     expect(externalLink).toHaveAttribute('rel', 'noopener noreferrer');
     expect(externalLink).toHaveAttribute('target', '_blank');
+    expect(externalLinkText).toHaveAttribute('rel', 'noopener noreferrer');
+    expect(externalLinkText).toHaveAttribute('target', '_blank');
   });
 
   it('should trackExternalLink on click', async () => {
 
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { trackExternalLink } from '../../utils/track';
 
 type ExternalLinkProps = {
@@ -15,15 +15,27 @@ const ExternalLink: React.FC<ExternalLinkProps> = ({
   href,
   className
 }) => {
+  const [label, setLabel] = React.useState('');
+  const linkRef = useRef<HTMLAnchorElement>(null);
+
+  useEffect(() => {
+    if (linkRef.current) {
+      const text = linkRef.current.innerText;
+      setLabel(text ? text : '');
+    }
+  }, []);
+
   return (
     <a
       href={href}
       className={className}
+      aria-label={label + ' (opens in new tab)'}
       rel="noopener noreferrer"
       target="_blank"
       onClick={() => {
         trackLink(href);
       }}
+      ref={linkRef}
     >
       {children}
     </a>
 
@@ -1,6 +1,8 @@
 import { Button, ButtonProps } from '@aws-amplify/ui-react';
 import { IconExternalLink } from '../Icons';
 import { trackExternalLink } from '../../utils/track';
+import { useEffect, useRef } from 'react';
+import React from 'react';
 
 interface ExternalLinkButtonProps {
   variation?: ButtonProps['variation'];
@@ -21,6 +23,16 @@ export const ExternalLinkButton = ({
   children,
   className
 }: ExternalLinkButtonProps) => {
+  const [label, setLabel] = React.useState('');
+  const buttonRef = useRef<HTMLAnchorElement>(null);
+
+  useEffect(() => {
+    if (buttonRef.current) {
+      const text = buttonRef.current.innerText;
+      setLabel(text ? text : '');
+    }
+  }, []);
+
   return (
     <Button
       href={href}
@@ -32,9 +44,11 @@ export const ExternalLinkButton = ({
       as="a"
       align-items="center"
       className={className}
+      aria-label={label + ' (opens in new tab)'}
       onClick={() => {
         trackLink(href);
       }}
+      ref={buttonRef}
     >
       {children} <IconExternalLink />
     </Button>
 
@@ -18,10 +18,15 @@ describe('ExternalLinkButton', () => {
   it('should render the ExternalLinkButton component', async () => {
     render(component);
 
-    const externalLinkButtonNode = await screen.findByRole('link', {
-      name: 'Click Here!'
+    const externalLinkButtonNode = await screen.getByRole('link', {
+      name: '(opens in new tab)'
+    });
+    const externalLinkButtonNodeText = await screen.findByText('Click Here!');
+
+    await waitFor(() => {
+      expect(externalLinkButtonNode).toBeInTheDocument();
+      expect(externalLinkButtonNodeText).toBeInTheDocument();
     });
-    expect(externalLinkButtonNode).toBeInTheDocument();
   });
 
   it('should render the ExternalLink icon', async () => {
 
@@ -29,7 +29,9 @@ describe('GlobalNav', () => {
 
   it('should render the GlobalNav component', async () => {
     render(component);
-    const link = await screen.findByRole('link', { name: 'About AWS Amplify' });
+    const link = await screen.findByRole('link', {
+      name: 'About AWS Amplify (opens in new tab)'
+    });
     expect(link).toBeInTheDocument();
   });
 });
@@ -40,6 +40,7 @@ export function NavMenuLink({
     return (
       <Link
         isExternal={true}
+        aria-label={label + ' (opens in new tab)'}
         className="navbar-menu-item"
         href={navMenuItem.url}
       >
 
@@ -16,7 +16,12 @@ const LinkCard: React.FC<LinkCardProps> = ({
 }) => {
   return (
     href && (
-      <Link href={href} isExternal={isExternal} className="link-card">
+      <Link
+        href={href}
+        isExternal={isExternal}
+        className="link-card"
+        aria-label={children + ' (opens in new tab)'}
+      >
         <Flex direction="column" justifyContent="space-between" height="100%">
           <View>{icon()}</View>
           <View className="link-card-children">{children}</View>
 
@@ -7,21 +7,21 @@ describe('LinkCards', () => {
   it('should render the LinkCards component', async () => {
     render(component);
     const linkCardNode = await screen.findByRole('link', {
-      name: 'React Libraries on GitHub'
+      name: 'React Libraries on GitHub (opens in new tab)'
     });
     expect(linkCardNode).toBeInTheDocument();
   });
 
   it('should link each card to external href', async () => {
     render(component);
     const githubCard = await screen.findByRole('link', {
-      name: 'React Libraries on GitHub'
+      name: 'React Libraries on GitHub (opens in new tab)'
     });
     const discordCard = await screen.findByRole('link', {
-      name: 'Amplify Discord'
+      name: 'Amplify Discord (opens in new tab)'
     });
     const learnCard = await screen.findByRole('link', {
-      name: 'Amplify Learn'
+      name: 'Amplify Learn (opens in new tab)'
     });
 
     expect(githubCard.href).toBe('https://github.com/aws-amplify/amplify-ui');
 
@@ -16,7 +16,7 @@ const routerMock = {
 jest.mock('next/router', () => routerMock);
 
 describe('MDXLink', () => {
-  it('should render external link', () => {
+  it('should render external link', async () => {
     const externalUrl = 'https://amazon.com';
     const linkText = 'External Site';
 
@@ -26,10 +26,16 @@ describe('MDXLink', () => {
       </MDXLink>
     );
 
-    const linkElement = screen.getByRole('link', { name: linkText });
+    const linkElement = await screen.getByRole('link', {
+      name: '(opens in new tab)'
+    });
+    const linkElementText = await screen.findByText('External Site');
     expect(linkElement).toBeInTheDocument();
     expect(linkElement).toHaveAttribute('href', externalUrl);
     expect(linkElement).toHaveAttribute('rel', 'noopener noreferrer');
+    expect(linkElementText).toBeInTheDocument();
+    expect(linkElementText).toHaveAttribute('href', externalUrl);
+    expect(linkElementText).toHaveAttribute('rel', 'noopener noreferrer');
   });
 
   it('should render internal link', () => {
 
@@ -156,6 +156,7 @@ export function MenuItem({
           className={`menu__list-item__link menu__list-item__link--external  ${listItemLinkStyle}`}
           href={pageNode.route}
           isExternal={true}
+          aria-label={pageNode.title + ' (opens in new tab)'}
           onClick={onLinkClick}
         >
           <Flex
 
@@ -16,10 +16,7 @@ export default function RepoActions({ router }) {
       {shouldShowEditLink && (
         <Flex className="repo-actions">
           <ExternalLink href={editLink}>
-            <Flex
-              className="repo-actions-link"
-              aria-label="Edit this page on GitHub"
-            >
+            <Flex className="repo-actions-link">
               <IconPencil />
               Edit on GitHub
             </Flex>
 
@@ -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>
 
@@ -51,9 +51,10 @@ export function PlatformNavigator({
         <Flex alignItems="center">
           <Popover flex="1 0 auto">
             <Popover.Trigger
+              id="selectedLabel"
               className={`platform-navigator__button`}
               isFullWidth={true}
-              aria-describedby="platformNavigatorLabel"
+              aria-labelledby="platformNavigatorLabel selectedLabel"
             >
               {platformItem.icon}
               {platformTitle}
 
@@ -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}
     >
 
@@ -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('');
 
@@ -1,11 +1,4 @@
-import {
-  Divider,
-  Flex,
-  Heading,
-  Text,
-  Badge,
-  Link
-} from '@aws-amplify/ui-react';
+import { Divider, Flex, Heading, Text, Badge } from '@aws-amplify/ui-react';
 import {
   MdOutlineBadge,
   MdLabelOutline,
@@ -14,6 +7,7 @@ import {
 } from 'react-icons/md';
 import { FiGitPullRequest } from 'react-icons/fi';
 import { IconCheck, IconExternalLink } from '@/components/Icons';
+import ExternalLink from '../ExternalLink';
 
 export default function HowItWorks() {
   return (
@@ -123,9 +117,9 @@ export default function HowItWorks() {
           <Text>
             If this is your first approved pull request, the Amplify team
             designates you as a Contributor in the{' '}
-            <Link href="https://discord.com/invite/amplify" isExternal>
+            <ExternalLink href="https://discord.com/invite/amplify">
               Amplify Community Discord server <IconExternalLink />
-            </Link>
+            </ExternalLink>
             .
           </Text>
         </Flex>
@@ -147,12 +141,9 @@ export default function HowItWorks() {
           </Flex>
           <Text>
             You collect an{' '}
-            <Link
-              href="https://aws.amazon.com/blogs/mobile/new-introducing-the-amplify-badge-program/"
-              isExternal
-            >
+            <ExternalLink href="https://aws.amazon.com/blogs/mobile/new-introducing-the-amplify-badge-program/">
               Amplify badge <IconExternalLink />
-            </Link>{' '}
+            </ExternalLink>{' '}
             for your first contribution or make progress toward the Intermediate
             and Advanced badges!
           </Text>
Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,7 @@ export function NavMenuLink({`
`40`	`40`	`return (`
`41`	`41`	`<Link`
`42`	`42`	`isExternal={true}`
	`43`	`+ aria-label={label + ' (opens in new tab)'}`
`43`	`44`	`className="navbar-menu-item"`
`44`	`45`	`href={navMenuItem.url}`
`45`	`46`	`>`
Original file line number	Diff line number	Diff line change
`@@ -156,6 +156,7 @@ export function MenuItem({`
`156`	`156`	className={`menu__list-item__link menu__list-item__link--external ${listItemLinkStyle}`}
`157`	`157`	`href={pageNode.route}`
`158`	`158`	`isExternal={true}`
	`159`	`+ aria-label={pageNode.title + ' (opens in new tab)'}`
`159`	`160`	`onClick={onLinkClick}`
`160`	`161`	`>`
`161`	`162`	`<Flex`