SONAR-16703 [891618] Visual heading text is not marked as heading

14 files changed, 62 insertions, 91 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx b/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx
index f96ee9b78d0..d00315089d1 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx
@@ -26,12 +26,12 @@ import { getComponentOverviewUrl } from '../../../../helpers/urls';
 import { BranchLike } from '../../../../types/branch-like';
 import { Component } from '../../../../types/types';
 
-interface Props {
+export interface BreadcrumbProps {
   component: Component;
   currentBranchLike: BranchLike | undefined;
 }
 
-export function Breadcrumb(props: Props) {
+export function Breadcrumb(props: BreadcrumbProps) {
   const {
     component: { breadcrumbs },
     currentBranchLike
@@ -51,16 +51,18 @@ export function Breadcrumb(props: Props) {
               <QualifierIcon className="spacer-right" qualifier={lastBreadcrumbElement.qualifier} />
             )}
             {isNoMainBranch || isNotLast ? (
-              <Link
-                className="link-no-underline text-ellipsis"
-                title={breadcrumbElement.name}
-                to={getComponentOverviewUrl(breadcrumbElement.key, breadcrumbElement.qualifier)}>
-                {breadcrumbElement.name}
-              </Link>
+              <h1>
+                <Link
+                  className="link-no-underline text-ellipsis"
+                  title={breadcrumbElement.name}
+                  to={getComponentOverviewUrl(breadcrumbElement.key, breadcrumbElement.qualifier)}>
+                  {breadcrumbElement.name}
+                </Link>
+              </h1>
             ) : (
-              <span className="text-ellipsis" title={breadcrumbElement.name}>
+              <h1 className="text-ellipsis" title={breadcrumbElement.name}>
                 {breadcrumbElement.name}
-              </span>
+              </h1>
             )}
             {isNotLast && <span className="slash-separator" />}
           </span>
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/Breadcrumb-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/Breadcrumb-test.tsx
index d745c37d74c..4d67b48719c 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/Breadcrumb-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/Breadcrumb-test.tsx
@@ -17,36 +17,44 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { shallow } from 'enzyme';
+import { screen } from '@testing-library/react';
 import * as React from 'react';
-import { mockMainBranch } from '../../../../../helpers/mocks/branch-like';
+import { mockBranch, mockMainBranch } from '../../../../../helpers/mocks/branch-like';
 import { mockComponent } from '../../../../../helpers/mocks/component';
+import { renderComponent } from '../../../../../helpers/testReactTestingUtils';
 import { ComponentQualifier } from '../../../../../types/component';
-import { Breadcrumb } from '../Breadcrumb';
+import { Breadcrumb, BreadcrumbProps } from '../Breadcrumb';
 
 it('should render correctly', () => {
-  const wrapper = shallowRender();
-  expect(wrapper).toMatchSnapshot();
+  renderBreadcrumb();
+  expect(screen.getByRole('link', { name: 'Parent portfolio' })).toBeInTheDocument();
+  expect(screen.getByRole('heading', { name: 'Child portfolio' })).toBeInTheDocument();
 });
 
-function shallowRender() {
-  return shallow(
+it('should render correctly when not on a main branch', () => {
+  renderBreadcrumb({ currentBranchLike: mockBranch() });
+  expect(screen.getByRole('link', { name: 'Child portfolio' })).toBeInTheDocument();
+});
+
+function renderBreadcrumb(props: Partial<BreadcrumbProps> = {}) {
+  return renderComponent(
     <Breadcrumb
       component={mockComponent({
         breadcrumbs: [
           {
             key: 'parent-portfolio',
-            name: 'parent-portfolio',
+            name: 'Parent portfolio',
             qualifier: ComponentQualifier.Portfolio
           },
           {
             key: 'child-portfolio',
-            name: 'child-portfolio',
+            name: 'Child portfolio',
             qualifier: ComponentQualifier.SubPortfolio
           }
         ]
       })}
       currentBranchLike={mockMainBranch()}
+      {...props}
     />
   );
 }
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Breadcrumb-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Breadcrumb-test.tsx.snap
deleted file mode 100644
index e78e2c5452a..00000000000
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Breadcrumb-test.tsx.snap
+++ /dev/null
@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<div
-  className="big flex-shrink display-flex-center"
->
-  <span
-    className="flex-shrink display-flex-center"
-    key="parent-portfolio"
-  >
-    <QualifierIcon
-      className="spacer-right"
-      qualifier="SVW"
-    />
-    <Link
-      className="link-no-underline text-ellipsis"
-      title="parent-portfolio"
-      to={
-        Object {
-          "pathname": "/portfolio",
-          "search": "?id=parent-portfolio",
-        }
-      }
-    >
-      parent-portfolio
-    </Link>
-    <span
-      className="slash-separator"
-    />
-  </span>
-  <span
-    className="flex-shrink display-flex-center"
-    key="child-portfolio"
-  >
-    <span
-      className="text-ellipsis"
-      title="child-portfolio"
-    >
-      child-portfolio
-    </span>
-  </span>
-</div>
-`;
diff --git a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
index 2370fa05b45..f08f088b801 100644
--- a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
@@ -113,9 +113,9 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender
     <>
       {selectedTutorial === undefined && (
         <>
-          <h1 className="spacer-top huge-spacer-bottom">
+          <h2 className="spacer-top huge-spacer-bottom">
             {translate('onboarding.tutorial.choose_method')}
-          </h1>
+          </h2>
 
           <div className="tutorial-selection">
             <p className="big-spacer-bottom">
diff --git a/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
index 28cd916f7a1..0b023b704df 100644
--- a/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`should render correctly for azure 1`] = `
 <Fragment>
-  <h1
+  <h2
     className="spacer-top huge-spacer-bottom"
   >
     onboarding.tutorial.choose_method
-  </h1>
+  </h2>
   <div
     className="tutorial-selection"
   >
@@ -78,11 +78,11 @@ exports[`should render correctly for azure 1`] = `
 
 exports[`should render correctly for bitbucket server 1`] = `
 <Fragment>
-  <h1
+  <h2
     className="spacer-top huge-spacer-bottom"
   >
     onboarding.tutorial.choose_method
-  </h1>
+  </h2>
   <div
     className="tutorial-selection"
   >
@@ -154,11 +154,11 @@ exports[`should render correctly for bitbucket server 1`] = `
 
 exports[`should render correctly for github 1`] = `
 <Fragment>
-  <h1
+  <h2
     className="spacer-top huge-spacer-bottom"
   >
     onboarding.tutorial.choose_method
-  </h1>
+  </h2>
   <div
     className="tutorial-selection"
   >
@@ -263,11 +263,11 @@ exports[`should render correctly for github 1`] = `
 
 exports[`should render correctly for gitlab 1`] = `
 <Fragment>
-  <h1
+  <h2
     className="spacer-top huge-spacer-bottom"
   >
     onboarding.tutorial.choose_method
-  </h1>
+  </h2>
   <div
     className="tutorial-selection"
   >
@@ -590,11 +590,11 @@ exports[`should render correctly: manual tutorial 1`] = `
 
 exports[`should render correctly: selection 1`] = `
 <Fragment>
-  <h1
+  <h2
     className="spacer-top huge-spacer-bottom"
   >
     onboarding.tutorial.choose_method
-  </h1>
+  </h2>
   <div
     className="tutorial-selection"
   >
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
index c42e621e248..5f07e2347aa 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
@@ -91,9 +91,9 @@ export default function AzurePipelinesTutorial(props: AzurePipelinesTutorialProp
   return (
     <>
       <div className="page-header big-spacer-bottom">
-        <h1 className="page-title">
+        <h2 className="page-title">
           {translate('onboarding.tutorial.with.azure_pipelines.title')}
-        </h1>
+        </h2>
       </div>
 
       {steps.map((step, i) => (
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/AzurePipelinesTutorial-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/AzurePipelinesTutorial-test.tsx.snap
index f1f1573b62e..c180cb824f8 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/AzurePipelinesTutorial-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/AzurePipelinesTutorial-test.tsx.snap
@@ -5,11 +5,11 @@ exports[`should render correctly 1`] = `
   <div
     className="page-header big-spacer-bottom"
   >
-    <h1
+    <h2
       className="page-title"
     >
       onboarding.tutorial.with.azure_pipelines.title
-    </h1>
+    </h2>
   </div>
   <Step
     finished={false}
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx
index faf5190efd7..d1c7291d9b3 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx
@@ -51,7 +51,7 @@ export default function GitLabCITutorial(props: GitLabCITutorialProps) {
   return (
     <>
       <div className="page-header big-spacer-bottom">
-        <h1 className="page-title">{translate('onboarding.tutorial.with.gitlab_ci.title')}</h1>
+        <h2 className="page-title">{translate('onboarding.tutorial.with.gitlab_ci.title')}</h2>
       </div>
 
       <ProjectKeyStep
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/GitLabCITutorial-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/GitLabCITutorial-test.tsx.snap
index d9fa3955af6..fdadfc1aa7e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/GitLabCITutorial-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/GitLabCITutorial-test.tsx.snap
@@ -5,11 +5,11 @@ exports[`should render correctly 1`] = `
   <div
     className="page-header big-spacer-bottom"
   >
-    <h1
+    <h2
       className="page-title"
     >
       onboarding.tutorial.with.gitlab_ci.title
-    </h1>
+    </h2>
   </div>
   <withCLanguageFeature(ProjectKeyStep)
     component={
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsTutorial.tsx
index c0aee40c051..7b667b24e22 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsTutorial.tsx
@@ -69,7 +69,7 @@ export function JenkinsTutorial(props: JenkinsTutorialProps) {
   return (
     <>
       <div className="page-header big-spacer-bottom">
-        <h1 className="page-title">{translate('onboarding.tutorial.with.jenkins.title')}</h1>
+        <h2 className="page-title">{translate('onboarding.tutorial.with.jenkins.title')}</h2>
       </div>
 
       {hasSelectAlmStep && (
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsTutorial-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsTutorial-test.tsx.snap
index 7c2907baa6c..925ce8e6375 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsTutorial-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsTutorial-test.tsx.snap
@@ -5,11 +5,11 @@ exports[`should render correctly: branches not enabled 1`] = `
   <div
     className="page-header big-spacer-bottom"
   >
-    <h1
+    <h2
       className="page-title"
     >
       onboarding.tutorial.with.jenkins.title
-    </h1>
+    </h2>
   </div>
   <PreRequisitesStep
     alm="bitbucket"
@@ -86,11 +86,11 @@ exports[`should render correctly: default 1`] = `
   <div
     className="page-header big-spacer-bottom"
   >
-    <h1
+    <h2
       className="page-title"
     >
       onboarding.tutorial.with.jenkins.title
-    </h1>
+    </h2>
   </div>
   <PreRequisitesStep
     alm="bitbucket"
@@ -176,11 +176,11 @@ exports[`should render correctly: no project binding 1`] = `
   <div
     className="page-header big-spacer-bottom"
   >
-    <h1
+    <h2
       className="page-title"
     >
       onboarding.tutorial.with.jenkins.title
-    </h1>
+    </h2>
   </div>
   <SelectAlmStep
     onCheck={[Function]}
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx
index 171a395ac91..3e792e8edc3 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx
@@ -60,7 +60,7 @@ export default class OtherTutorial extends React.PureComponent<Props, State> {
     return (
       <>
         <div className="page-header big-spacer-bottom">
-          <h1 className="page-title">{translate('onboarding.project_analysis.header')}</h1>
+          <h2 className="page-title">{translate('onboarding.project_analysis.header')}</h2>
           <p className="page-description">
             <InstanceMessage message={translate('onboarding.project_analysis.description')} />
           </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/__tests__/__snapshots__/OtherTutorial-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/other/__tests__/__snapshots__/OtherTutorial-test.tsx.snap
index 39298e06e95..cdec8d32ea8 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/__tests__/__snapshots__/OtherTutorial-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/other/__tests__/__snapshots__/OtherTutorial-test.tsx.snap
@@ -5,11 +5,11 @@ exports[`renders correctly: default 1`] = `
   <div
     className="page-header big-spacer-bottom"
   >
-    <h1
+    <h2
       className="page-title"
     >
       onboarding.project_analysis.header
-    </h1>
+    </h2>
     <p
       className="page-description"
     >
diff --git a/server/sonar-web/src/main/js/components/ui/NavBar.css b/server/sonar-web/src/main/js/components/ui/NavBar.css
index fc0de133378..1259a60d338 100644
--- a/server/sonar-web/src/main/js/components/ui/NavBar.css
+++ b/server/sonar-web/src/main/js/components/ui/NavBar.css
@@ -29,6 +29,10 @@
   right: 0;
 }
 
+.navbar-inner h1 {
+  line-height: inherit;
+}
+
 .navbar-inner > div {
   position: relative;
   min-width: var(--minPageWidth);