Merge branch 'main' of github.com:ykethan/docs into console-manager-pages

Author: ykethan

.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

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

@@ -537,6 +537,7 @@
     "DocSets",
     "Donef",
     "Dont",
+    "dotenvx",
     "downcasting",
     "dropdown",
     "dynamoDB",

package.json

@@ -9,7 +9,7 @@
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
-    "@aws-amplify/amplify-cli-core": "^4.3.8",
+    "@aws-amplify/amplify-cli-core": "^4.3.9",
     "@aws-amplify/ui-react": "^6.1.12",
     "@docsearch/react": "3",
     "ajv": "^8.16.0",
@@ -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",

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

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

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

@@ -19,4 +19,17 @@ 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]);
+    console.log(styles);
+    expect(styles.backgroundColor).toBe('red');
+  });
 });

src/components/Feedback/index.tsx

@@ -189,7 +189,12 @@ const Feedback = function Feedback(router) {
 
   return (
     <Flex className="feedback" key={router?.router?.asPath}>
-      <div id="start-state" aria-labelledby="feedbackGroupTitle" role="group">
+      <div
+        id="start-state"
+        aria-labelledby="feedbackGroupTitle"
+        role="group"
+        aria-live="polite"
+      >
         <Text className="feedback-text" id="feedbackGroupTitle">
           {c.feedbackQuestion}
         </Text>

src/components/Gen1Banner/Gen1Banner.tsx

@@ -0,0 +1,20 @@
+import { Callout } from '@/components/Callout';
+import Link from 'next/link';
+import classNames from 'classnames';
+
+export const Gen1Banner = ({ currentPlatform }) => {
+  return (
+    <Callout backgroundColor="background.error">
+      For new Amplify apps, we recommend using Amplify Gen 2. You can learn more
+      in our{' '}
+      <Link
+        href={`/${currentPlatform}/start/quickstart`}
+        passHref
+        className={classNames('amplify-link')}
+      >
+        Gen 2 Docs
+      </Link>
+      .
+    </Callout>
+  );
+};