From d86169f963e28cbbc525217f2c22c20935d73706 Mon Sep 17 00:00:00 2001
From: Karthikeyan Padaikathu <141762547+kartykp@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:12:02 -0800
Subject: [PATCH] fix: tag heading levels properly (#1374)

This pull request includes updates to the heading levels in the table of
contents and MDX components to ensure consistency and improve
accessibility.

Changes to heading levels:

*
[`src/components/table-of-contents.js`](diffhunk://#diff-bd59de7c368e7b6e065bc8d893ae0400197c0a3bcb7d2e22a58fdc97e2abc9dbL79-R79):
Changed the heading level from `h3` to `h2` for the "Table of contents"
heading to improve accessibility and consistency.
*
[`src/mdx/components.js`](diffhunk://#diff-d4d36da21aca0163a287721a4d65a9cb75e8f1da88ba43b373dff9ad0fb81dc7L127-R130):
Updated the heading levels in the `Headings` component to ensure that
`H3` wraps `h2`, `H4` wraps `h3`, `H5` wraps `h4`, and `H6` wraps `h5`
to maintain a proper heading hierarchy.
---
 src/components/table-of-contents.js | 2 +-
 src/mdx/components.js               | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/table-of-contents.js b/src/components/table-of-contents.js
index 7cb42e94b0d..d8abb5972c5 100644
--- a/src/components/table-of-contents.js
+++ b/src/components/table-of-contents.js
@@ -76,7 +76,7 @@ export const Desktop = withTableOfContents(({items}) => (
       maxHeight: `calc(100vh - ${SCROLL_MARGIN_TOP}px)`,
     }}
   >
-    <Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold'}} id="toc-heading">
+    <Heading as="h2" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold'}} id="toc-heading">
       Table of contents
     </Heading>
     <Box
diff --git a/src/mdx/components.js b/src/mdx/components.js
index 99c52b1a3fe..d7efb42e1a3 100644
--- a/src/mdx/components.js
+++ b/src/mdx/components.js
@@ -125,10 +125,10 @@ const Headings = {
 
 export const H1 = Headings.wrap('h1')
 export const H2 = Headings.wrap('h2')
-export const H3 = Headings.wrap('h3')
-export const H4 = Headings.wrap('h4')
-export const H5 = Headings.wrap('h5')
-export const H6 = Headings.wrap('h6')
+export const H3 = Headings.wrap('h2')
+export const H4 = Headings.wrap('h3')
+export const H5 = Headings.wrap('h4')
+export const H6 = Headings.wrap('h5')
 
 export const Blockquote = styled.blockquote`
   margin: 0 0 ${themeGet('space.3')};