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

server/sonar-web/src/main/js/app/styles/init/misc.css

@@ -39,6 +39,15 @@ th.hide-overflow {
   visibility: hidden !important;
 }
 
+.a11y-hidden {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
 .invisible {
   visibility: hidden;
 }

server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx

@@ -224,7 +224,10 @@ export class AllProjects extends React.PureComponent<Props, State> {
   renderSide = () => (
     <ScreenPositionHelper className="layout-page-side-outer">
       {({ top }) => (
-        <div className="layout-page-side projects-page-side" style={{ top }}>
+        <section
+          aria-label={translate('filters')}
+          className="layout-page-side projects-page-side"
+          style={{ top }}>
           <div className="layout-page-side-inner">
             <div className="layout-page-filters">
               <A11ySkipTarget
@@ -244,7 +247,7 @@ export class AllProjects extends React.PureComponent<Props, State> {
               />
             </div>
           </div>
-        </div>
+        </section>
       )}
     </ScreenPositionHelper>
   );
@@ -317,13 +320,18 @@ export class AllProjects extends React.PureComponent<Props, State> {
         <Suggestions suggestions="projects" />
         <Helmet defer={false} title={translate('projects.page')} />
 
+        <h1 className="a11y-hidden">{translate('projects.page')}</h1>
+
         {this.renderSide()}
 
         <div className="layout-page-main">
           <A11ySkipTarget anchor="projects_main" />
 
-          {this.renderHeader()}
-          {this.renderMain()}
+          <div role="main">
+            <h2 className="a11y-hidden">{translate('list_of_projects')}</h2>
+            {this.renderHeader()}
+            {this.renderMain()}
+          </div>
         </div>
       </div>
     );

server/sonar-web/src/main/js/apps/projects/components/FavoriteFilter.tsx

@@ -47,7 +47,7 @@ export default class FavoriteFilter extends React.PureComponent<Props> {
     const pathnameForAll = '/projects';
 
     return (
-      <header className="page-header text-center">
+      <div className="page-header text-center">
         <div className="button-group little-spacer-top">
           <Link
             activeClassName="button-active"
@@ -66,7 +66,7 @@ export default class FavoriteFilter extends React.PureComponent<Props> {
             {translate('all')}
           </IndexLink>
         </div>
-      </header>
+      </div>
     );
   }
 }

server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx

@@ -52,7 +52,7 @@ export default function PageHeader(props: Props) {
   const sortingDisabled = view === 'visualizations' && !limitReached;
 
   return (
-    <header className="page-header">
+    <div className="page-header">
       <div className="display-flex-space-between spacer-top">
         <SearchFilterContainer onQueryChange={props.onQueryChange} query={props.query} />
         <div className="display-flex-center">
@@ -97,6 +97,6 @@ export default function PageHeader(props: Props) {
           </Tooltip>
         </div>
       </div>
-    </header>
+    </div>
   );
 }

server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx

@@ -75,7 +75,7 @@ export default function PageSidebar(props: PageSidebarProps) {
       <div className="projects-facets-header clearfix">
         {isFiltered && <ClearAll onClearAll={props.onClearAll} />}
 
-        <h3>{translate('filters')}</h3>
+        <h2 className="h3">{translate('filters')}</h2>
       </div>
       <QualityGateFilter {...facetProps} facet={getFacet(facets, 'gate')} value={query.gate} />
       {!isLeakView && (

server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/AllProjects-test.tsx.snap

@@ -40,6 +40,11 @@ exports[`renders 1`] = `
     encodeSpecialCharacters={true}
     title="projects.page"
   />
+  <h1
+    className="a11y-hidden"
+  >
+    projects.page
+  </h1>
   <ScreenPositionHelper
     className="layout-page-side-outer"
   >
@@ -52,129 +57,138 @@ exports[`renders 1`] = `
       anchor="projects_main"
     />
     <div
-      className="layout-page-header-panel layout-page-main-header"
+      role="main"
     >
+      <h2
+        className="a11y-hidden"
+      >
+        list_of_projects
+      </h2>
       <div
-        className="layout-page-header-panel-inner layout-page-main-header-inner"
+        className="layout-page-header-panel layout-page-main-header"
       >
         <div
-          className="layout-page-main-inner"
+          className="layout-page-header-panel-inner layout-page-main-header-inner"
         >
-          <PageHeader
-            currentUser={
-              Object {
-                "isLoggedIn": true,
+          <div
+            className="layout-page-main-inner"
+          >
+            <PageHeader
+              currentUser={
+                Object {
+                  "isLoggedIn": true,
+                }
               }
-            }
-            loading={false}
-            onPerspectiveChange={[Function]}
-            onQueryChange={[Function]}
-            onSortChange={[Function]}
-            projects={
-              Array [
+              loading={false}
+              onPerspectiveChange={[Function]}
+              onQueryChange={[Function]}
+              onSortChange={[Function]}
+              projects={
+                Array [
+                  Object {
+                    "key": "foo",
+                    "measures": Object {},
+                    "name": "Foo",
+                    "qualifier": "TRK",
+                    "tags": Array [],
+                    "visibility": "public",
+                  },
+                ]
+              }
+              query={
                 Object {
-                  "key": "foo",
-                  "measures": Object {},
-                  "name": "Foo",
-                  "qualifier": "TRK",
-                  "tags": Array [],
-                  "visibility": "public",
-                },
-              ]
-            }
-            query={
-              Object {
-                "coverage": undefined,
-                "duplications": undefined,
-                "gate": undefined,
-                "languages": undefined,
-                "maintainability": undefined,
-                "new_coverage": undefined,
-                "new_duplications": undefined,
-                "new_lines": undefined,
-                "new_maintainability": undefined,
-                "new_reliability": undefined,
-                "new_security": undefined,
-                "new_security_review_rating": undefined,
-                "qualifier": undefined,
-                "reliability": undefined,
-                "search": undefined,
-                "security": undefined,
-                "security_review_rating": undefined,
-                "size": undefined,
-                "sort": undefined,
-                "tags": undefined,
-                "view": undefined,
-                "visualization": undefined,
+                  "coverage": undefined,
+                  "duplications": undefined,
+                  "gate": undefined,
+                  "languages": undefined,
+                  "maintainability": undefined,
+                  "new_coverage": undefined,
+                  "new_duplications": undefined,
+                  "new_lines": undefined,
+                  "new_maintainability": undefined,
+                  "new_reliability": undefined,
+                  "new_security": undefined,
+                  "new_security_review_rating": undefined,
+                  "qualifier": undefined,
+                  "reliability": undefined,
+                  "search": undefined,
+                  "security": undefined,
+                  "security_review_rating": undefined,
+                  "size": undefined,
+                  "sort": undefined,
+                  "tags": undefined,
+                  "view": undefined,
+                  "visualization": undefined,
+                }
               }
-            }
-            selectedSort="name"
-            total={0}
-            view="overall"
-            visualization="risk"
-          />
+              selectedSort="name"
+              total={0}
+              view="overall"
+              visualization="risk"
+            />
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      className="layout-page-main-inner"
-    >
-      <ProjectsList
-        cardType="overall"
-        currentUser={
-          Object {
-            "isLoggedIn": true,
+      <div
+        className="layout-page-main-inner"
+      >
+        <ProjectsList
+          cardType="overall"
+          currentUser={
+            Object {
+              "isLoggedIn": true,
+            }
+          }
+          handleFavorite={[Function]}
+          isFavorite={false}
+          isFiltered={false}
+          projects={
+            Array [
+              Object {
+                "key": "foo",
+                "measures": Object {},
+                "name": "Foo",
+                "qualifier": "TRK",
+                "tags": Array [],
+                "visibility": "public",
+              },
+            ]
           }
-        }
-        handleFavorite={[Function]}
-        isFavorite={false}
-        isFiltered={false}
-        projects={
-          Array [
+          query={
             Object {
-              "key": "foo",
-              "measures": Object {},
-              "name": "Foo",
-              "qualifier": "TRK",
-              "tags": Array [],
-              "visibility": "public",
-            },
-          ]
-        }
-        query={
-          Object {
-            "coverage": undefined,
-            "duplications": undefined,
-            "gate": undefined,
-            "languages": undefined,
-            "maintainability": undefined,
-            "new_coverage": undefined,
-            "new_duplications": undefined,
-            "new_lines": undefined,
-            "new_maintainability": undefined,
-            "new_reliability": undefined,
-            "new_security": undefined,
-            "new_security_review_rating": undefined,
-            "qualifier": undefined,
-            "reliability": undefined,
-            "search": undefined,
-            "security": undefined,
-            "security_review_rating": undefined,
-            "size": undefined,
-            "sort": undefined,
-            "tags": undefined,
-            "view": undefined,
-            "visualization": undefined,
+              "coverage": undefined,
+              "duplications": undefined,
+              "gate": undefined,
+              "languages": undefined,
+              "maintainability": undefined,
+              "new_coverage": undefined,
+              "new_duplications": undefined,
+              "new_lines": undefined,
+              "new_maintainability": undefined,
+              "new_reliability": undefined,
+              "new_security": undefined,
+              "new_security_review_rating": undefined,
+              "qualifier": undefined,
+              "reliability": undefined,
+              "search": undefined,
+              "security": undefined,
+              "security_review_rating": undefined,
+              "size": undefined,
+              "sort": undefined,
+              "tags": undefined,
+              "view": undefined,
+              "visualization": undefined,
+            }
           }
-        }
-      />
-      <ListFooter
-        count={1}
-        loadMore={[Function]}
-        loading={false}
-        ready={true}
-        total={0}
-      />
+        />
+        <ListFooter
+          count={1}
+          loadMore={[Function]}
+          loading={false}
+          ready={true}
+          total={0}
+        />
+      </div>
     </div>
   </div>
 </div>
@@ -193,6 +207,11 @@ exports[`renders 2`] = `
     encodeSpecialCharacters={true}
     title="projects.page"
   />
+  <h1
+    className="a11y-hidden"
+  >
+    projects.page
+  </h1>
   <ScreenPositionHelper
     className="layout-page-side-outer"
   >
@@ -205,68 +224,77 @@ exports[`renders 2`] = `
       anchor="projects_main"
     />
     <div
-      className="layout-page-header-panel layout-page-main-header"
+      role="main"
     >
+      <h2
+        className="a11y-hidden"
+      >
+        list_of_projects
+      </h2>
       <div
-        className="layout-page-header-panel-inner layout-page-main-header-inner"
+        className="layout-page-header-panel layout-page-main-header"
       >
         <div
-          className="layout-page-main-inner"
+          className="layout-page-header-panel-inner layout-page-main-header-inner"
         >
-          <PageHeader
-            currentUser={
-              Object {
-                "isLoggedIn": true,
+          <div
+            className="layout-page-main-inner"
+          >
+            <PageHeader
+              currentUser={
+                Object {
+                  "isLoggedIn": true,
+                }
               }
-            }
-            loading={false}
-            onPerspectiveChange={[Function]}
-            onQueryChange={[Function]}
-            onSortChange={[Function]}
-            projects={
-              Array [
+              loading={false}
+              onPerspectiveChange={[Function]}
+              onQueryChange={[Function]}
+              onSortChange={[Function]}
+              projects={
+                Array [
+                  Object {
+                    "key": "foo",
+                    "measures": Object {},
+                    "name": "Foo",
+                    "qualifier": "TRK",
+                    "tags": Array [],
+                    "visibility": "public",
+                  },
+                ]
+              }
+              query={
                 Object {
-                  "key": "foo",
-                  "measures": Object {},
-                  "name": "Foo",
-                  "qualifier": "TRK",
-                  "tags": Array [],
-                  "visibility": "public",
-                },
-              ]
-            }
-            query={
-              Object {
-                "view": "visualizations",
+                  "view": "visualizations",
+                }
               }
-            }
-            selectedSort="name"
-            total={0}
-            view="visualizations"
-            visualization="risk"
-          />
+              selectedSort="name"
+              total={0}
+              view="visualizations"
+              visualization="risk"
+            />
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      className="layout-page-main-inner"
-    >
-      <Visualizations
-        projects={
-          Array [
-            Object {
-              "key": "foo",
-              "measures": Object {},
-              "name": "Foo",
-              "qualifier": "TRK",
-              "tags": Array [],
-              "visibility": "public",
-            },
-          ]
-        }
-        total={0}
-        visualization="risk"
-      />
+      <div
+        className="layout-page-main-inner"
+      >
+        <Visualizations
+          projects={
+            Array [
+              Object {
+                "key": "foo",
+                "measures": Object {},
+                "name": "Foo",
+                "qualifier": "TRK",
+                "tags": Array [],
+                "visibility": "public",
+              },
+            ]
+          }
+          total={0}
+          visualization="risk"
+        />
+      </div>
     </div>
   </div>
 </div>

server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/FavoriteFilter-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders for logged in user 1`] = `
-<header
+<div
   className="page-header text-center"
 >
   <div
@@ -42,5 +42,5 @@ exports[`renders for logged in user 1`] = `
       all
     </IndexLink>
   </div>
-</header>
+</div>
 `;

server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<header
+<div
   className="page-header"
 >
   <div
@@ -75,11 +75,11 @@ exports[`should render correctly 1`] = `
       </Tooltip>
     </div>
   </div>
-</header>
+</div>
 `;
 
 exports[`should render correctly while loading 1`] = `
-<header
+<div
   className="page-header"
 >
   <div
@@ -153,11 +153,11 @@ exports[`should render correctly while loading 1`] = `
       </Tooltip>
     </div>
   </div>
-</header>
+</div>
 `;
 
 exports[`should render disabled sorting options for visualizations 1`] = `
-<header
+<div
   className="page-header"
 >
   <div
@@ -222,7 +222,7 @@ exports[`should render disabled sorting options for visualizations 1`] = `
       </Tooltip>
     </div>
   </div>
-</header>
+</div>
 `;
 
 exports[`should render switch the default sorting option for anonymous users 1`] = `

server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.tsx.snap

@@ -12,9 +12,11 @@ exports[`should render \`leak\` view correctly 1`] = `
   <div
     className="projects-facets-header clearfix"
   >
-    <h3>
+    <h2
+      className="h3"
+    >
       filters
-    </h3>
+    </h2>
   </div>
   <QualityGateFilter
     onQueryChange={[MockFunction]}
@@ -76,9 +78,11 @@ exports[`should render \`leak\` view correctly with no applications 1`] = `
   <div
     className="projects-facets-header clearfix"
   >
-    <h3>
+    <h2
+      className="h3"
+    >
       filters
-    </h3>
+    </h2>
   </div>
   <QualityGateFilter
     onQueryChange={[MockFunction]}
@@ -134,9 +138,11 @@ exports[`should render correctly 1`] = `
     <ClearAll
       onClearAll={[MockFunction]}
     />
-    <h3>
+    <h2
+      className="h3"
+    >
       filters
-    </h3>
+    </h2>
   </div>
   <QualityGateFilter
     onQueryChange={[MockFunction]}
@@ -194,9 +200,11 @@ exports[`should render correctly with no applications 1`] = `
     <ClearAll
       onClearAll={[MockFunction]}
     />
-    <h3>
+    <h2
+      className="h3"
+    >
       filters
-    </h3>
+    </h2>
   </div>
   <QualityGateFilter
     onQueryChange={[MockFunction]}

server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx

@@ -94,9 +94,9 @@ function renderFirstLine(project: Props['project'], handleFavorite: Props['handl
             </span>
           </Tooltip>
         )}
-        <h2 className="project-card-name text-ellipsis" title={name}>
+        <h3 className="h2 project-card-name text-ellipsis" title={name}>
           {needIssueSync ? name : <Link to={getProjectUrl(key)}>{name}</Link>}
-        </h2>
+        </h3>
 
         {analysisDate && (
           <>

server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/__snapshots__/ProjectCard-test.tsx.snap

@@ -32,8 +32,8 @@ exports[`should display applications 1`] = `
           />
         </span>
       </Tooltip>
-      <h2
-        className="project-card-name text-ellipsis"
+      <h3
+        className="h2 project-card-name text-ellipsis"
         title="Foo"
       >
         <Link
@@ -51,7 +51,7 @@ exports[`should display applications 1`] = `
         >
           Foo
         </Link>
-      </h2>
+      </h3>
       <ProjectCardQualityGate
         status="OK"
       />
@@ -140,8 +140,8 @@ exports[`should display applications: with project count 1`] = `
           />
         </span>
       </Tooltip>
-      <h2
-        className="project-card-name text-ellipsis"
+      <h3
+        className="h2 project-card-name text-ellipsis"
         title="Foo"
       >
         <Link
@@ -159,7 +159,7 @@ exports[`should display applications: with project count 1`] = `
         >
           Foo
         </Link>
-      </h2>
+      </h3>
       <ProjectCardQualityGate
         status="OK"
       />
@@ -229,8 +229,8 @@ exports[`should display configure analysis button for logged in user: default 1`
     <div
       className="project-card-main big-padded padded-bottom display-flex-center"
     >
-      <h2
-        className="project-card-name text-ellipsis"
+      <h3
+        className="h2 project-card-name text-ellipsis"
         title="Foo"
       >
         <Link
@@ -248,7 +248,7 @@ exports[`should display configure analysis button for logged in user: default 1`
         >
           Foo
         </Link>
-      </h2>
+      </h3>
     </div>
     <div
       className="project-card-meta big-padded padded-bottom display-flex-center"
@@ -319,12 +319,12 @@ exports[`should display configure analysis button for logged in user: hidden if
     <div
       className="project-card-main big-padded padded-bottom display-flex-center"
     >
-      <h2
-        className="project-card-name text-ellipsis"
+      <h3
+        className="h2 project-card-name text-ellipsis"
         title="Foo"
       >
         Foo
-      </h2>
+      </h3>
     </div>
     <div
       className="project-card-meta big-padded padded-bottom display-flex-center"
@@ -379,12 +379,12 @@ exports[`should display correclty when project need issue synch 1`] = `
     <div
       className="project-card-main big-padded padded-bottom display-flex-center"
     >
-      <h2
-        className="project-card-name text-ellipsis"
+      <h3
+        className="h2 project-card-name text-ellipsis"
         title="Foo"
       >
         Foo
-      </h2>
+      </h3>
       <ProjectCardQualityGate
         status="OK"
       />
@@ -453,8 +453,8 @@ exports[`should display not analyzed yet 1`] = `
     <div
       className="project-card-main big-padded padded-bottom display-flex-center"
     >
-      <h2
-        className="project-card-name text-ellipsis"
+      <h3
+        className="h2 project-card-name text-ellipsis"
         title="Foo"
       >
         <Link
@@ -472,7 +472,7 @@ exports[`should display not analyzed yet 1`] = `
         >
           Foo
         </Link>
-      </h2>
+      </h3>
     </div>
     <div
       className="project-card-meta big-padded padded-bottom display-flex-center"
@@ -527,8 +527,8 @@ exports[`should display the overall measures and quality gate 1`] = `
     <div
       className="project-card-main big-padded padded-bottom display-flex-center"
     >
-      <h2
-        className="project-card-name text-ellipsis"
+      <h3
+        className="h2 project-card-name text-ellipsis"
         title="Foo"
       >
         <Link
@@ -546,7 +546,7 @@ exports[`should display the overall measures and quality gate 1`] = `
         >
           Foo
         </Link>
-      </h2>
+      </h3>
       <ProjectCardQualityGate
         status="OK"
       />

server/sonar-web/src/main/js/apps/projects/filters/FilterHeader.tsx

@@ -27,7 +27,7 @@ interface Props {
 export default function FilterHeader(props: Props) {
   return (
     <div className="search-navigator-facet-header projects-facet-header">
-      {props.name}
+      <h3 className="h4">{props.name}</h3>
       {props.children}
     </div>
   );

server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/FilterHeader-test.tsx.snap

@@ -4,7 +4,11 @@ exports[`renders 1`] = `
 <div
   className="search-navigator-facet-header projects-facet-header"
 >
-  foo
+  <h3
+    className="h4"
+  >
+    foo
+  </h3>
 </div>
 `;
 
@@ -12,7 +16,11 @@ exports[`renders with children 1`] = `
 <div
   className="search-navigator-facet-header projects-facet-header"
 >
-  foo
+  <h3
+    className="h4"
+  >
+    foo
+  </h3>
   <div />
 </div>
 `;

server/sonar-web/src/main/js/apps/projects/visualizations/Visualizations.tsx

@@ -78,9 +78,9 @@ export default class Visualizations extends React.PureComponent<Props> {
 
     return (
       <div className="boxed-group projects-visualizations">
-        <div className="projects-visualization">
+        <main className="projects-visualization">
           {projects != null && this.renderVisualization(projects)}
-        </div>
+        </main>
         {this.renderFooter()}
       </div>
     );

server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/__snapshots__/Visualizations-test.tsx.snap

@@ -4,14 +4,14 @@ exports[`renders 1`] = `
 <div
   className="boxed-group projects-visualizations"
 >
-  <div
+  <main
     className="projects-visualization"
   >
     <Coverage
       helpText="projects.visualization.coverage.description"
       projects={Array []}
     />
-  </div>
+  </main>
 </div>
 `;
 
@@ -19,14 +19,14 @@ exports[`renders when limit is reached 1`] = `
 <div
   className="boxed-group projects-visualizations"
 >
-  <div
+  <main
     className="projects-visualization"
   >
     <Coverage
       helpText="projects.visualization.coverage.description"
       projects={Array []}
     />
-  </div>
+  </main>
   <footer
     className="projects-visualizations-footer"
   >

server/sonar-web/src/main/js/components/search-navigator.css

@@ -330,6 +330,12 @@ a.search-navigator-facet:focus,
   font-weight: 400;
 }
 
+.search-navigator-facet-header > h3,
+.search-navigator-facet-header > h4 {
+  line-height: inherit;
+  display: inline;
+}
+
 .search-navigator-facet-header-value {
   display: block;
   overflow: hidden;

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_projects=List of projects
 load_more=Load more
 load_verb=Load
 login=Login