From 986a6793f9d19e5ff93c3e340589a5abc16626c3 Mon Sep 17 00:00:00 2001
From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Thu, 25 Feb 2021 10:16:34 +0100
Subject: [PATCH] SONAR-11751 SONAR-11748 Use semantically correct elements on
 Issues page

---
 .../src/main/js/apps/issues/components/App.tsx  | 12 +++++++++---
 .../__tests__/__snapshots__/App-test.tsx.snap   | 17 +++++++++++++++++
 .../main/js/components/common/FiltersHeader.tsx |  2 +-
 .../resources/org/sonar/l10n/core.properties    |  1 +
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/issues/components/App.tsx b/server/sonar-web/src/main/js/apps/issues/components/App.tsx
index b32b26cf682..b3d8ce3ee68 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/App.tsx
@@ -975,7 +975,10 @@ export default class App extends React.PureComponent<Props, State> {
     return (
       <ScreenPositionHelper className="layout-page-side-outer">
         {({ top }) => (
-          <div className="layout-page-side" style={{ top }}>
+          <section
+            aria-label={openIssue ? translate('list_of_issues') : translate('filters')}
+            className="layout-page-side"
+            style={{ top }}>
             <div className="layout-page-side-inner">
               <A11ySkipTarget
                 anchor="issues_sidebar"
@@ -986,7 +989,7 @@ export default class App extends React.PureComponent<Props, State> {
               />
               {openIssue ? this.renderConciseIssuesList() : this.renderFacets()}
             </div>
-          </div>
+          </section>
         )}
       </ScreenPositionHelper>
     );
@@ -1015,6 +1018,7 @@ export default class App extends React.PureComponent<Props, State> {
 
     return (
       <div>
+        <h2 className="a11y-hidden">{translate('list_of_issues')}</h2>
         {paging.total > 0 && (
           <IssuesList
             branchLike={branchLike}
@@ -1127,9 +1131,11 @@ export default class App extends React.PureComponent<Props, State> {
         <Suggestions suggestions="issues" />
         <Helmet defer={false} title={openIssue ? openIssue.message : translate('issues.page')} />
 
+        <h1 className="a11y-hidden">{translate('issues.page')}</h1>
+
         {this.renderSide(openIssue)}
 
-        <div className="layout-page-main">
+        <div role="main" className="layout-page-main">
           {this.renderHeader({ openIssue, paging, selectedIndex })}
 
           {this.renderPage()}
diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/App-test.tsx.snap
index 51d877ba775..a465c14212f 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -33,6 +33,11 @@ exports[`should switch to source view if an issue is selected 1`] = `
     encodeSpecialCharacters={true}
     title="issues.page"
   />
+  <h1
+    className="a11y-hidden"
+  >
+    issues.page
+  </h1>
   <ScreenPositionHelper
     className="layout-page-side-outer"
   >
@@ -40,6 +45,7 @@ exports[`should switch to source view if an issue is selected 1`] = `
   </ScreenPositionHelper>
   <div
     className="layout-page-main"
+    role="main"
   >
     <div
       className="layout-page-header-panel layout-page-main-header issues-main-header"
@@ -96,6 +102,11 @@ exports[`should switch to source view if an issue is selected 1`] = `
         loading={false}
       >
         <div>
+          <h2
+            className="a11y-hidden"
+          >
+            list_of_issues
+          </h2>
           <IssuesList
             checked={Array []}
             component={
@@ -358,6 +369,11 @@ exports[`should switch to source view if an issue is selected 2`] = `
     encodeSpecialCharacters={true}
     title="Reduce the number of conditional operators (4) used in the expression"
   />
+  <h1
+    className="a11y-hidden"
+  >
+    issues.page
+  </h1>
   <ScreenPositionHelper
     className="layout-page-side-outer"
   >
@@ -365,6 +381,7 @@ exports[`should switch to source view if an issue is selected 2`] = `
   </ScreenPositionHelper>
   <div
     className="layout-page-main"
+    role="main"
   >
     <A11ySkipTarget
       anchor="issues_main"
diff --git a/server/sonar-web/src/main/js/components/common/FiltersHeader.tsx b/server/sonar-web/src/main/js/components/common/FiltersHeader.tsx
index b945cf72804..800bd3a8fb0 100644
--- a/server/sonar-web/src/main/js/components/common/FiltersHeader.tsx
+++ b/server/sonar-web/src/main/js/components/common/FiltersHeader.tsx
@@ -37,7 +37,7 @@ export default function FiltersHeader({ displayReset, onReset }: Props) {
         </div>
       )}
 
-      <h3>{translate('filters')}</h3>
+      <h2 className="h3">{translate('filters')}</h2>
     </div>
   );
 }
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index be3b77bb8ae..dec3019c2c7 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -103,6 +103,7 @@ learn_more=Learn More
 library=Library
 line_number=Line Number
 links=Links
+list_of_issues=List of issues
 list_of_projects=List of projects
 load_more=Load more
 load_verb=Load
-- 
2.39.5