Merge branch 'main' into a11y-toc-nested

Author: katieklein

cspell.json

@@ -595,6 +595,7 @@
     "Figma",
     "Figma's",
     "figma",
+    "fileuploader",
     "architected",
     "newsfeeds",
     "textareas",
@@ -1244,7 +1245,6 @@
     "Storage.put",
     "storagebucketname",
     "storagedemo",
-    "storagemanager",
     "storageOptions",
     "storagepath",
     "StoragePath",
@@ -1396,6 +1396,7 @@
     "validationData",
     "vanillajs",
     "varchar",
+    "vendedlogs",
     "verify.js",
     "VerifyAuthChallengeResponse",
     "VeriSign",

package.json

@@ -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",

public/images/console/formbuilder/storagemanager.mp4 renamed to public/images/console/formbuilder/fileuploader.mp4

@@ -101,7 +101,7 @@
 	},
 	{
 		"source": "/ui/storage/s3-image-picker/q/framework/<platform>/",
-		"target": "https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager",
+		"target": "https://ui.docs.amplify.aws/react/connected-components/storage/fileuploader",
 		"status": "302"
 	},
 	{

redirects.json

@@ -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 () => {

src/components/ExternalLink/__tests__/ExternalLink.test.tsx

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

src/components/ExternalLink/index.tsx

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

src/components/ExternalLinkButton/ExternalLinkButton.tsx

@@ -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 () => {

src/components/ExternalLinkButton/__tests__/ExternalLinkButton.test.tsx

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