SONAR-16824 Short text alternative is missing

4 files changed, 23 insertions, 13 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
index 0f47feba734..0287f037fad 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
@@ -32,7 +32,7 @@ import DateTimeFormatter, {
   formatterOption as dateTimeFormatterOption
 } from '../../../components/intl/DateTimeFormatter';
 import { parseDate } from '../../../helpers/dates';
-import { translate } from '../../../helpers/l10n';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { formatMeasure } from '../../../helpers/measures';
 import { Component, Dict } from '../../../types/types';
 import { Query } from '../utils';
@@ -172,11 +172,18 @@ export class CreationDateFacet extends React.PureComponent<Props & WrappedCompon
             ` - ${formatDate(tooltipEndDate, longFormatterOption)}`}
         </React.Fragment>
       );
+      const description = translateWithParameters(
+        'issues.facet.createdAt.bar_description',
+        formatMeasure(stats[start], 'SHORT_INT'),
+        formatDate(startDate, longFormatterOption),
+        formatDate(tooltipEndDate, longFormatterOption)
+      );
 
       return {
         createdAfter: startDate,
         createdBefore: endDate,
         tooltip,
+        description,
         x: index,
         y: stats[start]
       };
diff --git a/server/sonar-web/src/main/js/components/charts/BarChart.tsx b/server/sonar-web/src/main/js/components/charts/BarChart.tsx
index 511350a15ab..188a7cdb8bc 100644
--- a/server/sonar-web/src/main/js/components/charts/BarChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/BarChart.tsx
@@ -25,6 +25,7 @@ import './BarChart.css';
 
 interface DataPoint {
   tooltip?: React.ReactNode;
+  description: string;
   x: number;
   y: number;
 }
@@ -125,6 +126,7 @@ export default class BarChart<T> extends React.PureComponent<Props<T>> {
       const rect = (
         <rect
           className="bar-chart-bar"
+          aria-label={point.description}
           height={height}
           // eslint-disable-next-line react/no-array-index-key
           key={index}
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/BarChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/BarChart-test.tsx
index 75057b24b38..040c7fcd861 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/BarChart-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/BarChart-test.tsx
@@ -23,9 +23,9 @@ import BarChart from '../BarChart';
 
 it('should display bars', () => {
   const data = [
-    { x: 1, y: 10 },
-    { x: 2, y: 30 },
-    { x: 3, y: 20 }
+    { x: 1, y: 10, description: '' },
+    { x: 2, y: 30, description: '' },
+    { x: 3, y: 20, description: '' }
   ];
   const chart = shallow(<BarChart barsWidth={20} data={data} height={100} width={100} />);
   expect(chart.find('.bar-chart-bar').length).toBe(3);
@@ -33,9 +33,9 @@ it('should display bars', () => {
 
 it('should display ticks', () => {
   const data = [
-    { x: 1, y: 10 },
-    { x: 2, y: 30 },
-    { x: 3, y: 20 }
+    { x: 1, y: 10, description: '' },
+    { x: 2, y: 30, description: '' },
+    { x: 3, y: 20, description: '' }
   ];
   const ticks = ['A', 'B', 'C'];
   const chart = shallow(
@@ -46,9 +46,9 @@ it('should display ticks', () => {
 
 it('should display values', () => {
   const data = [
-    { x: 1, y: 10 },
-    { x: 2, y: 30 },
-    { x: 3, y: 20 }
+    { x: 1, y: 10, description: '' },
+    { x: 2, y: 30, description: '' },
+    { x: 3, y: 20, description: '' }
   ];
   const values = ['A', 'B', 'C'];
   const chart = shallow(
@@ -59,9 +59,9 @@ it('should display values', () => {
 
 it('should display bars, ticks and values', () => {
   const data = [
-    { x: 1, y: 10 },
-    { x: 2, y: 30 },
-    { x: 3, y: 20 }
+    { x: 1, y: 10, description: '' },
+    { x: 2, y: 30, description: '' },
+    { x: 3, y: 20, description: '' }
   ];
   const ticks = ['A', 'B', 'C'];
   const values = ['A', 'B', 'C'];
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 2050505e6aa..cc279036b39 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -981,6 +981,7 @@ issues.facet.createdAt.all=All
 issues.facet.createdAt.last_week=Last week
 issues.facet.createdAt.last_month=Last month
 issues.facet.createdAt.last_year=Last year
+issues.facet.createdAt.bar_description={0} issues from {1} to {2}
 issues.facet.authors=Author
 issues.facet.issues=Issue Key
 issues.facet.mode=Display Mode