update with main

.github/workflows/check_for_broken_links.yml

@@ -32,7 +32,7 @@ jobs:
           role-to-assume: arn:aws:iam::464149486631:role/github_action_read_slack_webhook_url
           aws-region: us-west-2
       - name: Read secrets from AWS Secrets Manager into environment variables
-        uses: aws-actions/aws-secretsmanager-get-secrets@ff26a0aa6bd4dd5e51326b5afb3f5f6874c958c7 # v2.0.3
+        uses: aws-actions/aws-secretsmanager-get-secrets@98c2d6bf1dd67c2575fa2bb14294aa64103d426c # v2.0.5
         with:
           secret-ids: |
             SLACK_WEBHOOK_URL

.github/workflows/scripts/validate-redirects.js

@@ -0,0 +1,58 @@
+module.exports = {
+  invalidRedirects: () => {
+    const Ajv = require('ajv');
+    const redirects = require('../../../redirects.json');
+    const ajv = new Ajv();
+
+    const schema = {
+      type: 'array',
+      items: {
+        type: 'object',
+        required: ['source', 'target', 'status'],
+        properties: {
+          source: {
+            description: 'The address the user requested.',
+            type: 'string',
+            pattern: '^/'
+          },
+          target: {
+            description:
+              'The address that actually serves the content that the user sees',
+            type: 'string',
+            pattern: '^[(https)(/)]'
+          },
+          status: {
+            description:
+              'Types include a permanent redirect (301), a temporary redirect (302), a rewrite (200), or not found (404).',
+            type: 'string',
+            pattern: '^[0-5-]+$'
+          }
+        }
+      }
+    };
+
+    const errors = [];
+    const validate = ajv.compile(schema);
+
+    const validateEntries = (redirects) => {
+      const valid = validate(redirects);
+
+      if (!valid) {
+        const error = validate.errors[0];
+        const invalidEntry =
+          JSON.stringify(redirects[error.instancePath.slice(1, -7)]);
+        const loc = error.schemaPath.slice(error.schemaPath.indexOf('properties') + 11, -8);
+        const errorMessage = '\n\n' + 'INVALID ENTRY: Please correct the error in the "' + loc +'" property of the following entry: \n' + invalidEntry + '\n' + 'ERROR MESSAGE: ' + error.message;
+        errors.push(errorMessage);
+
+        validateEntries(redirects.splice(parseInt(error.instancePath.slice(1, -7)) + 1));
+
+      } 
+    }
+    validateEntries(redirects);
+
+    return errors;
+  }
+}
+
+

.github/workflows/validate_redirects.yml

@@ -0,0 +1,32 @@
+name: Validate Redirects
+on:
+  pull_request:
+    branches: [main]
+    types: [opened, synchronize]
+env:
+  BUILD_DIR: 'client/www/next-build'
+permissions:
+  contents: read
+jobs:
+  ValidateRedirects:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        with:
+          node-version: 20.x
+      - name: Install Dependencies
+        run: yarn
+      - name: Validate redirects
+        id: redirects
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        with:
+          result-encoding: string
+          script: |
+            const { invalidRedirects } = require('./.github/workflows/scripts/validate-redirects.js');
+            return await invalidRedirects();
+      - name: Fail if any invalid redirects have been found
+        if: ${{ steps.redirects.outputs.result }}
+        run: exit 1 && echo ${{ steps.redirects.outputs.result }}

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

cspell.json

@@ -532,10 +532,12 @@
     "Didfinishlaunchingwithoptions",
     "displayMode",
     "displayOrder",
+    "dists",
     "DocSet",
     "DocSets",
     "Donef",
     "Dont",
+    "dotenvx",
     "downcasting",
     "dropdown",
     "dynamoDB",
@@ -593,6 +595,7 @@
     "Figma",
     "Figma's",
     "figma",
+    "fileuploader",
     "architected",
     "newsfeeds",
     "textareas",
@@ -1242,7 +1245,6 @@
     "Storage.put",
     "storagebucketname",
     "storagedemo",
-    "storagemanager",
     "storageOptions",
     "storagepath",
     "StoragePath",
