SONAR-18381 Improve landmark and heading level

38 files changed, 127 insertions, 118 deletions

diff --git a/server/sonar-web/src/main/js/app/components/ProjectAdminContainer.tsx b/server/sonar-web/src/main/js/app/components/ProjectAdminContainer.tsx
index e25fe8c69b0..5d1ded1dc5b 100644
--- a/server/sonar-web/src/main/js/app/components/ProjectAdminContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/ProjectAdminContainer.tsx
@@ -54,10 +54,10 @@ export class ProjectAdminContainer extends React.PureComponent<Props> {
     }
 
     return (
-      <>
+      <main>
         <A11ySkipTarget anchor="admin_main" />
         <Outlet />
-      </>
+      </main>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ProjectAdminContainer-test.tsx.snap b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ProjectAdminContainer-test.tsx.snap
index c3f74fb0aa7..0d01829fb3b 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ProjectAdminContainer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ProjectAdminContainer-test.tsx.snap
@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<Fragment>
+<main>
   <A11ySkipTarget
     anchor="admin_main"
   />
   <Outlet />
-</Fragment>
+</main>
 `;
diff --git a/server/sonar-web/src/main/js/apps/account/Account.tsx b/server/sonar-web/src/main/js/apps/account/Account.tsx
index 56528dc90c0..89c44b98f9a 100644
--- a/server/sonar-web/src/main/js/apps/account/Account.tsx
+++ b/server/sonar-web/src/main/js/apps/account/Account.tsx
@@ -61,7 +61,9 @@ export class Account extends React.PureComponent<Props> {
           </div>
         </header>
 
-        <Outlet />
+        <main>
+          <Outlet />
+        </main>
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx b/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx
index fd5cbcd1a66..c9a3479dce9 100644
--- a/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx
@@ -72,12 +72,12 @@ export default function AuditAppRenderer(props: AuditAppRendererProps) {
   const { dateRange, downloadStarted, housekeepingPolicy, selection } = props;
 
   return (
-    <div className="page page-limited" id="marketplace-page">
+    <main className="page page-limited" id="marketplace-page">
       <Suggestions suggestions="audit-logs" />
       <Helmet title={translate('audit_logs.page')} />
 
       <header className="page-header">
-        <h1 className="page-title">{translate('audit_logs.page')}</h1>
+        <h2 className="page-title">{translate('audit_logs.page')}</h2>
       </header>
 
       <p className="big-spacer-bottom">
@@ -104,7 +104,7 @@ export default function AuditAppRenderer(props: AuditAppRendererProps) {
       </p>
 
       <div className="huge-spacer-bottom">
-        <h2 className="big-spacer-bottom">{translate('audit_logs.download')}</h2>
+        <h3 className="big-spacer-bottom">{translate('audit_logs.download')}</h3>
 
         <ul>
           {getRangeOptions(housekeepingPolicy).map((option) => (
@@ -134,6 +134,6 @@ export default function AuditAppRenderer(props: AuditAppRendererProps) {
         onStartDownload={props.handleStartDownload}
         selection={selection}
       />
-    </div>
+    </main>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx
index aadcc2704a8..430a327776f 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx
@@ -229,7 +229,7 @@ export class BackgroundTasksApp extends React.PureComponent<Props, State> {
     const query = this.props.location.query.query || '';
 
     return (
-      <div className="page page-limited">
+      <main className="page page-limited">
         <Suggestions suggestions="background_tasks" />
         <Helmet defer={false} title={translate('background_tasks.page')} />
         <Header component={component} />
@@ -272,7 +272,7 @@ export class BackgroundTasksApp extends React.PureComponent<Props, State> {
           pageSize={pagination.pageSize}
           total={pagination.total}
         />
-      </div>
+      </main>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/BackgroundTasksApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/BackgroundTasksApp-test.tsx.snap
index afb200f89f2..d6a88662327 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/BackgroundTasksApp-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/BackgroundTasksApp-test.tsx.snap
@@ -11,7 +11,7 @@ exports[`should render correctly: initial 1`] = `
 `;
 
 exports[`should render correctly: loaded 1`] = `
-<div
+<main
   className="page page-limited"
 >
   <Suggestions
@@ -190,5 +190,5 @@ exports[`should render correctly: loaded 1`] = `
     loading={false}
     total={2}
   />
-</div>
+</main>
 `;
diff --git a/server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx b/server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx
index 646599998aa..5bd09e3c39d 100644
--- a/server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx
@@ -292,7 +292,7 @@ class CodeApp extends React.Component<Props, State> {
     const isPortfolio = isPortfolioLike(qualifier);
 
     return (
-      <div className="page page-limited">
+      <main className="page page-limited">
         <A11ySkipTarget anchor="code_main" />
         {!canBrowseAllChildProjects && isPortfolio && (
           <StyledAlert variant="warning" className="it__portfolio_warning">
@@ -394,7 +394,7 @@ class CodeApp extends React.Component<Props, State> {
             </div>
           )}
         </div>
-      </div>
+      </main>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx
index 95f89618efb..66e7210d3b2 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx
@@ -602,7 +602,7 @@ export class App extends React.PureComponent<Props, State> {
             )}
           </ScreenPositionHelper>
 
-          <div className="layout-page-main">
+          <main className="layout-page-main">
             <div className="layout-page-header-panel layout-page-main-header">
               <div className="layout-page-header-panel-inner layout-page-main-header-inner">
                 <div className="layout-page-main-inner">
@@ -673,7 +673,7 @@ export class App extends React.PureComponent<Props, State> {
                 </>
               )}
             </div>
-          </div>
+          </main>
         </div>
       </>
     );
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap
index 59f49c690c4..58ab4ac91cd 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -205,7 +205,7 @@ exports[`should render correctly: loaded 1`] = `
     >
       <Component />
     </ScreenPositionHelper>
-    <div
+    <main
       className="layout-page-main"
     >
       <div
@@ -330,7 +330,7 @@ exports[`should render correctly: loaded 1`] = `
           total={0}
         />
       </div>
-    </div>
+    </main>
   </div>
 </Fragment>
 `;
@@ -360,7 +360,7 @@ exports[`should render correctly: loading 1`] = `
     >
       <Component />
     </ScreenPositionHelper>
-    <div
+    <main
       className="layout-page-main"
     >
       <div
@@ -389,7 +389,7 @@ exports[`should render correctly: loading 1`] = `
       >
         <ul />
       </div>
-    </div>
+    </main>
   </div>
 </Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/App.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/App.tsx
index 22252b9d61f..922fa2d0906 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/App.tsx
@@ -265,11 +265,11 @@ export class App extends React.PureComponent<Props, State> {
 
     if (hideDrilldown) {
       return (
-        <div className="layout-page-main">
+        <main className="layout-page-main">
           <div className="layout-page-main-inner">
             <div className="note">{translate('component_measures.details_are_not_available')}</div>
           </div>
-        </div>
+        </main>
       );
     }
 
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx
index ff194a1834c..501ec9fac2e 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx
@@ -154,7 +154,7 @@ export default class MeasureOverview extends React.PureComponent<Props, State> {
     const { branchLike, className, component, leakPeriod, loading, rootComponent } = this.props;
     const displayLeak = hasFullMeasures(branchLike);
     return (
-      <div className={className}>
+      <main className={className}>
         <div className="layout-page-header-panel layout-page-main-header">
           <A11ySkipTarget anchor="measures_main" />
 
@@ -190,7 +190,7 @@ export default class MeasureOverview extends React.PureComponent<Props, State> {
           <DeferredSpinner loading={loading} />
           {!loading && this.renderContent()}
         </div>
-      </div>
+      </main>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap
index 17e692d4ad3..523e596b871 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -21,7 +21,7 @@ exports[`should not render drilldown for estimated duplications 1`] = `
     >
       <Component />
     </ScreenPositionHelper>
-    <div
+    <main
       className="layout-page-main"
     >
       <div
@@ -33,7 +33,7 @@ exports[`should not render drilldown for estimated duplications 1`] = `
           component_measures.details_are_not_available
         </div>
       </div>
-    </div>
+    </main>
   </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureOverview-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureOverview-test.tsx.snap
index 002e5241a15..56095ad8c01 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureOverview-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureOverview-test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly: default 1`] = `
-<div>
+<main>
   <div
     className="layout-page-header-panel layout-page-main-header"
   >
@@ -104,11 +104,11 @@ exports[`should render correctly: default 1`] = `
       updateSelected={[MockFunction]}
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`should render correctly: has leak period 1`] = `
-<div>
+<main>
   <div
     className="layout-page-header-panel layout-page-main-header"
   >
@@ -252,11 +252,11 @@ exports[`should render correctly: has leak period 1`] = `
       updateSelected={[MockFunction]}
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`should render correctly: is file 1`] = `
-<div>
+<main>
   <div
     className="layout-page-header-panel layout-page-main-header"
   >
@@ -337,11 +337,11 @@ exports[`should render correctly: is file 1`] = `
       />
     </div>
   </div>
