SONAR-22323 Fix a11y issues on PR overview page

8 files changed, 45 insertions, 33 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGateStatus.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGateStatus.tsx
index 04715c9965f..60cb87a9c27 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGateStatus.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGateStatus.tsx
@@ -37,7 +37,7 @@ export default function QualityGateStatus(props: Readonly<Props>) {
       <QualityGateIndicator size="xl" status={status} />
       <div className="sw-flex sw-flex-col sw-ml-2 sw-justify-around">
         <div className="sw-flex sw-items-center">
-          <Note>{translate('overview.quality_gate')}</Note>
+          <Note as="h1">{translate('overview.quality_gate')}</Note>
           <HelpTooltip
             className="sw-ml-2"
             overlay={<div>{translate('overview.quality_gate.help')}</div>}
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx
index ad0af592950..37c5e3248a8 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx
@@ -19,7 +19,7 @@
  */
 import styled from '@emotion/styled';
 import { LinkHighlight, LinkStandalone, Tooltip } from '@sonarsource/echoes-react';
-import { Badge, TextBold, TextSubdued } from 'design-system';
+import { Badge, TextBold, TextSubdued, themeColor } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { formatMeasure } from '~sonar-aligned/helpers/measures';
@@ -98,7 +98,9 @@ export function SoftwareImpactMeasureCard(props: Readonly<SoftwareImpactBreakdow
       className="sw-overflow-hidden sw-rounded-2 sw-flex-col"
     >
       <div className="sw-flex sw-items-center">
-        <TextBold name={intl.formatMessage({ id: `software_quality.${softwareQuality}` })} />
+        <ColorBold className="sw-body-sm-highlight">
+          {intl.formatMessage({ id: `software_quality.${softwareQuality}` })}
+        </ColorBold>
         {failed && (
           <Badge className="sw-h-fit sw-ml-2" variant="deleted">
             <FormattedMessage id="overview.measures.failed_badge" />
@@ -174,5 +176,8 @@ export function SoftwareImpactMeasureCard(props: Readonly<SoftwareImpactBreakdow
 const StyledDash = styled(TextBold)`
   font-size: 36px;
 `;
+const ColorBold = styled.h2`
+  color: ${themeColor('pageTitle')};
+`;
 
 export default SoftwareImpactMeasureCard;
diff --git a/server/sonar-web/src/main/js/apps/overview/components/AnalysisStatus.tsx b/server/sonar-web/src/main/js/apps/overview/components/AnalysisStatus.tsx
index ce9504100f4..fa1a30d7b9e 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/AnalysisStatus.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/AnalysisStatus.tsx
@@ -73,6 +73,7 @@ export function AnalysisStatus(props: Readonly<HeaderMetaProps>) {
           {/* TODO: replace the Link below with a lighweight/discreet button component */}
           {/* when it is available in Echoes */}
           <Link
+            aria-label={translate('project_navigation.analysis_status.details_link.label')}
             className="sw-ml-1"
             onClick={openModal}
             shouldBlurAfterClick
@@ -103,6 +104,7 @@ export function AnalysisStatus(props: Readonly<HeaderMetaProps>) {
           {/* TODO: replace the Link below with a lighweight/discreet button component */}
           {/* when it is available in Echoes */}
           <Link
+            aria-label={translate('project_navigation.analysis_status.details_link.label')}
             className="sw-ml-1"
             onClick={openModal}
             shouldBlurAfterClick
diff --git a/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx b/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx
index 240b1ff975f..ce1c5a38b4f 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx
@@ -84,6 +84,6 @@ export function IssueMeasuresCardInner(props: Readonly<IssueMeasuresCardInnerPro
   );
 }
 
-const ColorBold = styled.div`
+const ColorBold = styled.h2`
   color: ${themeColor('pageTitle')};
 `;
diff --git a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCard.tsx b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCard.tsx
index d4cad7eba00..7b21eb3a755 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCard.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCard.tsx
@@ -73,6 +73,6 @@ export default function MeasuresCard(
   );
 }
 
-const ColorBold = styled.span`
+const ColorBold = styled.h2`
   color: ${themeColor('pageTitle')};
 `;
diff --git a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardPercent.tsx b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardPercent.tsx
index e33c391ec37..2102107d12f 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardPercent.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardPercent.tsx
@@ -160,9 +160,9 @@ export default function MeasuresCardPercent(
 
 function renderIcon(type: MeasurementType, value?: string) {
   if (type === MeasurementType.Coverage) {
-    return <CoverageIndicator value={value} size="md" />;
+    return <CoverageIndicator aria-hidden="true" value={value} size="md" />;
   }
 
   const rating = duplicationRatingConverter(Number(value));
-  return <DuplicationsIndicator rating={rating} size="md" />;
+  return <DuplicationsIndicator aria-hidden="true" rating={rating} size="md" />;
 }
diff --git a/server/sonar-web/src/main/js/components/measure/__tests__/MeasureIndicator-test.tsx b/server/sonar-web/src/main/js/components/measure/__tests__/MeasureIndicator-test.tsx
index 3b42b47f134..8cc7f9e5e22 100644
--- a/server/sonar-web/src/main/js/components/measure/__tests__/MeasureIndicator-test.tsx
+++ b/server/sonar-web/src/main/js/components/measure/__tests__/MeasureIndicator-test.tsx
@@ -17,14 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import * as React from 'react';
 import { MetricKey, MetricType } from '~sonar-aligned/types/metrics';
 import { Status } from '../../../apps/overview/utils';
 import MeasureIndicator from '../MeasureIndicator';
 
 it('renders correctly for coverage', () => {
-  render(
+  const wrapper = render(
     <MeasureIndicator
       componentKey="test"
       metricKey={MetricKey.coverage}
@@ -32,7 +32,7 @@ it('renders correctly for coverage', () => {
       value="73.0"
     />,
   );
-  expect(screen.getByRole('img')).toMatchSnapshot();
+  expect(wrapper.baseElement).toMatchSnapshot();
 });
 
 it('renders correctly for failed quality gate', () => {
diff --git a/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/MeasureIndicator-test.tsx.snap b/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/MeasureIndicator-test.tsx.snap
index b088c02d4c2..b223dc714b5 100644
--- a/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/MeasureIndicator-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/MeasureIndicator-test.tsx.snap
@@ -1,29 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly for coverage 1`] = `
-<svg
-  class="donut-chart"
-  height="24"
-  role="img"
-  width="24"
->
-  <g
-    transform="translate(0, 0)"
-  >
-    <g
-      transform="translate(12, 12)"
-    >
-      <path
-        d="M0.75,-11.977A12,12,0,1,1,-11.672,2.785L-8.709,2.271A9,9,0,1,0,0.75,-8.969Z"
-        style="fill: rgb(18,183,106);"
-      />
-      <path
-        d="M-11.929,1.307A12,12,0,0,1,-0.75,-11.977L-0.75,-8.969A9,9,0,0,0,-8.965,0.793Z"
-        style="fill: rgb(180,35,24);"
-      />
-    </g>
-  </g>
-</svg>
+<body>
+  <div>
+    <div>
+      <svg
+        class="donut-chart"
+        height="24"
+        width="24"
+      >
+        <g
+          transform="translate(0, 0)"
+        >
+          <g
+            transform="translate(12, 12)"
+          >
+            <path
+              d="M0.75,-11.977A12,12,0,1,1,-11.672,2.785L-8.709,2.271A9,9,0,1,0,0.75,-8.969Z"
+              style="fill: rgb(18,183,106);"
+            />
+            <path
+              d="M-11.929,1.307A12,12,0,0,1,-0.75,-11.977L-0.75,-8.969A9,9,0,0,0,-8.965,0.793Z"
+              style="fill: rgb(180,35,24);"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+  </div>
+</body>
 `;
 
 exports[`renders correctly for failed quality gate 1`] = `