SONAR-16780 [894864] Link or button text lacks 4.5:1 contrast ratio on hover or focus

diff --git a/server/sonar-web/src/main/js/app/styles/init/links.css b/server/sonar-web/src/main/js/app/styles/init/links.css
index dc4c7c56b5e44d99dd88ff12d6c3f08c3b0bf9fb..dd67ae0530a1391bdb794cfa36b8e810cb200731 100644 (file)
--- a/server/sonar-web/src/main/js/app/styles/init/links.css
+++ b/server/sonar-web/src/main/js/app/styles/init/links.css
@@ -44,3 +44,8 @@ a img {
 .link-no-underline:hover {
   border-bottom-color: var(--primary) !important;
 }
+
+.link-rating,
+.link-rating:hover {
+  border-bottom: 0 !important;
+}

diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js
index 9a73cecbd3bd52efec8574a62c156e43a6196e6a..cc81ebcdd20886d7a40557665cc01f196a9e3f52 100644 (file)
--- a/server/sonar-web/src/main/js/app/theme.js
+++ b/server/sonar-web/src/main/js/app/theme.js
@@ -35,7 +35,6 @@ module.exports = {
     orange: '#ed7d20',
     red: '#D02F3A',
     purple: '#9139d4',
-    white: '#ffffff',
 
     gray94: '#efefef',
     gray80: '#cdcdcd',
@@ -149,9 +148,20 @@ module.exports = {
 
     info500: '#0271B9',
 
+    success500: '#008A25',
+    successVariant: '#B0D513',
+
+    warningVariant: '#EABE06',
+    warningAccent: '#ED7D20',
+
+    error500: '#D02F3A',
+
     neutral600: '#666666',
     neutral800: '#333333',
 
+    white: '#FFFFFF',
+
+    black87: 'rgba(0, 0, 0, 0.87)',
     black38: 'rgba(0, 0, 0, 0.38)'
   },
 

diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/MeasureCell.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/MeasureCell.tsx
index 858d0213472a5bcc30a268541fe390963504c98e..0602e2ab4fd66a4b0322abd3a4b1f1ef123886c8 100644 (file)
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/MeasureCell.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/MeasureCell.tsx
@@ -37,7 +37,7 @@ export default function MeasureCell({ component, measure, metric }: Props) {
   return (
     <td className="thin nowrap text-right">
       <span id={`component-measures-component-measure-${component.key}-${metric.key}`}>
-        <Measure metricKey={metric.key} metricType={metric.type} value={value} />
+        <Measure metricKey={metric.key} metricType={metric.type} value={value} small={true} />
       </span>
     </td>
   );

diff --git a/server/sonar-web/src/main/js/apps/overview/components/IssueRating.tsx b/server/sonar-web/src/main/js/apps/overview/components/IssueRating.tsx
index b81a710a55989d10ef6286c71d5fbd91b3027565..df9280474bff146e438277b022fb6911506df3ac 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/IssueRating.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/IssueRating.tsx
@@ -60,7 +60,7 @@ function renderRatingLink(props: IssueRatingProps) {
       <span>
         <DrilldownLink
           branchLike={branchLike}
-          className="link-no-underline"
+          className="link-no-underline link-rating"
           component={component.key}
           metric={rating}>
           <Rating value={value} />

diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/IssueRating-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/IssueRating-test.tsx.snap
index 6bc60fbd24e08a881dc8ec66445d93fa43dce9b8..e692f12d8c54b22586f55821ea18d7c56cfdefca 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/IssueRating-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/IssueRating-test.tsx.snap
@@ -27,7 +27,7 @@ exports[`should render correctly for bugs 1`] = `
             "title": "Foo Bar feature",
           }
         }
-        className="link-no-underline"
+        className="link-no-underline link-rating"
         component="my-project"
         metric="reliability_rating"
       >
@@ -67,7 +67,7 @@ exports[`should render correctly for bugs 2`] = `
             "title": "Foo Bar feature",
           }
         }
-        className="link-no-underline"
+        className="link-no-underline link-rating"
         component="my-project"
         metric="new_reliability_rating"
       >
@@ -107,7 +107,7 @@ exports[`should render correctly for code smells 1`] = `
             "title": "Foo Bar feature",
           }
         }
-        className="link-no-underline"
+        className="link-no-underline link-rating"
         component="my-project"
         metric="sqale_rating"
       >
@@ -147,7 +147,7 @@ exports[`should render correctly for code smells 2`] = `
             "title": "Foo Bar feature",
           }
         }