-</div>
+</main>
 `;
 
 exports[`should render correctly: loading 1`] = `
-<div>
+<main>
   <div
     className="layout-page-header-panel layout-page-main-header"
   >
@@ -410,5 +410,5 @@ exports[`should render correctly: loading 1`] = `
       loading={true}
     />
   </div>
-</div>
+</main>
 `;
diff --git a/server/sonar-web/src/main/js/apps/groups/components/App.tsx b/server/sonar-web/src/main/js/apps/groups/components/App.tsx
index e26520e4aa3..e282044653b 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/App.tsx
@@ -196,7 +196,7 @@ export default class App extends React.PureComponent<{}, State> {
       <>
         <Suggestions suggestions="user_groups" />
         <Helmet defer={false} title={translate('user_groups.page')} />
-        <div className="page page-limited" id="groups-page">
+        <main className="page page-limited" id="groups-page">
           <Header onCreate={this.handleCreate} />
 
           <SearchBox
@@ -247,7 +247,7 @@ export default class App extends React.PureComponent<{}, State> {
               onSubmit={this.handleEdit}
             />
           )}
-        </div>
+        </main>
       </>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/App-test.tsx.snap
index 7a517e97573..a06d0810832 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -11,7 +11,7 @@ exports[`should render correctly 1`] = `
     prioritizeSeoTags={false}
     title="user_groups.page"
   />
-  <div
+  <main
     className="page page-limited"
     id="groups-page"
   >
@@ -26,7 +26,7 @@ exports[`should render correctly 1`] = `
       placeholder="search.search_by_name"
       value=""
     />
