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

5 files changed, 58 insertions, 36 deletions

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)"