SONAR-16885 [892420] Function cannot be performed by keyboard alone

3 files changed, 64 insertions, 67 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 bdb4504a50b..e1b083003ef 100644
--- a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
@@ -27,7 +27,6 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { translate } from '../../helpers/l10n';
-import { convertToTo, Location } from '../../helpers/urls';
 import Tooltip from '../controls/Tooltip';
 import './BubbleChart.css';
 
@@ -36,7 +35,6 @@ const TICKS_COUNT = 5;
 interface BubbleItem<T> {
   color?: string;
   key?: string;
-  link?: string | Location;
   data?: T;
   size: number;
   tooltip?: React.ReactNode;
@@ -283,7 +281,6 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
           color={item.color}
           data={item.data}
           key={item.key || index}
-          link={item.link}
           onClick={this.props.onBubbleClick}
           r={sizeScale(item.size)}
           scale={1 / transform.k}
@@ -347,7 +344,6 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
 
 interface BubbleProps<T> {
   color?: string;
-  link?: string | Location;
   onClick?: (ref?: T) => void;
   data?: T;
   r: number;
@@ -358,7 +354,7 @@ interface BubbleProps<T> {
 }
 
 function Bubble<T>(props: BubbleProps<T>) {
-  const handleClick = (e: React.MouseEvent<SVGCircleElement>) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     if (props.onClick) {
       e.stopPropagation();
       e.preventDefault();
@@ -366,23 +362,16 @@ function Bubble<T>(props: BubbleProps<T>) {
     }
   };
 
-  let circle = (
-    <circle
-      className="bubble-chart-bubble"
-      onClick={props.onClick ? handleClick : undefined}
-      r={props.r}
-      style={{ fill: props.color, stroke: props.color }}
-      transform={`translate(${props.x}, ${props.y}) scale(${props.scale})`}
-    />
+  const circle = (
+    <a onClick={handleClick} href="#">
+      <circle
+        className="bubble-chart-bubble"
+        r={props.r}
+        style={{ fill: props.color, stroke: props.color }}
+        transform={`translate(${props.x}, ${props.y}) scale(${props.scale})`}
+      />
+    </a>
   );
 
-  if (props.link && !props.onClick) {
-    circle = <Link to={convertToTo(props.link)}>{circle}</Link>;
-  }
-
-  return (
-    <Tooltip overlay={props.tooltip || undefined}>
-      <g>{circle}</g>
-    </Tooltip>
-  );
+  return <Tooltip overlay={props.tooltip || undefined}>{circle}</Tooltip>;
 }
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 d47c0ebfcd1..4b31a600292 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, link: 'foo' },
-      { x: 2, y: 30, size: 5, link: 'bar' }
+      { x: 1, y: 10, size: 7 },
+      { x: 2, y: 30, size: 5 }
     ]
   });
   wrapper
@@ -80,7 +80,7 @@ it('should render bubbles with click handlers', () => {
     .dive()
     .find('Bubble')
     .forEach(bubble => {
-      click(bubble.dive().find('circle'));
+      click(bubble.dive().find('a'));
       expect(bubble.dive()).toMatchSnapshot();
     });
   expect(onBubbleClick).toBeCalledTimes(2);
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 1e0feb80ef5..75be3b81bcc 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
@@ -2,7 +2,10 @@
 
 exports[`should display bubbles 1`] = `
 <Tooltip>
-  <g>
+  <a
+    href="#"
+    onClick={[Function]}
+  >
     <circle
       className="bubble-chart-bubble"
       r={45}
@@ -14,13 +17,16 @@ exports[`should display bubbles 1`] = `
       }
       transform="translate(33.21428571428571, 70.07936507936509) scale(1)"
     />
-  </g>
+  </a>
 </Tooltip>
 `;
 
 exports[`should display bubbles 2`] = `
 <Tooltip>
-  <g>
+  <a
+    href="#"
+    onClick={[Function]}
+  >
     <circle
       className="bubble-chart-bubble"
       r={33.57142857142858}
@@ -32,60 +38,60 @@ exports[`should display bubbles 2`] = `
       }
       transform="translate(66.42857142857142, 33.57142857142858) scale(1)"
     />
-  </g>
+  </a>
 </Tooltip>
 `;
 
 exports[`should render bubble links 1`] = `
 <Tooltip>
-  <g>
-    <Link
-      to="foo"
-    >
-      <circle
-        className="bubble-chart-bubble"
-        r={45}
-        style={
-          Object {
-            "fill": undefined,
-            "stroke": undefined,
-          }
+  <a
+    href="#"
+    onClick={[Function]}
+  >
+    <circle
+      className="bubble-chart-bubble"
+      r={45}
+      style={
+        Object {
+          "fill": undefined,
+          "stroke": undefined,
         }
-        transform="translate(33.21428571428571, 70.07936507936509) scale(1)"
-      />
-    </Link>
-  </g>
+      }
+      transform="translate(33.21428571428571, 70.07936507936509) scale(1)"
+    />
+  </a>
 </Tooltip>
 `;
 
 exports[`should render bubble links 2`] = `
 <Tooltip>
-  <g>
-    <Link
-      to="bar"
-    >
-      <circle
-        className="bubble-chart-bubble"
-        r={33.57142857142858}
-        style={
-          Object {
-            "fill": undefined,
-            "stroke": undefined,
-          }
+  <a
+    href="#"
+    onClick={[Function]}
+  >
+    <circle
+      className="bubble-chart-bubble"
+      r={33.57142857142858}
+      style={
+        Object {
+          "fill": undefined,
+          "stroke": undefined,
         }
-        transform="translate(66.42857142857142, 33.57142857142858) scale(1)"
-      />
-    </Link>
-  </g>
+      }
+      transform="translate(66.42857142857142, 33.57142857142858) scale(1)"
+    />
+  </a>
 </Tooltip>
 `;
 
 exports[`should render bubbles with click handlers 1`] = `
 <Tooltip>
-  <g>
+  <a
+    href="#"
+    onClick={[Function]}
+  >
     <circle
       className="bubble-chart-bubble"
-      onClick={[Function]}
       r={45}
       style={
         Object {
@@ -95,16 +101,18 @@ exports[`should render bubbles with click handlers 1`] = `
       }
       transform="translate(33.21428571428571, 70.07936507936509) scale(1)"
     />
-  </g>
+  </a>
 </Tooltip>
 `;
 
 exports[`should render bubbles with click handlers 2`] = `
 <Tooltip>
-  <g>
+  <a
+    href="#"
+    onClick={[Function]}
+  >
     <circle
       className="bubble-chart-bubble"
-      onClick={[Function]}
       r={33.57142857142858}
       style={
         Object {
@@ -114,6 +122,6 @@ exports[`should render bubbles with click handlers 2`] = `
       }
       transform="translate(66.42857142857142, 33.57142857142858) scale(1)"
     />
-  </g>
+  </a>
 </Tooltip>
 `;