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

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 b32b26cf682ce0c5f72128a9df718ffbf8ac27f7..b3d8ce3ee684b0d3b53445b9a1676a7df715699a 100644 (file)
--- 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 51d877ba77565a5b0d25e6aa705512ea5d965da6..a465c14212fdbff7b0ecee466a0db2f237cba39d 100644 (file)
--- 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 b945cf7280455f9c438c1710db4943569b06bea9..800bd3a8fb0cf30d1834faff37f14157d4b1aefc 100644 (file)
--- 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 be3b77bb8ae72fdb79f2d41e10839188a6218431..dec3019c2c780c19dbd6bb860dbf794a116a91e8 100644 (file)
--- 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