a11y- Use nested list for <h3> links within the table of contents (#7883)

---------
Co-authored-by: katiegoines <[email protected]>
Co-authored-by: Heather <[email protected]>

Author: 3 people

src/components/Layout/Layout.tsx

@@ -149,8 +149,15 @@ export const Layout = ({
 
     pageHeadings.forEach((node) => {
       const { innerText, id, localName } = node as HTMLElement;
-      if (innerText && id && (localName == 'h2' || localName == 'h3')) {
+      if (innerText && id && localName == 'h2') {
         headings.push({
+          linkText: innerText,
+          hash: id,
+          level: localName,
+          subheadings: []
+        });
+      } else if (innerText && id && localName == 'h3') {
+        headings[headings.length - 1].subheadings.push({
           linkText: innerText,
           hash: id,
           level: localName

src/components/TableOfContents/TableOfContents.tsx

@@ -4,6 +4,7 @@ export interface HeadingInterface {
   linkText: string;
   hash: string;
   level: string;
+  subheadings: Array<object>;
 }
 interface TableOfContents {
   headers?: HeadingInterface[];
@@ -21,20 +22,57 @@ export const TableOfContents = ({ headers }) => {
       )}
       <View as="ul" className="toc-list">
         {headers.map(({ linkText, hash, level }, index) => {
-          return (
-            <View
-              as="li"
-              className={`toc-item toc-item--${level}`}
-              key={`toc-${index}`}
-            >
-              <Link
-                href={`#${hash}`}
-                className={`toc-item__link toc-item__link--${level}`}
+          if (headers[index].subheadings?.length === 0) {
+            return (
+              <View
+                as="li"
+                className={`toc-item toc-item--${level}`}
+                key={`toc-${index}`}
               >
-                {linkText}
-              </Link>
-            </View>
-          );
+                <Link
+                  href={`#${hash}`}
+                  className={`toc-item__link toc-item__link--${level}`}
+                >
+                  {linkText}
+                </Link>
+              </View>
+            );
+          } else {
+            return (
+              <View
+                as="li"
+                className={`toc-item toc-item--${level}`}
+                key={`toc-${index}`}
+              >
+                <Link
+                  href={`#${hash}`}
+                  className={`toc-item__link toc-item__link--${level}`}
+                >
+                  {linkText}
+                </Link>
+                <View as="ul" className="toc-list">
+                  {headers[index].subheadings?.map(
+                    ({ linkText, hash, level }, index) => {
+                      return (
+                        <View
+                          as="li"
+                          className={`toc-item toc-item--${level}`}
+                          key={`toc-${index}`}
+                        >
+                          <Link
+                            href={`#${hash}`}
+                            className={`toc-item__link toc-item__link--${level}`}
+                          >
+                            {linkText}
+                          </Link>
+                        </View>
+                      );
+                    }
+                  )}
+                </View>
+              </View>
+            );
+          }
         })}
       </View>
     </Flex>

src/fragments/lib-v1/analytics/js/personalize.mdx

@@ -7,7 +7,7 @@ To record event data, you need the following:
 
 For more information, see [Record Events](https://docs.aws.amazon.com/personalize/latest/dg/recording-events.html).
 
-### Installation and Configuration
+## Installation and Configuration
 
 Register the *AmazonPersonalizeProvider* with the Analytics category:
 You need the tracking ID of your event tracker. For more information, see [Get a Tracking ID](https://docs.aws.amazon.com/personalize/latest/dg/recording-events.html#event-get-tracker).
@@ -38,7 +38,7 @@ Analytics.configure({
     }
 });
 ```
-### Working with the API
+## Working with the API
 
 You can use the `Identify` event type to track a user identity. This lets you connect a user to their actions and record traits about them. To identify a user, specify a unique identifier for the userId property.
  Consider the following user interactions when choosing when and how often to call record with the  Identify eventType:

src/fragments/lib-v1/auth/native_common/signin_next_steps/common.mdx

@@ -10,7 +10,7 @@ import flutter0 from '/src/fragments/lib-v1/auth/flutter/signin_next_steps/10_si
 
 <Fragments fragments={{ swift: ios0, flutter: flutter0 }} />
 
-### Confirm signin with SMS MFA
+## Confirm signin with SMS MFA
 
 import ios1 from '/src/fragments/lib-v1/auth/ios/signin_next_steps/20_confirm_sms_mfa.mdx';
 
@@ -19,62 +19,62 @@ import flutter1 from '/src/fragments/lib-v1/auth/flutter/signin_next_steps/20_co
 <Fragments fragments={{ swift: ios1, flutter: flutter1 }} />
 
 <InlineFilter filters={["flutter"]}>
-### Confirm signin with TOTP MFA
+## Confirm signin with TOTP MFA
 </InlineFilter>
 
 import flutter7 from '/src/fragments/lib-v1/auth/flutter/signin_next_steps/80_totp.mdx';
 
 <Fragments fragments={{ flutter: flutter7 }} />
 
 <InlineFilter filters={["flutter"]}>
-### Continue signin with MFA Selection
+## Continue signin with MFA Selection
 </InlineFilter>
 
 import flutter8 from '/src/fragments/lib-v1/auth/flutter/signin_next_steps/90_mfa_selection.mdx';
 
 <Fragments fragments={{ flutter: flutter8 }} />
 
 <InlineFilter filters={["flutter"]}>
-### Continue signin with TOTP Setup
+## Continue signin with TOTP Setup
 </InlineFilter>
 
 import flutter9 from '/src/fragments/lib-v1/auth/flutter/signin_next_steps/100_totp_setup.mdx';
 
 <Fragments fragments={{ flutter: flutter9 }} />
 
-### Confirm signin with custom challenge
+## Confirm signin with custom challenge
 
 import ios2 from '/src/fragments/lib-v1/auth/ios/signin_next_steps/30_confirm_custom_challenge.mdx';
 
 import flutter2 from '/src/fragments/lib-v1/auth/flutter/signin_next_steps/30_confirm_custom_challenge.mdx';
 
 <Fragments fragments={{ swift: ios2, flutter: flutter2 }} />
 
-### Confirm signin with new password
+## Confirm signin with new password
 
 import ios3 from '/src/fragments/lib-v1/auth/ios/signin_next_steps/40_confirm_new_password.mdx';
 
 import flutter3 from '/src/fragments/lib-v1/auth/flutter/signin_next_steps/40_confirm_new_password.mdx';
 
 <Fragments fragments={{ swift: ios3, flutter: flutter3 }} />
 
-### Reset password
+## Reset password
 
 import ios4 from '/src/fragments/lib-v1/auth/ios/signin_next_steps/50_reset_password.mdx';
 
 import flutter4 from '/src/fragments/lib-v1/auth/flutter/signin_next_steps/50_reset_password.mdx';
 
 <Fragments fragments={{ swift: ios4, flutter: flutter4 }} />
 
-### Confirm Signup
+## Confirm Signup
 
 import ios5 from '/src/fragments/lib-v1/auth/ios/signin_next_steps/60_confirm_signup.mdx';
 
 import flutter5 from '/src/fragments/lib-v1/auth/flutter/signin_next_steps/60_confirm_signup.mdx';
 
 <Fragments fragments={{ swift: ios5, flutter: flutter5 }} />
 
-### Done
+## Done
 
 import ios6 from '/src/fragments/lib-v1/auth/ios/signin_next_steps/70_done.mdx';
 

src/fragments/lib-v1/geo/android/escapehatch.mdx

@@ -51,7 +51,7 @@ Log.i("MyAmplifyApp", response.entries.toString())
 </Block>
 </BlockSwitcher>
 
-### Documentation Resources
+## Documentation Resources
 
 * [How to manage Amazon Location Service resources through console](https://docs.aws.amazon.com/location/latest/developerguide/welcome.html)
 

src/fragments/lib-v1/geo/ios/escapehatch.mdx

@@ -47,7 +47,7 @@ do {
 }
 ```
 
-### Documentation Resources
+## Documentation Resources
 
 * [How to manage Amazon Location Service resources through console](https://docs.aws.amazon.com/location/latest/developerguide/welcome.html)
 

src/fragments/lib-v1/in-app-messaging/integrate-your-application/integrate-your-application.mdx

@@ -16,7 +16,7 @@ import js1 from '/src/fragments/lib-v1/in-app-messaging/integrate-your-applicati
 
 <Fragments fragments={{  javascript: js1 , angular: js1, nextjs: js1, react: js1, vue: js1 }} />
 
-### Integrate In-App Messaging
+## Integrate In-App Messaging
 
 Amplify UI provides a Higher-Order Component for ease of integrating the In-App Messaging UI with your application. Simply wrap your application root component in, for example, `App.js`.
 

src/fragments/lib-v1/in-app-messaging/integrate-your-application/js/install-dependencies.mdx

@@ -1,6 +1,6 @@
 {/* TODO What should be done with this page for non-react frameworks */}
 
-### Install Amplify UI for React
+## Install Amplify UI for React
 
 import js0 from '/src/fragments/lib-v1/in-app-messaging/integrate-your-application/ui-integration.mdx';
 

src/fragments/lib-v1/in-app-messaging/integrate-your-application/react-native/configure-amplify.mdx

@@ -1,4 +1,4 @@
-### Configure Amplify
+## Configure Amplify
 
 import rn1 from '/src/fragments/lib-v1/common/react-native/import_configuration.mdx';
 

src/fragments/lib-v1/in-app-messaging/integrate-your-application/react-native/install-dependencies.mdx

@@ -2,7 +2,7 @@ import reactnative0 from '/src/fragments/lib-v1/react-native-polyfills.mdx';
 
 <Fragments fragments={{ 'react-native': reactnative0 }} />
 
-### Install Amplify UI for React Native and its dependencies
+## Install Amplify UI for React Native and its dependencies
 
 import reactnative1 from '/src/fragments/lib-v1/in-app-messaging/integrate-your-application/ui-integration.mdx';