Merge branch 'main' into a11y-mobile-toc

Author: katiegoines

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

@@ -10,7 +10,7 @@
   "private": true,
   "dependencies": {
     "@aws-amplify/amplify-cli-core": "^4.3.9",
-    "@aws-amplify/ui-react": "^6.1.12",
+    "@aws-amplify/ui-react": "^6.3.1",
     "@docsearch/react": "3",
     "ajv": "^8.16.0",
     "aws-amplify": "^6.0.9",
@@ -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",
@@ -75,7 +75,6 @@
     "remark-mdx-searchable": "^0.1.3",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "sass": "^1.77.5",
-    "serve": "^14.2.1",
     "tiny-glob": "0.2.9",
     "ts-jest": "^29.1.2",
     "ts-node": "^8.5.0",

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

@@ -1,4 +1,5 @@
-import { Message, View } from '@aws-amplify/ui-react';
+import { Flex, Message } from '@aws-amplify/ui-react';
+import { IconWarning, IconInfo } from '../Icons';
 
 interface CalloutProps {
   info?: boolean;
@@ -17,8 +18,18 @@ export const Callout = ({
       variation="filled"
       colorTheme={warning ? 'warning' : 'info'}
       backgroundColor={backgroundColor}
+      hasIcon={false}
     >
-      <View>{children}</View>
+      <Flex>
+        <div className="amplify-message__icon">
+          {warning ? (
+            <IconWarning aria-hidden={false} aria-label="Warning" />
+          ) : (
+            <IconInfo aria-hidden={false} aria-label="Important information" />
+          )}
+        </div>
+        <div className="amplify-message__content">{children}</div>
+      </Flex>
     </Message>
   );
 };

src/components/Callout/Callout.tsx

@@ -29,7 +29,6 @@ describe('Callout', () => {
     );
 
     const styles = getComputedStyle(ele.container.children[0]);
-    console.log(styles);
     expect(styles.backgroundColor).toBe('red');
   });
 });

src/components/Callout/__tests__/Callout.test.tsx

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