SONAR-11314 don't use h2 in embedded docs nav bar

5 files changed, 36 insertions, 35 deletions

diff --git a/server/sonar-docs/src/layouts/components/CategoryLink.js b/server/sonar-docs/src/layouts/components/CategoryLink.js
index 12e51b570ae..7e6e9e7b227 100644
--- a/server/sonar-docs/src/layouts/components/CategoryLink.js
+++ b/server/sonar-docs/src/layouts/components/CategoryLink.js
@@ -44,18 +44,22 @@ export default class CategoryLink extends React.PureComponent {
     const isCurrentPage = location.pathname === prefix + url;
     return (
       <div>
-        <h2 className={isCurrentPage || open ? 'active' : ''}>
-          {node ? (
-            <Link to={url} title={node.frontmatter.title}>
-              {node.frontmatter.title}
-            </Link>
-          ) : (
-            <a href="#" onClick={this.toggle}>
-              {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
-              {title}
-            </a>
-          )}
-        </h2>
+        {node ? (
+          <Link
+            className={isCurrentPage || open ? 'page-indexes-link active' : 'page-indexes-link'}
+            to={url}
+            title={node.frontmatter.title}>
+            {node.frontmatter.title}
+          </Link>
+        ) : (
+          <a
+            className={isCurrentPage || open ? 'page-indexes-link active' : 'page-indexes-link'}
+            href="#"
+            onClick={this.toggle}>
+            {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+            {title}
+          </a>
+        )}
         {isCurrentPage && <HeadingsLink headers={headers} />}
         {children &&
           open && (
diff --git a/server/sonar-docs/src/layouts/components/ExternalLink.js b/server/sonar-docs/src/layouts/components/ExternalLink.js
index 516f1d05951..e6a02b9196c 100644
--- a/server/sonar-docs/src/layouts/components/ExternalLink.js
+++ b/server/sonar-docs/src/layouts/components/ExternalLink.js
@@ -22,13 +22,9 @@ import DetachIcon from './icons/DetachIcon';
 
 export function ExternalLink({ external, title }) {
   return (
-    <div>
-      <h2>
-        <a href={external} target="_blank">
-          <DetachIcon />
-          {title}
-        </a>
-      </h2>
-    </div>
+    <a className="page-indexes-link" href={external} rel="noopener noreferrer" target="_blank">
+      <DetachIcon />
+      {title}
+    </a>
   );
 }
diff --git a/server/sonar-docs/src/layouts/components/Sidebar.js b/server/sonar-docs/src/layouts/components/Sidebar.js
index e6a7fa1408e..eec894ba5f1 100644
--- a/server/sonar-docs/src/layouts/components/Sidebar.js
+++ b/server/sonar-docs/src/layouts/components/Sidebar.js
@@ -76,7 +76,7 @@ export default class Sidebar extends React.PureComponent {
   };
 
   renderCategories = tree => {
-    return tree.map(item => {
+    const items = tree.map(item => {
       if (typeof item === 'object') {
         if (item.children) {
           return (
@@ -103,6 +103,7 @@ export default class Sidebar extends React.PureComponent {
         />
       );
     });
+    return <nav>{items}</nav>;
   };
 
   renderResults = () => {
diff --git a/server/sonar-docs/src/layouts/components/SubpageLink.js b/server/sonar-docs/src/layouts/components/SubpageLink.js
index 1d4746fb73f..163f6cd2dc2 100644
--- a/server/sonar-docs/src/layouts/components/SubpageLink.js
+++ b/server/sonar-docs/src/layouts/components/SubpageLink.js
@@ -24,11 +24,11 @@ import HeadingsLink from './HeadingsLink';
 export default function SubpageLink({ node, headers, displayHeading }) {
   return (
     <div>
-      <h3>
-        <Link className={displayHeading ? 'active' : ''} to={node.fields.slug}>
-          {node.frontmatter.title}
-        </Link>
-      </h3>
+      <Link
+        className={displayHeading ? 'sub-menu-link active' : 'sub-menu-link'}
+        to={node.fields.slug}>
+        {node.frontmatter.title}
+      </Link>
       {displayHeading && <HeadingsLink headers={headers} />}
     </div>
   );
diff --git a/server/sonar-docs/src/templates/page.css b/server/sonar-docs/src/templates/page.css
index 09c716aa2fe..8c4e816d6cc 100644
--- a/server/sonar-docs/src/templates/page.css
+++ b/server/sonar-docs/src/templates/page.css
@@ -228,7 +228,7 @@ a.search-result .note {
   margin: 0 -4px 0 4px;
 }
 
-.page-indexes h2 {
+.page-indexes-link {
   color: #2d3032;
   font-size: 16px;
   font-weight: bold;
@@ -240,22 +240,22 @@ a.search-result .note {
   transition: all 0.2s ease;
 }
 
-.page-indexes h2:hover {
+.page-indexes-link:hover {
   background-color: #e8eff5;
 }
 
-.page-indexes h2.active {
+.page-indexes-link.active {
   color: #2679af;
 }
 
-.page-indexes h2 a,
-.page-indexes h3 a {
+.page-indexes-link,
+.sub-menu-link {
   color: inherit;
   text-decoration: inherit;
   display: block;
 }
 
-.page-indexes h2 svg {
+.page-indexes-link svg {
   float: right;
   transform: translateY(9px);
 }
@@ -264,14 +264,14 @@ a.search-result .note {
   padding: 0 0 10px 22px;
 }
 
-.sub-menu h3 {
+.sub-menu-link {
   font-size: 14px;
   line-height: 26px;
   margin: 0;
 }
 
-.sub-menu a:hover,
-.sub-menu a.active {
+.sub-menu-link:hover,
+.sub-menu-link.active {
   color: #2679af;
 }