a11y- Use nested list for <h3> links within the table of contents

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';
 

src/fragments/lib-v1/push-notifications/common/receive-device-token.mdx

@@ -1,6 +1,6 @@
 Push notifications are delivered to your user's devices through a device token which uniquely identifies your app. Although Amplify will automatically register this token with Amazon Pinpoint, it can still be useful to have access to this token for your app's use cases (e.g. to send direct notifications to a specific device).
 
-### onTokenReceived
+## onTokenReceived
 
 Add `onTokenReceived` listeners to respond to a token being received by your app.
 

src/fragments/lib-v1/react-native-polyfills.mdx

@@ -1,4 +1,4 @@
-### Install Amplify and its dependencies
+## Install Amplify and its dependencies
 
 ```bash
 npm install aws-amplify@^5 amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill

src/fragments/lib-v1/storage/android/download.mdx

@@ -1,4 +1,4 @@
-### Download to file
+## Download to file
 
 If you uploaded the data using the key `ExampleKey`, you can retrieve the data using `Amplify.Storage.downloadFile`.
 

src/fragments/lib-v1/storage/ios/download.mdx

@@ -1,6 +1,6 @@
 There are three ways of getting data that was previously uploaded:
 
-### Download data
+## Download data
 
 You can download to in-memory buffer [Data](https://developer.apple.com/documentation/foundation/data) object with `Amplify.Storage.downloadData`:
 
@@ -46,7 +46,7 @@ receiveValue: { data in
 
 </BlockSwitcher>
 
-### Download to file
+## Download to file
 
 You can download to a file [URL](https://developer.apple.com/documentation/foundation/url) with `Amplify.Storage.downloadFile`:
 

src/fragments/lib-v1/storage/js/autotrack.mdx

@@ -8,13 +8,13 @@ You can enable automatic tracking of Storage Events such as uploads and download
   the event, e.g. *Storage {'>'} Method {'>'} Put*.
 </Callout>
 
-### Track all the Storage events
+## Track all the Storage events
 
 ```javascript
 Storage.configure({ track: true });
 ```
 
-### Track a specific storage action
+## Track a specific storage action
 
 ```javascript
 Storage.get('welcome.png', { track: true });

src/fragments/lib/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
 
 After creating the Amazon Personalize dataset group, you need to add the `personalize:PutEvents` permission to your Amplify IAM user roles.
 
@@ -49,7 +49,7 @@ Amplify.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/auth/android/signin_next_steps/80_current_user.mdx

@@ -1,4 +1,4 @@
-### Get Current User
+## Get Current User
 
 This call fetches the current logged in user and should be used after a user has been successfully signed in.
 If the user is signed in, it will return the current userId and username.

src/fragments/lib/auth/flutter/access_credentials/10_fetchAuthSession.mdx

@@ -11,7 +11,7 @@ Future<void> fetchAuthSession() async {
 }
 ```
 
-### Retrieving AWS credentials
+## Retrieving AWS credentials
 
 Sometimes it can be helpful to retrieve the instance of the underlying plugin
 which has more specific typing. In the case of Cognito, calling `fetchAuthSession`