SONAR-16703 [891684] Visual list is not marked up as list

2 files changed, 217 insertions, 167 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/ProjectInformationRenderer.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/ProjectInformationRenderer.tsx
index 8c50d12e51c..591876798e2 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/ProjectInformationRenderer.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/ProjectInformationRenderer.tsx
@@ -94,18 +94,16 @@ export function ProjectInformationRenderer(props: ProjectInformationRendererProp
         {!isApp &&
           (component.qualityGate ||
             (component.qualityProfiles && component.qualityProfiles.length > 0)) && (
-            <>
-              <div className="big-padded bordered-bottom">
-                {component.qualityGate && <MetaQualityGate qualityGate={component.qualityGate} />}
+            <div className="big-padded bordered-bottom">
+              {component.qualityGate && <MetaQualityGate qualityGate={component.qualityGate} />}
 
-                {component.qualityProfiles && component.qualityProfiles.length > 0 && (
-                  <MetaQualityProfiles
-                    headerClassName={component.qualityGate ? 'big-spacer-top' : undefined}
-                    profiles={component.qualityProfiles}
-                  />
-                )}
-              </div>
-            </>
+              {component.qualityProfiles && component.qualityProfiles.length > 0 && (
+                <MetaQualityProfiles
+                  headerClassName={component.qualityGate ? 'big-spacer-top' : undefined}
+                  profiles={component.qualityProfiles}
+                />
+              )}
+            </div>
           )}
 
         {!isApp && <MetaLinks component={component} />}
@@ -114,37 +112,43 @@ export function ProjectInformationRenderer(props: ProjectInformationRendererProp
           <MetaKey componentKey={component.key} qualifier={component.qualifier} />
         </div>
 
-        {canUseBadges && (
-          <DrawerLink
-            label={translate('overview.badges.get_badge', component.qualifier)}
-            onPageChange={props.onPageChange}
-            to={ProjectInformationPages.badges}
-          />
-        )}
-        {canConfigureNotifications && (
-          <DrawerLink
-            label={translate('project.info.to_notifications')}
-            onPageChange={props.onPageChange}
-            to={ProjectInformationPages.notifications}
-          />
-        )}
-        {component.qualifier === ComponentQualifier.Project &&
-          appState.regulatoryReportFeatureEnabled && (
-            <div className="big-padded bordered-bottom">
-              <ModalButton
-                modal={({ onClose }) => (
-                  <RegulatoryReportModal
-                    component={component}
-                    branchLike={branchLike}
-                    onClose={onClose}
-                  />
-                )}>
-                {({ onClick }) => (
-                  <ButtonLink onClick={onClick}>{translate('regulatory_report.page')}</ButtonLink>
-                )}
-              </ModalButton>
-            </div>
+        <ul>
+          {canUseBadges && (
+            <li>
+              <DrawerLink
+                label={translate('overview.badges.get_badge', component.qualifier)}
+                onPageChange={props.onPageChange}
+                to={ProjectInformationPages.badges}
+              />
+            </li>
+          )}
+          {canConfigureNotifications && (
+            <li>
+              <DrawerLink
+                label={translate('project.info.to_notifications')}
+                onPageChange={props.onPageChange}
+                to={ProjectInformationPages.notifications}
+              />
+            </li>
           )}
+          {component.qualifier === ComponentQualifier.Project &&
+            appState.regulatoryReportFeatureEnabled && (
+              <li className="big-padded bordered-bottom">
+                <ModalButton
+                  modal={({ onClose }) => (
+                    <RegulatoryReportModal
+                      component={component}
+                      branchLike={branchLike}
+                      onClose={onClose}
+                    />
+                  )}>
+                  {({ onClick }) => (
+                    <ButtonLink onClick={onClick}>{translate('regulatory_report.page')}</ButtonLink>
+                  )}
+                </ModalButton>
+              </li>
+            )}
+        </ul>
       </div>
     </>
   );
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/ProjectInformationRenderer-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/ProjectInformationRenderer-test.tsx.snap
index 3ea8de111d9..5a7ceaf41da 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/ProjectInformationRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/ProjectInformationRenderer-test.tsx.snap
@@ -78,25 +78,31 @@ exports[`should handle missing quality profiles and quality gates 1`] = `
         qualifier="TRK"
       />
     </div>
-    <Memo(DrawerLink)
-      label="overview.badges.get_badge.TRK"
-      onPageChange={[MockFunction]}
-      to={1}
-    />
-    <Memo(DrawerLink)
-      label="project.info.to_notifications"
-      onPageChange={[MockFunction]}
-      to={2}
-    />
-    <div
-      className="big-padded bordered-bottom"
-    >
-      <ModalButton
-        modal={[Function]}
+    <ul>
+      <li>
+        <Memo(DrawerLink)
+          label="overview.badges.get_badge.TRK"
+          onPageChange={[MockFunction]}
+          to={1}
+        />
+      </li>
+      <li>
+        <Memo(DrawerLink)
+          label="project.info.to_notifications"
+          onPageChange={[MockFunction]}
+          to={2}
+        />
+      </li>
+      <li
+        className="big-padded bordered-bottom"
       >
-        <Component />
-      </ModalButton>
-    </div>
+        <ModalButton
+          modal={[Function]}
+        >
+          <Component />
+        </ModalButton>
+      </li>
+    </ul>
   </div>
 </Fragment>
 `;
@@ -245,25 +251,31 @@ exports[`should render a private project correctly 1`] = `
         qualifier="TRK"
       />
     </div>
-    <Memo(DrawerLink)
-      label="overview.badges.get_badge.TRK"
-      onPageChange={[MockFunction]}
-      to={1}
-    />
-    <Memo(DrawerLink)
-      label="project.info.to_notifications"
-      onPageChange={[MockFunction]}
-      to={2}
-    />
-    <div
-      className="big-padded bordered-bottom"
-    >
-      <ModalButton
-        modal={[Function]}
+    <ul>
+      <li>
+        <Memo(DrawerLink)
+          label="overview.badges.get_badge.TRK"
+          onPageChange={[MockFunction]}
+          to={1}
+        />
+      </li>
+      <li>
+        <Memo(DrawerLink)
+          label="project.info.to_notifications"
+          onPageChange={[MockFunction]}
+          to={2}
+        />
+      </li>
+      <li
+        className="big-padded bordered-bottom"
       >
-        <Component />
-      </ModalButton>
-    </div>
+        <ModalButton
+          modal={[Function]}
+        >
+          <Component />
+        </ModalButton>
+      </li>
+    </ul>
   </div>
 </Fragment>
 `;
@@ -355,16 +367,22 @@ exports[`should render an app correctly: default 1`] = `
         qualifier="APP"
       />
     </div>
-    <Memo(DrawerLink)
-      label="overview.badges.get_badge.APP"
-      onPageChange={[MockFunction]}
-      to={1}
-    />
-    <Memo(DrawerLink)
-      label="project.info.to_notifications"
-      onPageChange={[MockFunction]}
-      to={2}
-    />
+    <ul>
+      <li>
+        <Memo(DrawerLink)
+          label="overview.badges.get_badge.APP"
+          onPageChange={[MockFunction]}
+          to={1}
+        />
+      </li>
+      <li>
+        <Memo(DrawerLink)
+          label="project.info.to_notifications"
+          onPageChange={[MockFunction]}
+          to={2}
+        />
+      </li>
+    </ul>
   </div>
 </Fragment>
 `;
@@ -513,16 +531,22 @@ exports[`should render app correctly when regulatoryReportFeatureEnabled is fals
         qualifier="TRK"
       />
     </div>
-    <Memo(DrawerLink)
-      label="overview.badges.get_badge.TRK"
-      onPageChange={[MockFunction]}
-      to={1}
-    />
-    <Memo(DrawerLink)
-      label="project.info.to_notifications"
-      onPageChange={[MockFunction]}
-      to={2}
-    />
+    <ul>
+      <li>
+        <Memo(DrawerLink)
+          label="overview.badges.get_badge.TRK"
+          onPageChange={[MockFunction]}
+          to={1}
+        />
+      </li>
+      <li>
+        <Memo(DrawerLink)
+          label="project.info.to_notifications"
+          onPageChange={[MockFunction]}
+          to={2}
+        />
+      </li>
+    </ul>
   </div>
 </Fragment>
 `;
@@ -671,25 +695,31 @@ exports[`should render correctly: default 1`] = `
         qualifier="TRK"
       />
     </div>
-    <Memo(DrawerLink)
-      label="overview.badges.get_badge.TRK"
-      onPageChange={[MockFunction]}
-      to={1}
-    />
-    <Memo(DrawerLink)
-      label="project.info.to_notifications"
-      onPageChange={[MockFunction]}
-      to={2}
-    />
-    <div
-      className="big-padded bordered-bottom"
-    >
-      <ModalButton
-        modal={[Function]}
+    <ul>
+      <li>
+        <Memo(DrawerLink)
+          label="overview.badges.get_badge.TRK"
+          onPageChange={[MockFunction]}
+          to={1}
+        />
+      </li>
+      <li>
+        <Memo(DrawerLink)
+          label="project.info.to_notifications"
+          onPageChange={[MockFunction]}
+          to={2}
+        />
+      </li>
+      <li
+        className="big-padded bordered-bottom"
       >
-        <Component />
-      </ModalButton>
-    </div>
+        <ModalButton
+          modal={[Function]}
+        >
+          <Component />
+        </ModalButton>
+      </li>
+    </ul>
   </div>
 </Fragment>
 `;
@@ -838,20 +868,24 @@ exports[`should render correctly: no badges 1`] = `
         qualifier="TRK"
       />
     </div>
-    <Memo(DrawerLink)
-      label="project.info.to_notifications"
-      onPageChange={[MockFunction]}
-      to={2}
-    />
-    <div
-      className="big-padded bordered-bottom"
-    >
-      <ModalButton
-        modal={[Function]}
+    <ul>
+      <li>
+        <Memo(DrawerLink)
+          label="project.info.to_notifications"
+          onPageChange={[MockFunction]}
+          to={2}
+        />
+      </li>
+      <li
+        className="big-padded bordered-bottom"
       >
-        <Component />
-      </ModalButton>
-    </div>
+        <ModalButton
+          modal={[Function]}
+        >
+          <Component />
+        </ModalButton>
+      </li>
+    </ul>
   </div>
 </Fragment>
 `;
@@ -1000,15 +1034,17 @@ exports[`should render correctly: no badges, no notifications 1`] = `
         qualifier="TRK"
       />
     </div>
-    <div
-      className="big-padded bordered-bottom"
-    >
-      <ModalButton
-        modal={[Function]}
+    <ul>
+      <li
+        className="big-padded bordered-bottom"
       >
-        <Component />
-      </ModalButton>
-    </div>
+        <ModalButton
+          modal={[Function]}
+        >
+          <Component />
+        </ModalButton>
+      </li>
+    </ul>
   </div>
 </Fragment>
 `;
@@ -1157,20 +1193,24 @@ exports[`should render correctly: with notifications 1`] = `
         qualifier="TRK"
       />
     </div>
-    <Memo(DrawerLink)
-      label="overview.badges.get_badge.TRK"
-      onPageChange={[MockFunction]}
-      to={1}
-    />
-    <div
-      className="big-padded bordered-bottom"
-    >
-      <ModalButton
-        modal={[Function]}
+    <ul>
+      <li>
+        <Memo(DrawerLink)
+          label="overview.badges.get_badge.TRK"
+          onPageChange={[MockFunction]}
+          to={1}
+        />
+      </li>
+      <li
+        className="big-padded bordered-bottom"
       >
-        <Component />
-      </ModalButton>
-    </div>
+        <ModalButton
+          modal={[Function]}
+        >
+          <Component />
+        </ModalButton>
+      </li>
+    </ul>
   </div>
 </Fragment>
 `;
@@ -1320,25 +1360,31 @@ exports[`should render with description 1`] = `
         qualifier="TRK"
       />
     </div>
-    <Memo(DrawerLink)
-      label="overview.badges.get_badge.TRK"
-      onPageChange={[MockFunction]}
-      to={1}
-    />
-    <Memo(DrawerLink)
-      label="project.info.to_notifications"
-      onPageChange={[MockFunction]}
-      to={2}
-    />
-    <div
-      className="big-padded bordered-bottom"
-    >
-      <ModalButton
-        modal={[Function]}
+    <ul>
+      <li>
+        <Memo(DrawerLink)
+          label="overview.badges.get_badge.TRK"
+          onPageChange={[MockFunction]}
+          to={1}
+        />
+      </li>
+      <li>
+        <Memo(DrawerLink)
+          label="project.info.to_notifications"
+          onPageChange={[MockFunction]}
+          to={2}
+        />
+      </li>
+      <li
+        className="big-padded bordered-bottom"
       >
-        <Component />
-      </ModalButton>
-    </div>
+        <ModalButton
+          modal={[Function]}
+        >
+          <Component />
+        </ModalButton>
+      </li>
+    </ul>
   </div>
 </Fragment>
 `;