-  </div>
+  </main>
 </Fragment>
 `;
 
@@ -41,7 +41,7 @@ exports[`should render correctly 2`] = `
     prioritizeSeoTags={false}
     title="user_groups.page"
   />
-  <div
+  <main
     className="page page-limited"
     id="groups-page"
   >
@@ -89,6 +89,6 @@ exports[`should render correctly 2`] = `
         total={5}
       />
     </div>
-  </div>
+  </main>
 </Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/apps/marketplace/App.tsx b/server/sonar-web/src/main/js/apps/marketplace/App.tsx
index b47eff46860..52dd3a65eeb 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/App.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/App.tsx
@@ -156,13 +156,13 @@ export class App extends React.PureComponent<Props, State> {
       riskConsent === RiskConsent.Accepted;
 
     return (
-      <div className="page page-limited" id="marketplace-page">
+      <main className="page page-limited" id="marketplace-page">
         <Suggestions suggestions="marketplace" />
         <Helmet title={translate('marketplace.page')} />
         <Header currentEdition={currentEdition} />
         <EditionBoxes currentEdition={currentEdition} />
         <header className="page-header">
-          <h1 className="page-title">{translate('marketplace.page.plugins')}</h1>
+          <h2 className="page-title">{translate('marketplace.page.plugins')}</h2>
           <div className="page-description">
             <p>{translate('marketplace.page.plugins.description')}</p>
             {currentEdition !== EditionKey.community && (
@@ -209,7 +209,7 @@ export class App extends React.PureComponent<Props, State> {
             </>
           )}
         </DeferredSpinner>
-      </div>
+      </main>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/marketplace/Header.tsx b/server/sonar-web/src/main/js/apps/marketplace/Header.tsx
index 209ea4f41fc..88312102589 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/Header.tsx
@@ -28,7 +28,7 @@ interface Props {
 export default function Header({ currentEdition }: Props) {
   return (
     <header className="page-header" id="marketplace-header">
-      <h1 className="page-title">{translate('marketplace.page')}</h1>
+      <h2 className="page-title">{translate('marketplace.page')}</h2>
       {currentEdition && (
         <h3 className="page-description">
           {translate('marketplace.page.you_are_running', currentEdition)}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/App-test.tsx.snap
index a17030467b4..423ae4b0dd4 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/App-test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly: loaded 1`] = `
-<div
+<main
   className="page page-limited"
   id="marketplace-page"
 >
@@ -23,11 +23,11 @@ exports[`should render correctly: loaded 1`] = `
   <header
     className="page-header"
   >
