SONAR-11764 Make Rating components accessible

5 files changed, 94 insertions, 4 deletions

diff --git a/server/sonar-web/src/main/js/components/ui/Rating.tsx b/server/sonar-web/src/main/js/components/ui/Rating.tsx
index abb228b8f7e..06e76b9d848 100644
--- a/server/sonar-web/src/main/js/components/ui/Rating.tsx
+++ b/server/sonar-web/src/main/js/components/ui/Rating.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { formatMeasure } from '../../helpers/measures';
+import { translate, translateWithParameters } from '../../helpers/l10n';
 import './Rating.css';
 
 interface Props {
@@ -31,11 +32,12 @@ interface Props {
 
 export default function Rating({ className, muted = false, small = false, value }: Props) {
   if (value === undefined) {
-    return <span>{'–'}</span>;
+    return <span aria-label={translate('metric.no_rating')}>{'–'}</span>;
   }
   const formatted = formatMeasure(value, 'RATING');
   return (
     <span
+      aria-label={translateWithParameters('metric.has_rating_X', formatted)}
       className={classNames(
         'rating',
         'rating-' + formatted,
diff --git a/server/sonar-web/src/main/js/components/ui/SizeRating.tsx b/server/sonar-web/src/main/js/components/ui/SizeRating.tsx
index 13a1404c0e2..c25bd23d881 100644
--- a/server/sonar-web/src/main/js/components/ui/SizeRating.tsx
+++ b/server/sonar-web/src/main/js/components/ui/SizeRating.tsx
@@ -22,7 +22,7 @@ import * as classNames from 'classnames';
 import { inRange } from 'lodash';
 import './SizeRating.css';
 
-interface Props {
+export interface Props {
   muted?: boolean;
   small?: boolean;
   value: number | null | undefined;
@@ -51,5 +51,9 @@ export default function SizeRating({ small = false, muted = false, value }: Prop
     'size-rating-muted': muted
   });
 
-  return <div className={className}>{letter}</div>;
+  return (
+    <div aria-hidden="true" className={className}>
+      {letter}
+    </div>
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/SizeRating-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/SizeRating-test.tsx
new file mode 100644
index 00000000000..26965151d25
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/SizeRating-test.tsx
@@ -0,0 +1,34 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import SizeRating, { Props } from '../SizeRating';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+  expect(shallowRender({ muted: true, small: true, value: 1000 })).toMatchSnapshot();
+  expect(shallowRender({ value: 10000 })).toMatchSnapshot();
+  expect(shallowRender({ value: 100000 })).toMatchSnapshot();
+  expect(shallowRender({ value: 500000 })).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<Props> = {}) {
+  return shallow(<SizeRating value={100} {...props} />);
+}
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Rating-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Rating-test.tsx.snap
index 94922c0bf43..fc8a831828b 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Rating-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Rating-test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`renders numeric value 1`] = `
 <span
+  aria-label="metric.has_rating_X.B"
   className="rating rating-B"
 >
   B
@@ -10,6 +11,7 @@ exports[`renders numeric value 1`] = `
 
 exports[`renders string value 1`] = `
 <span
+  aria-label="metric.has_rating_X.B"
   className="rating rating-B"
 >
   B
@@ -17,7 +19,9 @@ exports[`renders string value 1`] = `
 `;
 
 exports[`renders undefined value 1`] = `
-<span>
+<span
+  aria-label="metric.no_rating"
+>
   –
 </span>
 `;
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/SizeRating-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/SizeRating-test.tsx.snap
new file mode 100644
index 00000000000..a35517cc685
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/SizeRating-test.tsx.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<div
+  aria-hidden="true"
+  className="size-rating"
+>
+  XS
+</div>
+`;
+
+exports[`should render correctly 2`] = `
+<div
+  aria-hidden="true"
+  className="size-rating size-rating-small size-rating-muted"
+>
+  S
+</div>
+`;
+
+exports[`should render correctly 3`] = `
+<div
+  aria-hidden="true"
+  className="size-rating"
+>
+  M
+</div>
+`;
+
+exports[`should render correctly 4`] = `
+<div
+  aria-hidden="true"
+  className="size-rating"
+>
+  L
+</div>
+`;
+
+exports[`should render correctly 5`] = `
+<div
+  aria-hidden="true"
+  className="size-rating"
+>
+  XL
+</div>
+`;