SONAR-16885 [892404] [892409] [892231] [892423]

* [892404] State: Selected state of the element is missing or incorrect
* [892409] Visual list is not marked up as list
* [892231] Color alone is used to convey info
* [892423] Keyboard focus is lost or misplaced due to user interaction or content update

5 files changed, 46 insertions, 190 deletions

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 a370d61f22d..e9a6cc27297 100644
--- a/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css
+++ b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css
@@ -44,12 +44,12 @@
   opacity: 1;
 }
 
-.color-box-legend button {
+.color-box-legend a {
   color: var(--baseFontColor);
   border-bottom: none;
   display: block;
 }
 
-.color-box-legend button.filtered {
+.color-box-legend a.filtered {
   opacity: 0.3;
 }
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 15ac6a1edda..21a5f0ba9ee 100644
--- a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx
+++ b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx
@@ -19,10 +19,9 @@
  */
 import classNames from 'classnames';
 import * as React from 'react';
-import { ButtonLink } from '../../components/controls/buttons';
 import Tooltip from '../../components/controls/Tooltip';
 import { RATING_COLORS } from '../../helpers/constants';
-import { translate } from '../../helpers/l10n';
+import { translateWithParameters } from '../../helpers/l10n';
 import { formatMeasure } from '../../helpers/measures';
 import './ColorBoxLegend.css';
 
@@ -37,27 +36,36 @@ const RATINGS = [1, 2, 3, 4, 5];
 export default function ColorRatingsLegend(props: ColorRatingsLegendProps) {
   const { className, filters } = props;
   return (
-    <div className={classNames('color-box-legend', className)}>
+    <ul className={classNames('color-box-legend', className)}>
       {RATINGS.map(rating => (
-        <Tooltip key={rating} overlay={translate('component_measures.legend.help')}>
-          <ButtonLink
-            className={classNames('little-padded-bottom', {
-              filtered: filters[rating]
-            })}
-            onClick={() => props.onRatingClick(rating)}
-            type="button">
-            <span
-              className="color-box-legend-rect"
-              style={{ borderColor: RATING_COLORS[rating - 1] }}>
+        <li key={rating}>
+          <Tooltip
+            overlay={translateWithParameters(
+              '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}>
               <span
-                className="color-box-legend-rect-inner"
-                style={{ backgroundColor: RATING_COLORS[rating - 1] }}
-              />
-            </span>
-            {formatMeasure(rating, 'RATING')}
-          </ButtonLink>
-        </Tooltip>
+                className="color-box-legend-rect"
+                style={{ borderColor: RATING_COLORS[rating - 1] }}>
+                <span
+                  className="color-box-legend-rect-inner"
+                  style={{ backgroundColor: RATING_COLORS[rating - 1] }}
+                />
+              </span>
+              {formatMeasure(rating, 'RATING')}
+            </a>
+          </Tooltip>
+        </li>
       ))}
-    </div>
+    </ul>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/ColorRatingsLegend-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/ColorRatingsLegend-test.tsx
index d3c2ddf9bd4..37b179cfa6b 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/ColorRatingsLegend-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/ColorRatingsLegend-test.tsx
@@ -17,29 +17,30 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { shallow } from 'enzyme';
+import { screen } from '@testing-library/dom';
 import * as React from 'react';
-import { ButtonLink } from '../../../components/controls/buttons';
+import { renderComponent } from '../../../helpers/testReactTestingUtils';
 import ColorRatingsLegend, { ColorRatingsLegendProps } from '../ColorRatingsLegend';
 
 it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot();
+  renderColorRatingsLegend();
+  expect(screen.getByRole('checkbox', { name: 'A' })).toBeInTheDocument();
+  expect(screen.getByRole('checkbox', { name: 'B' })).toBeInTheDocument();
+  expect(screen.getByRole('checkbox', { name: 'C' })).toBeInTheDocument();
+  expect(screen.getByRole('checkbox', { name: 'D' })).toBeInTheDocument();
+  expect(screen.getByRole('checkbox', { name: 'E' })).toBeInTheDocument();
 });
 
-it('should callback when a rating is clicked', () => {
+it('should react when a rating is clicked', () => {
   const onRatingClick = jest.fn();
-  const wrapper = shallowRender({ onRatingClick });
-
-  wrapper
-    .find(ButtonLink)
-    .at(3)
-    .simulate('click');
+  renderColorRatingsLegend({ onRatingClick });
 
+  screen.getByRole('checkbox', { name: 'D' }).click();
   expect(onRatingClick).toBeCalledWith(4);
 });
 
-function shallowRender(overrides: Partial<ColorRatingsLegendProps> = {}) {
-  return shallow(
-    <ColorRatingsLegend filters={{ 2: true }} onRatingClick={jest.fn()} {...overrides} />
+function renderColorRatingsLegend(props: Partial<ColorRatingsLegendProps> = {}) {
+  return renderComponent(
+    <ColorRatingsLegend filters={{ 2: true }} onRatingClick={jest.fn()} {...props} />
   );
 }
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/ColorRatingsLegend-test.tsx.snap b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/ColorRatingsLegend-test.tsx.snap
deleted file mode 100644
index 52a280f871b..00000000000
--- a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/ColorRatingsLegend-test.tsx.snap
+++ /dev/null
@@ -1,153 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<div
-  className="color-box-legend"
->
-  <Tooltip
-    key="1"
-    overlay="component_measures.legend.help"
-  >
-    <ButtonLink
-      className="little-padded-bottom"
-      onClick={[Function]}
-      type="button"
-    >
-      <span
-        className="color-box-legend-rect"
-        style={
-          Object {
-            "borderColor": "#00aa00",
-          }
-        }
-      >
-        <span
-          className="color-box-legend-rect-inner"
-          style={
-            Object {
-              "backgroundColor": "#00aa00",
-            }
-          }
-        />
-      </span>
-      A
-    </ButtonLink>
-  </Tooltip>
-  <Tooltip
-    key="2"
-    overlay="component_measures.legend.help"
-  >
-    <ButtonLink
-      className="little-padded-bottom filtered"
-      onClick={[Function]}
-      type="button"
-    >
-      <span
-        className="color-box-legend-rect"
-        style={
-          Object {
-            "borderColor": "#b0d513",
-          }
-        }
-      >
-        <span
-          className="color-box-legend-rect-inner"
-          style={
-            Object {
-              "backgroundColor": "#b0d513",
-            }
-          }
-        />
-      </span>
-      B
-    </ButtonLink>
-  </Tooltip>
-  <Tooltip
-    key="3"
-    overlay="component_measures.legend.help"
-  >
-    <ButtonLink
-      className="little-padded-bottom"
-      onClick={[Function]}
-      type="button"
-    >
-      <span
-        className="color-box-legend-rect"
-        style={
-          Object {
-            "borderColor": "#eabe06",
-          }
-        }
-      >
-        <span
-          className="color-box-legend-rect-inner"
-          style={
-            Object {
-              "backgroundColor": "#eabe06",
-            }
-          }
-        />
-      </span>
-      C
-    </ButtonLink>
-  </Tooltip>
-  <Tooltip
-    key="4"
-    overlay="component_measures.legend.help"
-  >
-    <ButtonLink
-      className="little-padded-bottom"
-      onClick={[Function]}
-      type="button"
-    >
-      <span
-        className="color-box-legend-rect"
-        style={
-          Object {
-            "borderColor": "#ed7d20",
-          }
-        }
-      >
-        <span
-          className="color-box-legend-rect-inner"
-          style={
-            Object {
-              "backgroundColor": "#ed7d20",
-            }
-          }
-        />
-      </span>
-      D
-    </ButtonLink>
-  </Tooltip>
-  <Tooltip
-    key="5"
-    overlay="component_measures.legend.help"
-  >
-    <ButtonLink
-      className="little-padded-bottom"
-      onClick={[Function]}
-      type="button"
-    >
-      <span
-        className="color-box-legend-rect"
-        style={
-          Object {
-            "borderColor": "#d4333f",
-          }
-        }
-      >
-        <span
-          className="color-box-legend-rect-inner"
-          style={
-            Object {
-              "backgroundColor": "#d4333f",
-            }
-          }
-        />
-      </span>
-      E
-    </ButtonLink>
-  </Tooltip>
-</div>
-`;
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 4ca50b4a48c..3a31c043dac 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3278,7 +3278,7 @@ component_measures.view_as=View as
 component_measures.legend.color_x=Color: {0}
 component_measures.legend.size_x=Size: {0}
 component_measures.legend.worse_of_x_y=Worse of {0} and {1}
-component_measures.legend.help=Click to toggle visibility.
+component_measures.legend.help_x=Click to toggle visibility for data with rating {0}.
 component_measures.legend.only_first_500_files=Only showing data for the first 500 files
 component_measures.no_history=There isn't enough data to generate an activity graph.
 component_measures.not_found=The requested measure was not found.