-    <h1
+    <h2
       className="page-title"
     >
       marketplace.page.plugins
-    </h1>
+    </h2>
     <div
       className="page-description"
     >
@@ -94,11 +94,11 @@ exports[`should render correctly: loaded 1`] = `
       total={1}
     />
   </DeferredSpinner>
-</div>
+</main>
 `;
 
 exports[`should render correctly: loading 1`] = `
-<div
+<main
   className="page page-limited"
   id="marketplace-page"
 >
@@ -120,11 +120,11 @@ exports[`should render correctly: loading 1`] = `
   <header
     className="page-header"
   >
-    <h1
+    <h2
       className="page-title"
     >
       marketplace.page.plugins
-    </h1>
+    </h2>
     <div
       className="page-description"
     >
@@ -170,11 +170,11 @@ exports[`should render correctly: loading 1`] = `
   >
     marketplace.plugin_list.no_plugins.all
   </DeferredSpinner>
-</div>
+</main>
 `;
 
 exports[`should render correctly: not readonly 1`] = `
-<div
+<main
   className="page page-limited"
   id="marketplace-page"
 >
@@ -196,11 +196,11 @@ exports[`should render correctly: not readonly 1`] = `
   <header
     className="page-header"
   >
-    <h1
+    <h2
       className="page-title"
     >
       marketplace.page.plugins
-    </h1>
+    </h2>
     <div
       className="page-description"
     >
@@ -250,5 +250,5 @@ exports[`should render correctly: not readonly 1`] = `
       total={1}
     />
   </DeferredSpinner>
-</div>
+</main>
 `;
diff --git a/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/Header-test.tsx.snap b/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/Header-test.tsx.snap
index 4b6c283ca46..83e8c3b7b33 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/Header-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/Header-test.tsx.snap
@@ -5,11 +5,11 @@ exports[`should render with installed editions 1`] = `
   className="page-header"
   id="marketplace-header"
 >
-  <h1
+  <h2
     className="page-title"
   >
     marketplace.page
-  </h1>
+  </h2>
   <h3
     className="page-description"
   >
@@ -28,11 +28,11 @@ exports[`should render with installed editions 2`] = `
   className="page-header"
   id="marketplace-header"
 >
-  <h1
+  <h2
     className="page-title"
   >
     marketplace.page
-  </h1>
+  </h2>
   <h3
     className="page-description"
   >
