SONAR-12877 Add aria-label attributes to quality gate badges when necessary

3 files changed, 123 insertions, 24 deletions

diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/MetricBox.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/MetricBox.tsx
index d5e68e72099..11e00621707 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/MetricBox.tsx
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/MetricBox.tsx
@@ -31,13 +31,13 @@ import MainRating from './MainRating';
 import MeasuresButtonLink from './MeasuresButtonLink';
 import RatingFreshness from './RatingFreshness';
 
-interface Props {
+export interface MetricBoxProps {
   component: string;
   measures: T.Dict<string | undefined>;
   metricKey: string;
 }
 
-export default function MetricBox({ component, measures, metricKey }: Props) {
+export default function MetricBox({ component, measures, metricKey }: MetricBoxProps) {
   const keys = METRICS_PER_TYPE[metricKey];
   const rating = measures[keys.rating];
   const lastReliabilityChange = measures[keys.last_change];
@@ -90,8 +90,17 @@ export default function MetricBox({ component, measures, metricKey }: Props) {
                       ? translate('project_singular')
                       : translate('project_plural')}
                   </span>
-                </Link>{' '}
-                <Level level="ERROR" small={true} />
+                </Link>
+                <Level
+                  aria-label={
+                    Number(effort) === 1
+                      ? translate('portfolio.has_qg_status')
+                      : translate('portfolio.have_qg_status')
+                  }
+                  className="little-spacer-left"
+                  level="ERROR"
+                  small={true}
+                />
               </div>
             </>
           )
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/MetricBox-test.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/MetricBox-test.tsx
index d72d7680e54..b8ca1a2e341 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/MetricBox-test.tsx
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/MetricBox-test.tsx
@@ -17,19 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+/* eslint-disable sonarjs/no-duplicate-string */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import MetricBox from '../MetricBox';
+import MetricBox, { MetricBoxProps } from '../MetricBox';
 
 it('should render correctly', () => {
-  const measures = {
-    reliability_rating: '3',
-    last_change_on_reliability_rating: '{"date":"2017-01-02T00:00:00.000Z","value":2}',
-    reliability_rating_effort: '{"rating":3,"projects":1}'
-  };
-  expect(
-    shallow(<MetricBox component="foo" measures={measures} metricKey="reliability" />)
-  ).toMatchSnapshot();
+  expect(shallowRender({ metricKey: 'reliability' })).toMatchSnapshot();
 });
 
 it('should render correctly for releasability', () => {
@@ -38,19 +32,34 @@ it('should render correctly for releasability', () => {
     last_change_on_releasability_rating: '{"date":"2017-01-02T00:00:00.000Z","value":2}',
     releasability_effort: '5'
   };
-  expect(
-    shallow(<MetricBox component="foo" measures={measures} metricKey="releasability" />)
-  ).toMatchSnapshot();
+
+  expect(shallowRender({ measures })).toMatchSnapshot();
+  expect(shallowRender({ measures: { ...measures, releasability_effort: '1' } })).toMatchSnapshot();
 });
 
 it('should render correctly when no effort', () => {
-  const measures = {
-    releasability_rating: '2',
-    last_change_on_releasability_rating: '{"date":"2017-01-02T00:00:00.000Z","value":2}',
-    releasability_effort: '0'
-  };
-
   expect(
-    shallow(<MetricBox component="foo" measures={measures} metricKey="releasability" />)
+    shallowRender({
+      measures: {
+        releasability_rating: '2',
+        last_change_on_releasability_rating: '{"date":"2017-01-02T00:00:00.000Z","value":2}',
+        releasability_effort: '0'
+      }
+    })
   ).toMatchSnapshot();
 });
+
+function shallowRender(props: Partial<MetricBoxProps> = {}) {
+  return shallow(
+    <MetricBox
+      component="foo"
+      measures={{
+        reliability_rating: '3',
+        last_change_on_reliability_rating: '{"date":"2017-01-02T00:00:00.000Z","value":2}',
+        reliability_rating_effort: '{"rating":3,"projects":1}'
+      }}
+      metricKey="releasability"
+      {...props}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MetricBox-test.tsx.snap b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MetricBox-test.tsx.snap
index 0642438cda9..8da87d3a6ca 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MetricBox-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MetricBox-test.tsx.snap
@@ -111,8 +111,89 @@ exports[`should render correctly for releasability 1`] = `
         project_plural
       </span>
     </Link>
-     
     <Level
+      aria-label="portfolio.have_qg_status"
+      className="little-spacer-left"
+      level="ERROR"
+      small={true}
+    />
+  </div>
+  <div
+    className="portfolio-box-links"
+  >
+    <div>
+      <MeasuresButtonLink
+        component="foo"
+        metric="Releasability"
+      />
+    </div>
+    <div>
+      <HistoryButtonLink
+        component="foo"
+        metric="releasability_rating"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render correctly for releasability 2`] = `
+<div
+  className="portfolio-box"
+>
+  <h2
+    className="portfolio-box-title"
+  >
+    metric_domain.Releasability
+    <HelpTooltip
+      className="little-spacer-left"
+      overlay="portfolio.metric_domain.releasability.help"
+    />
+  </h2>
+  <MainRating
+    component="foo"
+    metric="releasability_rating"
+    value="2"
+  />
+  <h3>
+    portfolio.metric_trend
+  </h3>
+  <RatingFreshness
+    lastChange="{\\"date\\":\\"2017-01-02T00:00:00.000Z\\",\\"value\\":2}"
+    rating="2"
+  />
+  <h3>
+    portfolio.lowest_rated_projects
+  </h3>
+  <div
+    className="portfolio-effort"
+  >
+    <Link
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      to={
+        Object {
+          "pathname": "/component_measures",
+          "query": Object {
+            "id": "foo",
+            "metric": "alert_status",
+          },
+        }
+      }
+    >
+      <span>
+        <Measure
+          className="little-spacer-right"
+          metricKey="projects"
+          metricType="SHORT_INT"
+          value={1}
+        />
+        project_singular
+      </span>
+    </Link>
+    <Level
+      aria-label="portfolio.has_qg_status"
+      className="little-spacer-left"
       level="ERROR"
       small={true}
     />