Merge branch 'main' of github.com:aws-amplify/docs

Author: chrisbonifacio

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

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

public/images/gen2/fullstack-branching/monorepo.png

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

public/images/gen2/manage/data-manager.mp4

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

public/images/gen2/manage/storage-manager.mp4

@@ -3,12 +3,21 @@ import { Message, View } from '@aws-amplify/ui-react';
 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'}>
+    <Message
+      variation="filled"
+      colorTheme={warning ? 'warning' : 'info'}
+      backgroundColor={backgroundColor}
+    >
       <View>{children}</View>
     </Message>
   );