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.
Karthikeyan Padaikathu committed
Dec 2, 2024 at 13:12 UTC
d86169f963e28cbbc525217f2c22c20935d73706
2 files changed
+5
-5
src/components/table-of-contents.js
+1
-1
@@ -76,7 +76,7 @@ export const Desktop = withTableOfContents(({items}) => (
76
maxHeight: `calc(100vh - ${SCROLL_MARGIN_TOP}px)`,
77
}}
78
>
79
- <Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold'}} id="toc-heading">
79
+ <Heading as="h2" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold'}} id="toc-heading">
80
Table of contents
81
</Heading>
82
<Box
src/mdx/components.js
+4
-4
@@ -125,10 +125,10 @@ const Headings = {
125
126
export const H1 = Headings.wrap('h1')
127
export const H2 = Headings.wrap('h2')
128
-export const H3 = Headings.wrap('h3')
129
-export const H4 = Headings.wrap('h4')
130
-export const H5 = Headings.wrap('h5')
131
-export const H6 = Headings.wrap('h6')
128
+export const H3 = Headings.wrap('h2')
129
+export const H4 = Headings.wrap('h3')
130
+export const H5 = Headings.wrap('h4')
131
+export const H6 = Headings.wrap('h5')
132
133
export const Blockquote = styled.blockquote`
134
margin: 0 0 ${themeGet('space.3')};