-        className="link-no-underline"
+        className="link-no-underline link-rating"
         component="my-project"
         metric="new_maintainability_rating"
       >
@@ -187,7 +187,7 @@ exports[`should render correctly for vulnerabilities 1`] = `
             "title": "Foo Bar feature",
           }
         }
-        className="link-no-underline"
+        className="link-no-underline link-rating"
         component="my-project"
         metric="security_rating"
       >
@@ -227,7 +227,7 @@ exports[`should render correctly for vulnerabilities 2`] = `
             "title": "Foo Bar feature",
           }
         }
-        className="link-no-underline"
+        className="link-no-underline link-rating"
         component="my-project"
         metric="new_security_rating"
       >

diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap
index 8a34282278495c420f23ad4b1f9eca9bc3ece5af..bdc478b2d8e392854a414a18aeade4cd611ef829 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap
@@ -10,7 +10,7 @@ exports[`should render dark helptooltip properly: dark 1`] = `
 >
   <HelpIcon
     fill="rgba(0, 0, 0, 0.25)"
-    fillInner="#ffffff"
+    fillInner="#FFFFFF"
     size={14}
   />
 </HelpTooltip>

diff --git a/server/sonar-web/src/main/js/components/ui/Rating.css b/server/sonar-web/src/main/js/components/ui/Rating.css
index 58c687c4ac39da0266cf5e46a965e0a2ed9ffef0..0304c9fdb30dc00cdc5c4d08de697bc7594aefd5 100644 (file)
--- a/server/sonar-web/src/main/js/components/ui/Rating.css
+++ b/server/sonar-web/src/main/js/components/ui/Rating.css
@@ -21,79 +21,55 @@
   display: inline-block;
   width: var(--controlHeight);
   height: var(--controlHeight);
-  line-height: var(--controlHeight);
+  line-height: calc(var(--controlHeight) - 1px);
   border-radius: var(--controlHeight);
+  border: 1px solid var(--black38);
   box-sizing: border-box;
-  color: #fff;
   font-size: var(--bigFontSize);
   font-weight: 400;
   text-align: center;
-  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
 }
 
 .rating-muted {
   background-color: var(--gray71) !important;
-  color: #fff !important;
-  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35) !important;
-}
-
-a > .rating {
-  margin-bottom: -1px;
-  border-bottom: 1px solid;
-  transition: all 0.2s ease;
-}
-
-a > .rating:hover {
-  opacity: 0.8;
+  color: var(--white) !important;
 }
 
+a > .rating-A,
 .rating-A {
-  line-height: 23px;
-  background-color: var(--green);
-}
-
-a > .rating-A {
-  border-bottom-color: var(--green);
+  color: var(--white);
+  background-color: var(--success500);
 }
 
+a > .rating-B,
 .rating-B {
-  background-color: var(--lightGreen);
-}
-
-a .rating-B {
-  border-bottom-color: var(--lightGreen);
+  color: var(--black87);
+  background-color: var(--successVariant);
 }
 
+a > .rating-C,
 .rating-C {
-  background-color: var(--yellow);
-}
-
-a .rating-C {
-  border-bottom-color: var(--yellow);
+  color: var(--black87);
+  background-color: var(--warningVariant);
 }
 
+a > .rating-D,
 .rating-D {
-  background-color: var(--orange);
-}
-
-a .rating-D {
-  border-bottom-color: var(--orange);
+  color: var(--black87);
+  background-color: var(--warningAccent);
 }
 
+a > .rating-E,
 .rating-E {
-  background-color: var(--red);
-}
-
-a .rating-E {
-  border-bottom-color: var(--red);
+  color: var(--white);
+  background-color: var(--error500);
 }
 
 .rating-small {
   width: 20px;
   height: 20px;
-  line-height: 20px;
+  line-height: 19px;
   margin-top: -1px;
   margin-bottom: -1px;
   font-size: var(--mediumFontSize);
-  font-weight: bold;
 }