fix(platform): Replace incorrect usage of <h6>

We use this quite a lot to just generically mean "heading", but this is incorrect - a h6 has to be structure below a h5, not just randomly. This PR changes this to use a different heading that makes more sense or just a div+class instead. Nothing should change visually.

Author: mydea

src/components/dynamicNav.tsx

@@ -171,12 +171,12 @@ export function DynamicNav({
         activeClassName="active"
         data-sidebar-link
       >
-        <h6>{title}</h6>
+        <strong>{title}</strong>
         {withChevron && <NavChevron direction={isActive ? 'down' : 'right'} />}
       </SmartLink>
     ) : (
       <div className={headerClassName} data-sidebar-link>
-        <h6>{title}</h6>
+        <strong>{title}</strong>
       </div>
     );
 

src/components/guideGrid.tsx

@@ -27,9 +27,9 @@ export function GuideGrid({platform, className}: Props) {
 
   return (
     <Fragment>
-      <div className="doc-toc-title">
-        <h6>Related Guides</h6>
-      </div>
+      <h2>
+        Related Guides
+      </h2>
       <ul className={className}>
         {currentPlatform.guides.map(guide => (
           <li key={guide.key}>

src/components/search/index.tsx

@@ -345,10 +345,10 @@ export function Search({
             >
               <MagicIcon className="size-6 text-[var(--sgs-color-hit-highlight)] flex-shrink-0" />
               <div className={styles['sgs-ai-button-content']}>
-                <h6>
+                <div className={styles['sgs-ai-button-heading']}>
                   Ask Sentry about{' '}
                   <span>{query.length > 30 ? query.slice(0, 30) + '...' : query}</span>
-                </h6>
+                </div>
                 <div className={styles['sgs-ai-hint']}>
                   Get an AI-powered answer to your question
                 </div>

src/components/search/search.module.scss

@@ -170,13 +170,6 @@
     padding: 0;
   }
 
-  h6 {
-    margin-top: 0;
-    margin-bottom: 0.25rem;
-    font-size: 0.875rem;
-    color: var(--sgs-color-hit-text);
-  }
-
   a {
     display: block;
     text-decoration: none;
@@ -192,6 +185,12 @@
   }
 }
 
+.sgs-hit-title {
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--sgs-color-hit-text);
+}
+
 .sgs-ai {
   color: var(--sgs-color-hit-text);
   padding: 0.25rem;
@@ -214,15 +213,17 @@
       flex-direction: column;
       align-items: flex-start;
       flex: 1;
+    }
 
-      h6 {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        margin: 0;
+    &-heading {
+      margin-bottom: 0.25rem;
+      font-size: 0.875rem;
+      color: var(--sgs-color-hit-text);
+      line-height: 1.25rem;
+      margin: 0;
 
-        span {
-          color: var(--sgs-color-hit-highlight);
-        }
+      span {
+        color: var(--sgs-color-hit-highlight);
       }
     }
   }

src/components/search/searchResultItems.tsx

@@ -67,15 +67,15 @@ export function SearchResultItems({
                     onClick={event => onSearchResultClick({event, hit, position: index})}
                   >
                     {hit.title && (
-                      <h6>
+                      <div className={styles['sgs-hit-title']}>
                         <span
                           dangerouslySetInnerHTML={{
                             __html: DOMPurify.sanitize(hit.title, {
                               ALLOWED_TAGS: ['mark'],
                             }),
                           }}
                         />
-                      </h6>
+                      </div>
                     )}
                     {hit.text && (
                       <span

src/components/sidebar/defaultSidebar.tsx

@@ -49,7 +49,9 @@ export function DefaultSidebar({node, path}: DefaultSidebarProps) {
             data-sidebar-link
             key={node.path}
           >
-            <h6>{node.frontmatter.sidebar_title || node.frontmatter.title}</h6>
+            <div className={styles['sidebar-link-heading']}>
+              {node.frontmatter.sidebar_title || node.frontmatter.title}
+            </div>
           </Link>
           {renderChildren(node.children)}
         </Fragment>

src/components/sidebar/platformSidebar.tsx

@@ -53,7 +53,6 @@ export function PlatformSidebar({
         title={`Sentry for ${(guide || platform).title}`}
         exclude={[`/${pathRoot}/guides/`]}
         headerClassName={headerClassName}
-        withChevron
       />
     </ul>
   );

src/components/sidebar/style.module.scss

@@ -128,12 +128,13 @@
   &.active {
     background-color: var(--brandDecoration);
 
-    h6 {
+   strong {
       color: #fff;
     }
   }
 
-  h6 {
+  strong {
+    display: block;
     margin-bottom: 0;
     font-size: 0.8rem;
     text-transform: uppercase;

src/components/sidebarTableOfContents/index.tsx

@@ -188,11 +188,7 @@ export function SidebarTableOfContents() {
 
   return (
     <div className={styles['doc-toc']}>
-      {!!tocItems.length && (
-        <div className={styles['doc-toc-title']}>
-          <h6>On this page</h6>
-        </div>
-      )}
+      {!!tocItems.length && <h2 className={styles['doc-toc-title']}>On this page</h2>}
       <ul className={styles['section-nav']}>{recursiveRender(buildTocTree(tocItems))}</ul>
     </div>
   );

src/components/sidebarTableOfContents/style.module.scss

@@ -83,12 +83,8 @@
 .doc-toc-title {
   font-weight: 500;
   margin-bottom: 0.25rem;
-
-  h6 {
-    margin-bottom: 0;
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 0.2px;
-    color: inherit;
-  }
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.2px;
+  color: inherit;
 }