@@ -1394,6 +1396,7 @@
     "validationData",
     "vanillajs",
     "varchar",
+    "vendedlogs",
     "verify.js",
     "VerifyAuthChallengeResponse",
     "VeriSign",

package.json

@@ -9,9 +9,10 @@
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
-    "@aws-amplify/amplify-cli-core": "^4.3.8",
-    "@aws-amplify/ui-react": "^6.1.12",
+    "@aws-amplify/amplify-cli-core": "^4.3.9",
+    "@aws-amplify/ui-react": "^6.3.1",
     "@docsearch/react": "3",
+    "ajv": "^8.16.0",
     "aws-amplify": "^6.0.9",
     "next": "^14.2.3",
     "next-image-export-optimizer": "^1.8.3",
@@ -41,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",
@@ -74,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",
@@ -88,7 +88,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",

redirects.json

@@ -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"
 	},
 	{
@@ -3011,7 +3011,7 @@
 	},
 	{
 		"source": "/lib/client-configuration/configuring-amplify-categories/q/platform/react-native/",
-		"target": "react-native/tools/libraries/configure-categories/",
+		"target": "/react-native/tools/libraries/configure-categories/",
 		"status": "301"
 	},
 	{

src/components/Accordion/Accordion.tsx

@@ -69,10 +69,12 @@ export const Accordion: React.FC<AccordionProps> = ({
 
   const closeAccordion = () => {
     const details = detailsRef.current;
+    const summary = summaryRef.current;
     if (details) {
       const scrollToLoc = details.offsetTop - 48 - 70 - 10; // account for nav heights and 10px buffer
       setDetailsOpen(false);
       details.animate(collapse, animationTiming);
+      summary?.focus();
       window.scrollTo({
         left: 0,
         top: scrollToLoc,

src/components/Accordion/__tests__/Accordion.test.tsx

@@ -65,11 +65,13 @@ describe('Accordion', () => {
     });
   });
 
-  it('should collapse Accordion when close button is clicked', async () => {
+  it('should collapse Accordion and refocus on Accordion element when close button is clicked', async () => {
     render(component);
     const accordionHeading = screen.getByText('Accordion component example');
     userEvent.click(accordionHeading);
     const detailsEl = await screen.getByRole('group');
+    const summaryEl = detailsEl.firstChild;
+
     expect(detailsEl).toHaveAttribute('open');
 
     const text = await screen.getByText(content);
@@ -79,6 +81,7 @@ describe('Accordion', () => {
     await waitFor(() => {
       expect(text).not.toBeVisible();
       expect(detailsEl).not.toHaveAttribute('open');
+      expect(summaryEl).toHaveFocus();
     });
   });
 

src/components/Callout/Callout.tsx

@@ -1,15 +1,35 @@
-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;
   warning?: boolean;
+  backgroundColor?: string;
   children?: React.ReactNode;
 }
 
-export const Callout = ({ warning, children }: CalloutProps) => {
+export const Callout = ({
+  warning,
+  backgroundColor,
+  children
+}: CalloutProps) => {
   return (
-    <Message variation="filled" colorTheme={warning ? 'warning' : 'info'}>
-      <View>{children}</View>
+    <Message
+      variation="filled"
+      colorTheme={warning ? 'warning' : 'info'}
+      backgroundColor={backgroundColor}
+      hasIcon={false}
+    >
+      <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/__tests__/Callout.test.tsx

@@ -19,4 +19,16 @@ describe('Callout', () => {
 
     consoleErrorFn.mockRestore();
   });
+
+  it('should pass the backgroundColor through to the Message component', async () => {
+    const child = <div>Callout Child</div>;
+    const ele = render(
+      <Callout info={true} backgroundColor={'red'}>
+        {child}
+      </Callout>
+    );
+
+    const styles = getComputedStyle(ele.container.children[0]);
+    expect(styles.backgroundColor).toBe('red');
+  });
 });

src/components/ExternalLink/__tests__/ExternalLink.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/index.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/ExternalLinkButton/ExternalLinkButton.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>