diff --git a/server/sonar-web/src/main/js/apps/overview/components/App.tsx b/server/sonar-web/src/main/js/apps/overview/components/App.tsx
index 942a3ace000..8c6efe0b26c 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/App.tsx
@@ -56,12 +56,12 @@ export class App extends React.PureComponent<Props> {
     }
 
     return isPullRequest(branchLike) ? (
-      <>
+      <main>
         <Suggestions suggestions="pull_requests" />
         <PullRequestOverview branchLike={branchLike} component={component} />
-      </>
+      </main>
     ) : (
-      <>
+      <main>
         <Suggestions suggestions="overview" />
 
         {!component.analysisDate && (
@@ -82,7 +82,7 @@ export class App extends React.PureComponent<Props> {
             projectBinding={projectBinding}
           />
         )}
-      </>
+      </main>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/App-test.tsx b/server/sonar-web/src/main/js/apps/overview/components/__tests__/App-test.tsx
index b5126094321..e72a1a7e7a4 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/__tests__/App-test.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/App-test.tsx
@@ -19,7 +19,9 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { mockPullRequest } from '../../../../helpers/mocks/branch-like';
 import BranchOverview from '../../branches/BranchOverview';
+import PullRequestOverview from '../../pullRequests/PullRequestOverview';
 import { App } from '../App';
 
 const component = {
@@ -33,6 +35,9 @@ const component = {
 
 it('should render BranchOverview', () => {
   expect(getWrapper().find(BranchOverview).exists()).toBe(true);
+  expect(getWrapper({ branchLike: mockPullRequest() }).find(PullRequestOverview).exists()).toBe(
+    true
+  );
 });
 
 function getWrapper(props = {}) {
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionTemplatesApp.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionTemplatesApp.tsx
index a6691e30792..0a613050b6f 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionTemplatesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionTemplatesApp.tsx
@@ -110,13 +110,13 @@ export class PermissionTemplatesApp extends React.PureComponent<Props, State> {
   render() {
     const { id } = this.props.location.query;
     return (
-      <div>
+      <main>
         <Suggestions suggestions="permission_templates" />
         <Helmet defer={false} title={translate('permission_templates.page')} />
 
         {id && this.renderTemplate(id)}
         {!id && this.renderHome()}
-      </div>
+      </main>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/permissions/global/components/App.tsx b/server/sonar-web/src/main/js/apps/permissions/global/components/App.tsx
index 55df242511c..5e0c9a0c8a6 100644
--- a/server/sonar-web/src/main/js/apps/permissions/global/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/permissions/global/components/App.tsx
@@ -281,7 +281,7 @@ export class App extends React.PureComponent<Props, State> {
       'global_permissions'
     );
     return (
-      <div className="page page-limited">
+      <main className="page page-limited">
         <Suggestions suggestions="global_permissions" />
         <Helmet defer={false} title={translate('global_permissions.permission')} />
         <PageHeader loading={loading} />
@@ -302,7 +302,7 @@ export class App extends React.PureComponent<Props, State> {
           users={users}
           usersPaging={usersPaging}
         />
-      </div>
+      </main>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/permissions/global/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/permissions/global/components/__tests__/__snapshots__/App-test.tsx.snap
index 5017c675591..55679b704a0 100644
--- a/server/sonar-web/src/main/js/apps/permissions/global/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/permissions/global/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<div
+<main
   className="page page-limited"
 >
   <Suggestions
@@ -69,11 +69,11 @@ exports[`should render correctly 1`] = `
     revokePermissionFromUser={[Function]}
     users={[]}
   />
-</div>
+</main>
 `;
 
 exports[`should render correctly 2`] = `
-<div
+<main
   className="page page-limited"
 >
   <Suggestions
@@ -198,5 +198,5 @@ exports[`should render correctly 2`] = `
       }
     }
   />
-</div>
+</main>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppRenderer.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppRenderer.tsx
index becf6e59200..4bb0d646efe 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppRenderer.tsx
@@ -56,7 +56,7 @@ export default function ProjectActivityAppRenderer(props: Props) {
     (configuration ? configuration.showHistory : false);
   const canDeleteAnalyses = configuration ? configuration.showHistory : false;
   return (
-    <div className="page page-limited" id="project-activity">
+    <main className="page page-limited" id="project-activity">
       <Suggestions suggestions="project_activity" />
       <Helmet defer={false} title={translate('project_activity.page')} />
 
@@ -106,6 +106,6 @@ export default function ProjectActivityAppRenderer(props: Props) {
           />
         </div>
       </div>
-    </div>
+    </main>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectManagementApp.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectManagementApp.tsx
index 24b8e7f9ced..2688eeede81 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectManagementApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectManagementApp.tsx
@@ -204,7 +204,7 @@ export class ProjectManagementApp extends React.PureComponent<Props, State> {
     const { currentUser } = this.props;
     const { defaultProjectVisibility } = this.state;
     return (
-      <div className="page page-limited" id="projects-management-page">
+      <main className="page page-limited" id="projects-management-page">
         <Suggestions suggestions="projects_management" />
         <Helmet defer={false} title={translate('projects_management')} />
 
@@ -258,7 +258,7 @@ export class ProjectManagementApp extends React.PureComponent<Props, State> {
             onProjectCreated={this.requestProjects}
           />
         )}
-      </div>
+      </main>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx
index 623d21ad35b..87cb5a6097c 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx
@@ -123,7 +123,7 @@ class App extends React.PureComponent<Props, State> {
 
           <ScreenPositionHelper className="layout-page-side-outer">
             {({ top }) => (
-              <div className="layout-page-side" style={{ top }}>
+              <nav className="layout-page-side" style={{ top }}>
                 <div className="layout-page-side-inner">
                   <div className="layout-page-filters">
                     <ListHeader
@@ -135,7 +135,7 @@ class App extends React.PureComponent<Props, State> {
                     </DeferredSpinner>
                   </div>
                 </div>
-              </div>
+              </nav>
             )}
           </ScreenPositionHelper>
 
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx
index 1409940c95c..97f18dc80f0 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx
@@ -150,7 +150,7 @@ export default class Details extends React.PureComponent<Props, State> {
     const { loading, qualityGate, updatedConditionId } = this.state;
 
     return (
-      <div className="layout-page-main">
+      <main className="layout-page-main">
         <DeferredSpinner loading={loading} timeout={200}>
           {qualityGate && (
             <>
@@ -172,7 +172,7 @@ export default class Details extends React.PureComponent<Props, State> {
             </>
           )}
         </DeferredSpinner>
-      </div>
+      </main>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileContainer.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileContainer.tsx
index ddc968d65a0..5588a4d15b9 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileContainer.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileContainer.tsx
@@ -64,7 +64,9 @@ export default function ProfileContainer() {
         isComparable={filteredProfiles.length > 1}
         updateProfiles={context.updateProfiles}
       />
-      <Outlet context={{ profile, ...context }} />
+      <main>
+        <Outlet context={{ profile, ...context }} />
+      </main>
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
index 2ca6f42e977..c02116e3877 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
@@ -53,7 +53,7 @@ export default function ProfileHeader(props: Props) {
   const isChangeLogPage = location.pathname.endsWith(`/${QualityProfilePath.CHANGELOG}`);
 
   return (
-    <div className="page-header quality-profile-header">
+    <header className="page-header quality-profile-header">
       {(isComparePage || isChangeLogPage) && (
         <Helmet
           defer={false}
@@ -141,6 +141,6 @@ export default function ProfileHeader(props: Props) {
           />
         </div>
       )}
-    </div>
+    </header>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/HomeContainer.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/HomeContainer.tsx
index aef096a04f5..e06487ef75b 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/HomeContainer.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/HomeContainer.tsx
@@ -35,12 +35,12 @@ export default function HomeContainer() {
       <PageHeader {...context} />
 
       <div className="page-with-sidebar">
-        <div className="page-main">
+        <main className="page-main">
           <ProfilesList {...context} language={selectedLanguage} />
-        </div>
-        <div className="page-sidebar">
+        </main>
+        <aside className="page-sidebar">
           <Evolution {...context} />
-        </div>
+        </aside>
       </div>
     </div>
   );
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsAppRenderer.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsAppRenderer.tsx
index ba8b7c1bd9f..1db2708e3ba 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsAppRenderer.tsx
@@ -174,7 +174,7 @@ export default function SecurityHotspotsAppRenderer(props: SecurityHotspotsAppRe
               )}
             </ScreenPositionHelper>
 
-            <div className="layout-page-main">
+            <main className="layout-page-main">
               <HotspotViewer
                 component={component}
                 hotspotKey={selectedHotspot.key}
@@ -184,7 +184,7 @@ export default function SecurityHotspotsAppRenderer(props: SecurityHotspotsAppRe
                 onLocationClick={props.onLocationClick}
                 selectedHotspotLocation={selectedHotspotLocation}
               />
-            </div>
+            </main>
           </div>
         ))}
     </div>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/SettingsAppRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/SettingsAppRenderer.tsx
index 3765dd223e9..9d844cc2133 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/SettingsAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/SettingsAppRenderer.tsx
@@ -67,7 +67,7 @@ export function SettingsAppRenderer(props: SettingsAppRendererProps) {
       (!isProjectSettings && foundAdditionalCategory.availableGlobally));
 
   return (
-    <div id="settings-page">
+    <main id="settings-page">
       <Suggestions suggestions="settings" />
       <Helmet defer={false} title={translate('settings.page')} />
       <PageHeader component={component} definitions={definitions} />
@@ -110,7 +110,7 @@ export function SettingsAppRenderer(props: SettingsAppRendererProps) {
           </div>
         </div>
       </div>
-    </div>
+    </main>
   );
 }
 
diff --git a/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/SettingsAppRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/SettingsAppRenderer-test.tsx.snap
index 02bc3346760..491942307b9 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/SettingsAppRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/SettingsAppRenderer-test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render almintegration correctly 1`] = `
-<div
+<main
   id="settings-page"
 >
   <Suggestions
@@ -82,11 +82,11 @@ exports[`should render almintegration correctly 1`] = `
       </div>
     </div>
   </div>
-</div>
+</main>
 `;
 
 exports[`should render default view correctly 1`] = `
-<div
+<main
   id="settings-page"
 >
   <Suggestions
@@ -161,7 +161,7 @@ exports[`should render default view correctly 1`] = `
       </div>
     </div>
   </div>
-</div>
+</main>
 `;
 
 exports[`should render default view correctly: All Categories List 1`] = `
@@ -195,7 +195,7 @@ exports[`should render default view correctly: All Categories List 1`] = `
 `;
 
 exports[`should render exclusions correctly 1`] = `
-<div
+<main
   id="settings-page"
 >
   <Suggestions
@@ -276,11 +276,11 @@ exports[`should render exclusions correctly 1`] = `
       </div>
     </div>
   </div>
-</div>
+</main>
 `;
 
 exports[`should render languages correctly 1`] = `
-<div
+<main
   id="settings-page"
 >
   <Suggestions
@@ -361,11 +361,11 @@ exports[`should render languages correctly 1`] = `
       </div>
     </div>
   </div>
-</div>
+</main>
 `;
 
 exports[`should render new_code_period correctly 1`] = `
-<div
+<main
   id="settings-page"
 >
   <Suggestions
@@ -420,11 +420,11 @@ exports[`should render new_code_period correctly 1`] = `
       </div>
     </div>
   </div>
-</div>
+</main>
 `;
 
 exports[`should render pull_request_decoration_binding correctly 1`] = `
-<div
+<main
   id="settings-page"
 >
   <Suggestions
@@ -499,5 +499,5 @@ exports[`should render pull_request_decoration_binding correctly 1`] = `
       </div>
     </div>
   </div>
-</div>
+</main>
 `;
diff --git a/server/sonar-web/src/main/js/apps/system/components/App.tsx b/server/sonar-web/src/main/js/apps/system/components/App.tsx
index 53d20e573aa..7478fdfa549 100644
--- a/server/sonar-web/src/main/js/apps/system/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/App.tsx
@@ -123,7 +123,7 @@ export class App extends React.PureComponent<Props, State> {
   render() {
     const { loading, sysInfoData } = this.state;
     return (
-      <div className="page page-limited">
+      <main className="page page-limited">
         <Suggestions suggestions="system_info" />
         <Helmet defer={false} title={translate('system_info.page')} />
         <div className="page-notifs">
@@ -143,7 +143,7 @@ export class App extends React.PureComponent<Props, State> {
           />
         )}
         {this.renderSysInfo()}
-      </div>
+      </main>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/App-test.tsx.snap
index 1f62f012092..aeffef45a27 100644
--- a/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly: cluster sysinfo 1`] = `
-<div
+<main
   className="page page-limited"
 >
   <Suggestions
@@ -190,11 +190,11 @@ exports[`should render correctly: cluster sysinfo 1`] = `
     }
     toggleCard={[Function]}
   />
-</div>
+</main>
 `;
 
 exports[`should render correctly: loading 1`] = `
-<div
+<main
   className="page page-limited"
 >
   <Suggestions
@@ -213,11 +213,11 @@ exports[`should render correctly: loading 1`] = `
       dismissable={false}
     />
   </div>
-</div>
+</main>
 `;
 
 exports[`should render correctly: stand-alone sysinfo 1`] = `
-<div
+<main
   className="page page-limited"
 >
   <Suggestions
@@ -319,5 +319,5 @@ exports[`should render correctly: stand-alone sysinfo 1`] = `
     }
     toggleCard={[Function]}
   />
-</div>
+</main>
 `;
diff --git a/server/sonar-web/src/main/js/apps/users/UsersApp.tsx b/server/sonar-web/src/main/js/apps/users/UsersApp.tsx
index c2fb58dbcc7..b0d7c36df4f 100644
--- a/server/sonar-web/src/main/js/apps/users/UsersApp.tsx
+++ b/server/sonar-web/src/main/js/apps/users/UsersApp.tsx
@@ -118,7 +118,7 @@ export class UsersApp extends React.PureComponent<Props, State> {
     const query = parseQuery(this.props.location.query);
     const { loading, paging, users } = this.state;
     return (
-      <div className="page page-limited" id="users-page">
+      <main className="page page-limited" id="users-page">
         <Suggestions suggestions="users" />
         <Helmet defer={false} title={translate('users.page')} />
         <Header loading={loading} onUpdateUsers={this.fetchUsers} />
@@ -138,7 +138,7 @@ export class UsersApp extends React.PureComponent<Props, State> {
             total={paging.total}
           />
         )}
-      </div>
+      </main>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/users/__tests__/__snapshots__/UsersApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/__tests__/__snapshots__/UsersApp-test.tsx.snap
index aee0b17d53a..41245b66512 100644
--- a/server/sonar-web/src/main/js/apps/users/__tests__/__snapshots__/UsersApp-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/__tests__/__snapshots__/UsersApp-test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<div
+<main
   className="page page-limited"
   id="users-page"
 >
@@ -39,11 +39,11 @@ exports[`should render correctly 1`] = `
     updateTokensCount={[Function]}
     users={[]}
   />
-</div>
+</main>
 `;
 
 exports[`should render correctly 2`] = `
-<div
+<main
   className="page page-limited"
   id="users-page"
 >
@@ -106,5 +106,5 @@ exports[`should render correctly 2`] = `
     ready={true}
     total={2}
   />
-</div>
+</main>
 `;