From 8cd18056f08bd9b2f705cab6e8be8aaf91f43834 Mon Sep 17 00:00:00 2001
From: Guillaume Peoc'h <guillaume.peoch@sonarsource.com>
Date: Fri, 7 Oct 2022 11:43:23 +0200
Subject: [PATCH] SONAR-17001 [894147] Button: Button does not have a name

---
 .../activity-graph/GraphsLegendItem.tsx          | 16 ++++++++++------
 .../__snapshots__/GraphsLegendItem-test.tsx.snap |  1 +
 .../resources/org/sonar/l10n/core.properties     |  1 +
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
index e131d1993bc..c26f9de9f02 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
@@ -22,6 +22,7 @@ import * as React from 'react';
 import { ClearButton } from '../../components/controls/buttons';
 import AlertWarnIcon from '../../components/icons/AlertWarnIcon';
 import ChartLegendIcon from '../../components/icons/ChartLegendIcon';
+import { translateWithParameters } from '../../helpers/l10n';
 
 interface Props {
   className?: string;
@@ -40,22 +41,25 @@ export default class GraphsLegendItem extends React.PureComponent<Props> {
   };
 
   render() {
+    const { className, name, index } = this.props;
     const isActionable = this.props.removeMetric != null;
-    const legendClass = classNames(
-      { 'activity-graph-legend-actionable': isActionable },
-      this.props.className
-    );
+    const legendClass = classNames({ 'activity-graph-legend-actionable': isActionable }, className);
+
     return (
       <span className={legendClass}>
         {this.props.showWarning ? (
           <AlertWarnIcon className="spacer-right" />
         ) : (
-          <ChartLegendIcon className="text-middle spacer-right" index={this.props.index} />
+          <ChartLegendIcon className="text-middle spacer-right" index={index} />
         )}
-        <span className="text-middle">{this.props.name}</span>
+        <span className="text-middle">{name}</span>
         {isActionable && (
           <ClearButton
             className="button-tiny spacer-left text-middle"
+            aria-label={translateWithParameters(
+              'project_activity.graphs.custom.remove_metric',
+              name
+            )}
             iconProps={{ size: 12 }}
             onClick={this.handleClick}
           />
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsLegendItem-test.tsx.snap b/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsLegendItem-test.tsx.snap
index d374734cb54..37369e0d970 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsLegendItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsLegendItem-test.tsx.snap
@@ -30,6 +30,7 @@ exports[`should render correctly a legend: with legend 1`] = `
     Foo
   </span>
   <ClearButton
+    aria-label="project_activity.graphs.custom.remove_metric.Foo"
     className="button-tiny spacer-left text-middle"
     iconProps={
       Object {
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 6a4b4fd5f5a..1d654070d38 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -1545,6 +1545,7 @@ project_activity.graphs.custom.add=Add metric
 project_activity.graphs.custom.add_metric=Add a metric
 project_activity.graphs.custom.select_metric=Select metric to display
 project_activity.graphs.custom.add_metric_info=Only 3 metrics of the same type can be displayed on one graph. You can have a maximum of two graphs.
+project_activity.graphs.custom.remove_metric=Remove the {0} metric from the graph
 project_activity.graphs.custom.no_history=There isn't enough data to generate an activity graph, please select more metrics.
 project_activity.graphs.custom.metric_no_history=This metric has no historical data to display.
 project_activity.graphs.custom.search=Search for a metric by name
-- 
2.39.5