SONAR-11751 SONAR-11748 Use semantically correct elements on Issues page

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()}

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"

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>
   );
 }

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