SONAR-16894 SONAR-16899 [892238] [892241]

* [892238] Link or button text lacks 4.5:1 contrast ratio on hover or focus
* [892241] An icon lacks 3 to 1 contrast ratio

15 files changed, 119 insertions, 76 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css
index d70e4bb83db..4634417e48a 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css
+++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css
@@ -24,7 +24,7 @@
 }
 
 .branch-like-navigation-toggler:hover {
-  border-color: var(--black38);
+  border-color: var(--blacka38);
   color: inherit !important;
 }
 
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 ad9bca70ec8..1bb180068e0 100644
--- a/server/sonar-web/src/main/js/app/styles/init/links.css
+++ b/server/sonar-web/src/main/js/app/styles/init/links.css
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 a {
-  border-bottom: 1px solid var(--primary40);
+  border-bottom: 1px solid var(--primarya40);
   color: var(--primary);
   cursor: pointer;
   outline: none;
diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js
index c4b725f4e82..4d8b86bdbf0 100644
--- a/server/sonar-web/src/main/js/app/theme.js
+++ b/server/sonar-web/src/main/js/app/theme.js
@@ -140,28 +140,39 @@ module.exports = {
     darkBackgroundFontColor: '#f6f8fa',
 
     // new color palette
-    // some of these colors duplicate what we have above, but this will make it
+    // Some of these colors duplicate what we have above, but this will make it
     // easier to align with the UX designers on what colors to use where.
+    // Colors that have transparency are suffixed with an "a" followed by the percentage
+    // value of the alpha channel.
     primary: '#236a97',
-    primary40: 'rgba(35, 107, 151, 0.4)',
+    primarya40: 'rgba(35, 107, 151, 0.40)',
 
     info500: '#0271B9',
 
     success500: '#008A25',
+    success500a20: 'rgba(0, 138, 37, 0.20)',
     successVariant: '#B0D513',
+    successVarianta20: 'rgba(177, 213, 19, 0.20)',
+    successVariantDark: '#809E00',
 
+    warning: '#B95E04',
     warningVariant: '#EABE06',
+    warningVarianta20: 'rgba(234, 188, 6, 0.20)',
+    warningVariantDark: '#B18F00',
     warningAccent: '#ED7D20',
+    warningAccenta20: 'rgba(237, 124, 32, 0.20)',
 
     error500: '#D02F3A',
+    error500a20: 'rgba(208, 47, 58, 0.20)',
 
     neutral600: '#666666',
     neutral800: '#333333',
 
     white: '#FFFFFF',
 
-    black87: 'rgba(0, 0, 0, 0.87)',
-    black38: 'rgba(0, 0, 0, 0.38)'
+    black: '#000000',
+    blacka87: 'rgba(0, 0, 0, 0.87)',
+    blacka38: 'rgba(0, 0, 0, 0.38)'
   },
 
   sizes: {
diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx
index fa15cae3a51..9d711a94208 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import theme from '../../../app/theme';
 import OriginalBubbleChart from '../../../components/charts/BubbleChart';
 import ColorRatingsLegend from '../../../components/charts/ColorRatingsLegend';
 import Link from '../../../components/common/Link';
@@ -156,7 +157,10 @@ export default class BubbleChart extends React.PureComponent<Props, State> {
           x,
           y,
           size,
-          color: colorRating !== undefined ? RATING_COLORS[colorRating - 1] : undefined,
+          color:
+            colorRating !== undefined
+              ? RATING_COLORS[colorRating - 1]
+              : { fill: theme.colors.primary, stroke: theme.colors.primary },
           data: component,
           tooltip: this.getTooltip(component, { x, y, size, colors }, metrics)
         };
diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.tsx
index d564ef2fdaf..a06cf271e3e 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.tsx
@@ -26,6 +26,7 @@ import ColorGradientLegend from '../../../components/charts/ColorGradientLegend'
 import TreeMap, { TreeMapItem } from '../../../components/charts/TreeMap';
 import QualifierIcon from '../../../components/icons/QualifierIcon';
 import { getComponentMeasureUniqueKey } from '../../../helpers/component';
+import { RATING_COLORS } from '../../../helpers/constants';
 import { getLocalizedMetricName, translate, translateWithParameters } from '../../../helpers/l10n';
 import { formatMeasure, isDiffMetric } from '../../../helpers/measures';
 import { isDefined } from '../../../helpers/types';
@@ -44,8 +45,13 @@ interface State {
 }
 
 const HEIGHT = 500;
-const COLORS = [colors.green, colors.lightGreen, colors.yellow, colors.orange, colors.red];
-const LEVEL_COLORS = [colors.red, colors.orange, colors.green, colors.gray71];
+const COLORS = RATING_COLORS.map(({ fill }) => fill);
+const LEVEL_COLORS = [
+  colors.error500,
+  colors.orange,
+  colors.success500,
+  colors.disabledQualityGate
+];
 const NA_GRADIENT = `linear-gradient(-45deg, ${colors.gray71} 25%, ${colors.gray60} 25%, ${colors.gray60} 50%, ${colors.gray71} 50%, ${colors.gray71} 75%, ${colors.gray60} 75%, ${colors.gray60} 100%)`;
 
 export default class TreeMapView extends React.PureComponent<Props, State> {
diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap
index d9c90ef8efd..75d26dc717f 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap
@@ -276,7 +276,11 @@ exports[`should render correctly: default 1`] = `
       items={
         Array [
           Object {
-            "color": "#b0d513",
+            "color": Object {
+              "fill": "#B0D513",
+              "fillTransparent": "rgba(177, 213, 19, 0.20)",
+              "stroke": "#B0D513",
+            },
             "data": Object {
               "key": "foo:src/index.tsx",
               "leak": "1.0",
@@ -485,7 +489,11 @@ exports[`should render correctly: only showing first 500 files 1`] = `
       items={
         Array [
           Object {
-            "color": "#b0d513",
+            "color": Object {
+              "fill": "#B0D513",
+              "fillTransparent": "rgba(177, 213, 19, 0.20)",
+              "stroke": "#B0D513",
+            },
             "data": Object {
               "key": "foo:src/index.tsx",
               "leak": "1.0",
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css
index 41498aaf1a5..3ad0966c6fc 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css
@@ -95,7 +95,7 @@ button.hotspot-item:focus {
   padding: 0 var(--gridSize);
   font-weight: bold;
   border-radius: 2px;
-  border: 1px solid var(--black38);
+  border: 1px solid var(--blacka38);
 }
 
 .hotspot-risk-badge.HIGH {
@@ -103,11 +103,11 @@ button.hotspot-item:focus {
   background-color: var(--error500);
 }
 .hotspot-risk-badge.MEDIUM {
-  color: var(--black87);
+  color: var(--blacka87);
   background-color: var(--warningAccent);
 }
 .hotspot-risk-badge.LOW {
-  color: var(--black87);
+  color: var(--blacka87);
   background-color: var(--warningVariant);
 }
 
diff --git a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
index f1bc4005a10..bf1f077913f 100644
--- a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
@@ -33,7 +33,7 @@ import './BubbleChart.css';
 const TICKS_COUNT = 5;
 
 interface BubbleItem<T> {
-  color?: string;
+  color: { fill: string; stroke: string; hover?: string };
   key?: string;
   data?: T;
   size: number;
@@ -343,7 +343,7 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
 }
 
 interface BubbleProps<T> {
-  color?: string;
+  color: { fill: string; stroke: string; hover?: string };
   onClick?: (ref?: T) => void;
   data?: T;
   r: number;
@@ -367,7 +367,7 @@ function Bubble<T>(props: BubbleProps<T>) {
       <circle
         className="bubble-chart-bubble"
         r={props.r}
-        style={{ fill: props.color, stroke: props.color }}
+        style={{ fill: props.color.fill, stroke: props.color.stroke }}
         transform={`translate(${props.x}, ${props.y}) scale(${props.scale})`}
       />
     </a>
diff --git a/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css
index e9a6cc27297..ea980591587 100644
--- a/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css
+++ b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css
@@ -22,6 +22,21 @@
   justify-content: center;
 }
 
+.color-box-legend .link-checkbox .color-box-legend-rating {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  display: inline-block;
+  border: 1px solid transparent;
+  border-radius: 20px;
+  color: var(--blacka87);
+}
+
+.color-box-legend .link-checkbox[aria-checked='false'] .color-box-legend-rating {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+
 .color-box-legend > *:not(:first-child) {
   margin-left: 24px;
 }
diff --git a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx
index 21a5f0ba9ee..982d0fea5c6 100644
--- a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx
+++ b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx
@@ -23,6 +23,7 @@ import Tooltip from '../../components/controls/Tooltip';
 import { RATING_COLORS } from '../../helpers/constants';
 import { translateWithParameters } from '../../helpers/l10n';
 import { formatMeasure } from '../../helpers/measures';
+import Checkbox from '../controls/Checkbox';
 import './ColorBoxLegend.css';
 
 export interface ColorRatingsLegendProps {
@@ -44,25 +45,19 @@ export default function ColorRatingsLegend(props: ColorRatingsLegendProps) {
               'component_measures.legend.help_x',
               formatMeasure(rating, 'RATING')
             )}>
-            <a
-              aria-checked={!filters[rating]}
-              className={classNames('little-padded-bottom', {
-                filtered: filters[rating]
-              })}
-              href="#"
-              onClick={() => props.onRatingClick(rating)}
-              role="checkbox"
-              tabIndex={0}>
+            <Checkbox
+              className="display-flex-center"
+              checked={!filters[rating]}
+              onCheck={() => props.onRatingClick(rating)}>
               <span
-                className="color-box-legend-rect"
-                style={{ borderColor: RATING_COLORS[rating - 1] }}>
-                <span
-                  className="color-box-legend-rect-inner"
-                  style={{ backgroundColor: RATING_COLORS[rating - 1] }}
-                />
+                className="color-box-legend-rating little-spacer-left"
+                style={{
+                  borderColor: RATING_COLORS[rating - 1].stroke,
+                  backgroundColor: RATING_COLORS[rating - 1].fillTransparent
+                }}>
+                {formatMeasure(rating, 'RATING')}
               </span>
-              {formatMeasure(rating, 'RATING')}
-            </a>
+            </Checkbox>
           </Tooltip>
         </li>
       ))}
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx
index a42768183ab..d6f5b7577c2 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx
@@ -59,8 +59,8 @@ it('should display bubbles', () => {
 it('should render bubble links', () => {
   const wrapper = shallowRender({
     items: [
-      { x: 1, y: 10, size: 7 },
-      { x: 2, y: 30, size: 5 }
+      { x: 1, y: 10, size: 7, color: { fill: 'blue', stroke: 'blue' } },
+      { x: 2, y: 30, size: 5, color: { fill: 'green', stroke: 'green' } }
     ]
   });
   wrapper
@@ -141,8 +141,20 @@ function shallowRender(props: Partial<BubbleChart<ComponentMeasureEnhanced>['pro
     <BubbleChart
       height={100}
       items={[
-        { x: 1, y: 10, size: 7, data: mockComponentMeasureEnhanced() },
-        { x: 2, y: 30, size: 5, data: mockComponentMeasureEnhanced() }
+        {
+          x: 1,
+          y: 10,
+          size: 7,
+          data: mockComponentMeasureEnhanced(),
+          color: { fill: 'blue', stroke: 'blue' }
+        },
+        {
+          x: 2,
+          y: 30,
+          size: 5,
+          data: mockComponentMeasureEnhanced(),
+          color: { fill: 'red', stroke: 'red' }
+        }
       ]}
       padding={[0, 0, 0, 0]}
       {...props}
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/BubbleChart-test.tsx.snap b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/BubbleChart-test.tsx.snap
index 75be3b81bcc..649866524c4 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/BubbleChart-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/BubbleChart-test.tsx.snap
@@ -11,8 +11,8 @@ exports[`should display bubbles 1`] = `
       r={45}
       style={
         Object {
-          "fill": undefined,
-          "stroke": undefined,
+          "fill": "blue",
+          "stroke": "blue",
         }
       }
       transform="translate(33.21428571428571, 70.07936507936509) scale(1)"
@@ -32,8 +32,8 @@ exports[`should display bubbles 2`] = `
       r={33.57142857142858}
       style={
         Object {
-          "fill": undefined,
-          "stroke": undefined,
+          "fill": "red",
+          "stroke": "red",
         }
       }
       transform="translate(66.42857142857142, 33.57142857142858) scale(1)"
@@ -53,8 +53,8 @@ exports[`should render bubble links 1`] = `
       r={45}
       style={
         Object {
-          "fill": undefined,
-          "stroke": undefined,
+          "fill": "blue",
+          "stroke": "blue",
         }
       }
       transform="translate(33.21428571428571, 70.07936507936509) scale(1)"
@@ -74,8 +74,8 @@ exports[`should render bubble links 2`] = `
       r={33.57142857142858}
       style={
         Object {
-          "fill": undefined,
-          "stroke": undefined,
+          "fill": "green",
+          "stroke": "green",
         }
       }
       transform="translate(66.42857142857142, 33.57142857142858) scale(1)"
@@ -95,8 +95,8 @@ exports[`should render bubbles with click handlers 1`] = `
       r={45}
       style={
         Object {
-          "fill": undefined,
-          "stroke": undefined,
+          "fill": "blue",
+          "stroke": "blue",
         }
       }
       transform="translate(33.21428571428571, 70.07936507936509) scale(1)"
@@ -116,8 +116,8 @@ exports[`should render bubbles with click handlers 2`] = `
       r={33.57142857142858}
       style={
         Object {
-          "fill": undefined,
-          "stroke": undefined,
+          "fill": "red",
+          "stroke": "red",
         }
       }
       transform="translate(66.42857142857142, 33.57142857142858) scale(1)"
diff --git a/server/sonar-web/src/main/js/components/ui/Level.css b/server/sonar-web/src/main/js/components/ui/Level.css
index eaacfaea2e2..96a246bc659 100644
--- a/server/sonar-web/src/main/js/components/ui/Level.css
+++ b/server/sonar-web/src/main/js/components/ui/Level.css
@@ -25,7 +25,7 @@
   padding-right: 9px;
   height: var(--controlHeight);
   line-height: var(--controlHeight);
-  border: 1px solid var(--black38);
+  border: 1px solid var(--blacka38);
   border-radius: var(--controlHeight);
   box-sizing: border-box;
   color: #fff;
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 0304c9fdb30..da2ce4dc66e 100644
--- a/server/sonar-web/src/main/js/components/ui/Rating.css
+++ b/server/sonar-web/src/main/js/components/ui/Rating.css
@@ -23,7 +23,7 @@
   height: var(--controlHeight);
   line-height: calc(var(--controlHeight) - 1px);
   border-radius: var(--controlHeight);
-  border: 1px solid var(--black38);
+  border: 1px solid var(--blacka38);
   box-sizing: border-box;
   font-size: var(--bigFontSize);
   font-weight: 400;
@@ -43,19 +43,19 @@ a > .rating-A,
 
 a > .rating-B,
 .rating-B {
-  color: var(--black87);
+  color: var(--blacka87);
   background-color: var(--successVariant);
 }
 
 a > .rating-C,
 .rating-C {
-  color: var(--black87);
+  color: var(--blacka87);
   background-color: var(--warningVariant);
 }
 
 a > .rating-D,
 .rating-D {
-  color: var(--black87);
+  color: var(--blacka87);
   background-color: var(--warningAccent);
 }
 
diff --git a/server/sonar-web/src/main/js/helpers/constants.ts b/server/sonar-web/src/main/js/helpers/constants.ts
index 48588f4f2b1..568d943c5e0 100644
--- a/server/sonar-web/src/main/js/helpers/constants.ts
+++ b/server/sonar-web/src/main/js/helpers/constants.ts
@@ -38,28 +38,20 @@ export const SOURCE_SCOPES = [
 export const RULE_TYPES: RuleType[] = ['BUG', 'VULNERABILITY', 'CODE_SMELL', 'SECURITY_HOTSPOT'];
 export const RULE_STATUSES = ['READY', 'BETA', 'DEPRECATED'];
 
-export const CHART_COLORS_RANGE_PERCENT = [
-  colors.green,
-  colors.lightGreen,
-  colors.yellow,
-  colors.orange,
-  colors.red
-];
-
-export const CHART_REVERSED_COLORS_RANGE_PERCENT = [
-  colors.red,
-  colors.orange,
-  colors.yellow,
-  colors.lightGreen,
-  colors.green
-];
-
 export const RATING_COLORS = [
-  colors.green,
-  colors.lightGreen,
-  colors.yellow,
-  colors.orange,
-  colors.red
+  { fill: colors.success500, fillTransparent: colors.success500a20, stroke: colors.success500 },
+  {
+    fill: colors.successVariant,
+    fillTransparent: colors.successVarianta20,
+    stroke: colors.successVariant
+  },
+  {
+    fill: colors.warningVariant,
+    fillTransparent: colors.warningVarianta20,
+    stroke: colors.warningVariantDark
+  },
+  { fill: colors.warningAccent, fillTransparent: colors.warningAccenta20, stroke: colors.warning },
+  { fill: colors.error500, fillTransparent: colors.error500a20, stroke: colors.error500 }
 ];
 
 export const PROJECT_KEY_MAX_LEN = 400;