SONAR-16760 [894689] Button: Button is missing both a role and a name

2 files changed, 50 insertions, 29 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx
index a093a9ed7f4..800bbee2f37 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx
@@ -57,8 +57,10 @@ export function QualityGatePanel(props: QualityGatePanelProps) {
 
   return (
     <div className="overview-panel" data-test="overview__quality-gate-panel">
-      <h2 className="overview-panel-title display-inline-flex-center">
-        {translate('overview.quality_gate')}{' '}
+      <div className="display-flex-center spacer-bottom">
+        <h2 className="overview-panel-title null-spacer-bottom">
+          {translate('overview.quality_gate')}{' '}
+        </h2>
         <HelpTooltip
           className="little-spacer-left"
           overlay={
@@ -67,8 +69,7 @@ export function QualityGatePanel(props: QualityGatePanelProps) {
             </div>
           }
         />
-      </h2>
-
+      </div>
       {showIgnoredConditionWarning && (
         <Alert className="big-spacer-bottom" display="inline" variant="info">
           <span className="text-middle">
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/QualityGatePanel-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/QualityGatePanel-test.tsx.snap
index bc040b08461..7c3f2892c4e 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/QualityGatePanel-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/QualityGatePanel-test.tsx.snap
@@ -5,11 +5,15 @@ exports[`should render correctly for applications 1`] = `
   className="overview-panel"
   data-test="overview__quality-gate-panel"
 >
-  <h2
-    className="overview-panel-title display-inline-flex-center"
+  <div
+    className="display-flex-center spacer-bottom"
   >
-    overview.quality_gate
-     
+    <h2
+      className="overview-panel-title null-spacer-bottom"
+    >
+      overview.quality_gate
+       
+    </h2>
     <HelpTooltip
       className="little-spacer-left"
       overlay={
@@ -20,7 +24,7 @@ exports[`should render correctly for applications 1`] = `
         </div>
       }
     />
-  </h2>
+  </div>
   <div
     className="overview-panel-content"
   >
@@ -265,11 +269,15 @@ exports[`should render correctly for applications 2`] = `
   className="overview-panel"
   data-test="overview__quality-gate-panel"
 >
-  <h2
-    className="overview-panel-title display-inline-flex-center"
+  <div
+    className="display-flex-center spacer-bottom"
   >
-    overview.quality_gate
-     
+    <h2
+      className="overview-panel-title null-spacer-bottom"
+    >
+      overview.quality_gate
+       
+    </h2>
     <HelpTooltip
       className="little-spacer-left"
       overlay={
@@ -280,7 +288,7 @@ exports[`should render correctly for applications 2`] = `
         </div>
       }
     />
-  </h2>
+  </div>
   <div
     className="overview-panel-content"
   >
@@ -432,11 +440,15 @@ exports[`should render correctly for projects 1`] = `
   className="overview-panel"
   data-test="overview__quality-gate-panel"
 >
-  <h2
-    className="overview-panel-title display-inline-flex-center"
+  <div
+    className="display-flex-center spacer-bottom"
   >
-    overview.quality_gate
-     
+    <h2
+      className="overview-panel-title null-spacer-bottom"
+    >
+      overview.quality_gate
+       
+    </h2>
     <HelpTooltip
       className="little-spacer-left"
       overlay={
@@ -447,7 +459,7 @@ exports[`should render correctly for projects 1`] = `
         </div>
       }
     />
-  </h2>
+  </div>
   <div
     className="overview-panel-content"
   >
@@ -565,11 +577,15 @@ exports[`should render correctly for projects 2`] = `
   className="overview-panel"
   data-test="overview__quality-gate-panel"
 >
-  <h2
-    className="overview-panel-title display-inline-flex-center"
+  <div
+    className="display-flex-center spacer-bottom"
   >
-    overview.quality_gate
-     
+    <h2
+      className="overview-panel-title null-spacer-bottom"
+    >
+      overview.quality_gate
+       
+    </h2>
     <HelpTooltip
       className="little-spacer-left"
       overlay={
@@ -580,7 +596,7 @@ exports[`should render correctly for projects 2`] = `
         </div>
       }
     />
-  </h2>
+  </div>
   <div
     className="overview-panel-content"
   >
@@ -610,11 +626,15 @@ exports[`should render correctly for projects 3`] = `
   className="overview-panel"
   data-test="overview__quality-gate-panel"
 >
-  <h2
-    className="overview-panel-title display-inline-flex-center"
+  <div
+    className="display-flex-center spacer-bottom"
   >
-    overview.quality_gate
-     
+    <h2
+      className="overview-panel-title null-spacer-bottom"
+    >
+      overview.quality_gate
+       
+    </h2>
     <HelpTooltip
       className="little-spacer-left"
       overlay={
@@ -625,7 +645,7 @@ exports[`should render correctly for projects 3`] = `
         </div>
       }
     />
-  </h2>
+  </div>
   <Alert
     className="big-spacer-bottom"
     display="inline"