From: Ismail Cherri <ismail.cherri@sonarsource.com>
Date: Mon, 9 Sep 2024 12:07:50 +0000 (+0200)
Subject: SONAR-22323 Fix a11y issues on PR overview page
X-Git-Tag: 10.7.0.96327~131
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=5ff75eb4adbd7df4ec11192e41a6e05178855395;p=sonarqube.git

SONAR-22323 Fix a11y issues on PR overview page
---

diff --git a/server/sonar-web/design-system/src/components/CoverageIndicator.tsx b/server/sonar-web/design-system/src/components/CoverageIndicator.tsx
index 9eeb58479b7..a6eb05c1009 100644
--- a/server/sonar-web/design-system/src/components/CoverageIndicator.tsx
+++ b/server/sonar-web/design-system/src/components/CoverageIndicator.tsx
@@ -28,17 +28,23 @@ const FULL_PERCENT = 100;
 const PAD_ANGLE = 0.1;
 
 export interface CoverageIndicatorProps {
+  'aria-hidden'?: boolean | 'true' | 'false';
+  'aria-label'?: string;
   size?: 'xs' | 'sm' | 'md';
   value?: number | string;
 }
 
-export function CoverageIndicator({ size = 'sm', value }: CoverageIndicatorProps) {
+export function CoverageIndicator({
+  size = 'sm',
+  value,
+  ...rest
+}: Readonly<CoverageIndicatorProps>) {
   const theme = useTheme();
   const width = SIZE_TO_WIDTH_MAPPING[size];
   const thickness = SIZE_TO_THICKNESS_MAPPING[size];
 
   if (value === undefined) {
-    return <NoDataIcon size={size} />;
+    return <NoDataIcon size={size} {...rest} />;
   }
 
   const themeRed = themeColor('coverageRed')({ theme });
@@ -64,6 +70,7 @@ export function CoverageIndicator({ size = 'sm', value }: CoverageIndicatorProps
       padAngle={padAngle}
       thickness={thickness}
       width={width}
+      {...rest}
     />
   );
 }
diff --git a/server/sonar-web/design-system/src/components/DonutChart.tsx b/server/sonar-web/design-system/src/components/DonutChart.tsx
index 14c4ec3782b..4fc1e638445 100644
--- a/server/sonar-web/design-system/src/components/DonutChart.tsx
+++ b/server/sonar-web/design-system/src/components/DonutChart.tsx
@@ -25,6 +25,8 @@ export interface DataPoint {
 }
 
 export interface DonutChartProps {
+  'aria-hidden'?: boolean | 'true' | 'false';
+  'aria-label'?: string;
   cornerRadius?: number;
   data: DataPoint[];
   height: number;
@@ -35,8 +37,18 @@ export interface DonutChartProps {
   width: number;
 }
 
-export function DonutChart(props: DonutChartProps) {
-  const { height, cornerRadius, minPercent = 0, padding = [0, 0, 0, 0], width } = props;
+export function DonutChart(props: Readonly<DonutChartProps>) {
+  const {
+    height,
+    cornerRadius,
+    minPercent = 0,
+    padding = [0, 0, 0, 0],
+    width,
+    padAngle,
+    data,
+    thickness,
+    ...rest
+  } = props;
 
   const availableWidth = width - padding[1] - padding[3];
   const availableHeight = height - padding[0] - padding[2];
@@ -44,31 +56,31 @@ export function DonutChart(props: DonutChartProps) {
   const size = Math.min(availableWidth, availableHeight);
   const radius = Math.floor(size / 2);
 
-  const total = props.data.reduce((acc, d) => acc + d.value, 0);
+  const total = data.reduce((acc, d) => acc + d.value, 0);
 
   const pie = d3Pie<any, DataPoint>()
     .sort(null)
     .value((d) => Math.max(d.value, (total / 100) * minPercent));
 
-  if (props.padAngle !== undefined) {
-    pie.padAngle(props.padAngle);
+  if (padAngle !== undefined) {
+    pie.padAngle(padAngle);
   }
 
-  const sectors = pie(props.data).map((d, i) => {
+  const sectors = pie(data).map((d, i) => {
     return (
       <Sector
         cornerRadius={cornerRadius}
         data={d}
-        fill={props.data[i].fill}
+        fill={data[i].fill}
         key={i}
         radius={radius}
-        thickness={props.thickness}
+        thickness={thickness}
       />
     );
   });
 
   return (
-    <svg className="donut-chart" height={height} role="img" width={width}>
+    <svg className="donut-chart" height={height} width={width} {...rest}>
       <g transform={`translate(${padding[3]}, ${padding[0]})`}>
         <g transform={`translate(${radius}, ${radius})`}>{sectors}</g>
       </g>
@@ -84,7 +96,7 @@ interface SectorProps {
   thickness: number;
 }
 
-function Sector(props: SectorProps) {
+function Sector(props: Readonly<SectorProps>) {
   const arc = d3Arc<any, PieArcDatum<DataPoint>>()
     .outerRadius(props.radius)
     .innerRadius(props.radius - props.thickness);
diff --git a/server/sonar-web/design-system/src/components/DuplicationsIndicator.tsx b/server/sonar-web/design-system/src/components/DuplicationsIndicator.tsx
index f43cb8a7206..9a00372a892 100644
--- a/server/sonar-web/design-system/src/components/DuplicationsIndicator.tsx
+++ b/server/sonar-web/design-system/src/components/DuplicationsIndicator.tsx
@@ -24,13 +24,15 @@ import { DuplicationEnum, DuplicationLabel } from '../types/measures';
 import { NoDataIcon } from './icons';
 
 interface Props {
+  'aria-hidden'?: boolean | 'true' | 'false';
+  'aria-label'?: string;
   rating?: DuplicationLabel;
   size?: 'xs' | 'sm' | 'md';
 }
 
 const SIZE_TO_PX_MAPPING = { xs: 16, sm: 24, md: 36 };
 
-export function DuplicationsIndicator({ size = 'sm', rating }: Props) {
+export function DuplicationsIndicator({ size = 'sm', rating, ...rest }: Readonly<Props>) {
   const theme = useTheme();
   const sizePX = SIZE_TO_PX_MAPPING[size];
 
@@ -47,20 +49,23 @@ export function DuplicationsIndicator({ size = 'sm', rating }: Props) {
       rating={rating}
       secondaryColor={secondaryColor}
       size={sizePX}
+      {...rest}
     />
   );
 }
 
 interface SVGProps {
+  'aria-hidden'?: boolean | 'true' | 'false';
+  'aria-label'?: string;
   primaryColor: string;
   rating: DuplicationLabel;
   secondaryColor: string;
   size: number;
 }
 
-function RatingSVG({ primaryColor, rating, secondaryColor, size }: SVGProps) {
+function RatingSVG({ primaryColor, rating, secondaryColor, size, ...rest }: Readonly<SVGProps>) {
   return (
-    <svg height={size} role="img" viewBox="0 0 16 16" width={size}>
+    <svg height={size} viewBox="0 0 16 16" width={size} {...rest}>
       <circle cx="8" cy="8" fill={primaryColor} r="2" />
       {isDefined(rating) &&
         {
diff --git a/server/sonar-web/design-system/src/components/__tests__/CoverageIndicator-test.tsx b/server/sonar-web/design-system/src/components/__tests__/CoverageIndicator-test.tsx
index df178e6336f..648869f9ac9 100644
--- a/server/sonar-web/design-system/src/components/__tests__/CoverageIndicator-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/CoverageIndicator-test.tsx
@@ -17,20 +17,24 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { screen } from '@testing-library/react';
 import { render } from '../../helpers/testUtils';
 import { FCProps } from '../../types/misc';
 
 import { CoverageIndicator } from '../CoverageIndicator';
 
 it('should display CoverageIndicator', () => {
-  setupWithProps({ value: 10 });
-  expect(screen.getByRole('img', { hidden: true })).toMatchSnapshot();
+  const wrapper = setupWithProps({ value: 10 });
+  expect(wrapper.baseElement).toMatchSnapshot();
 });
 
 it('should display CoverageIndicator without value', () => {
-  setupWithProps();
-  expect(screen.getByRole('img', { hidden: true })).toMatchSnapshot();
+  const wrapper = setupWithProps();
+  expect(wrapper.baseElement).toMatchSnapshot();
+});
+
+it('should display CoverageIndicator with correct aria properties', () => {
+  const wrapper = setupWithProps({ 'aria-label': 'label', 'aria-hidden': true });
+  expect(wrapper.baseElement).toMatchSnapshot();
 });
 
 function setupWithProps(props: Partial<FCProps<typeof CoverageIndicator>> = {}) {
diff --git a/server/sonar-web/design-system/src/components/__tests__/DuplicationsIndicator-test.tsx b/server/sonar-web/design-system/src/components/__tests__/DuplicationsIndicator-test.tsx
index 65f59934ad9..f0c9fbc1405 100644
--- a/server/sonar-web/design-system/src/components/__tests__/DuplicationsIndicator-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/DuplicationsIndicator-test.tsx
@@ -17,7 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { screen } from '@testing-library/react';
 import { render } from '../../helpers/testUtils';
 import { FCProps } from '../../types/misc';
 
@@ -25,15 +24,15 @@ import { DuplicationLabel } from '../../types/measures';
 import { DuplicationsIndicator } from '../DuplicationsIndicator';
 
 it('should display DuplicationsIndicator without rating', () => {
-  setupWithProps();
-  expect(screen.getByRole('img', { hidden: true })).toMatchSnapshot();
+  const wrapper = setupWithProps();
+  expect(wrapper.baseElement).toMatchSnapshot();
 });
 
 it.each(['A', 'B', 'C', 'D', 'E', 'F'])(
   'should display DuplicationsIndicator with rating',
   (variant: DuplicationLabel) => {
-    setupWithProps({ rating: variant });
-    expect(screen.getByRole('img', { hidden: true })).toMatchSnapshot();
+    const wrapper = setupWithProps({ rating: variant });
+    expect(wrapper.baseElement).toMatchSnapshot();
   },
 );
 
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CoverageIndicator-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CoverageIndicator-test.tsx.snap
index 8a49b54ab50..f04fb70a190 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CoverageIndicator-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CoverageIndicator-test.tsx.snap
@@ -1,49 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should display CoverageIndicator 1`] = `
-<svg
-  class="donut-chart"
-  height="24"
-  role="img"
-  width="24"
->
-  <g
-    transform="translate(0, 0)"
-  >
-    <g
-      transform="translate(12, 12)"
+<body>
+  <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,0,1,7.222,-9.583L5.265,-7.299A9,9,0,0,0,0.75,-8.969Z"
+            style="fill: rgb(18,183,106);"
+          />
+          <path
+            d="M8.361,-8.608A12,12,0,1,1,-0.75,-11.977L-0.75,-8.969A9,9,0,1,0,6.404,-6.324Z"
+            style="fill: rgb(180,35,24);"
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`should display CoverageIndicator with correct aria properties 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      aria-label="label"
+      fill="none"
+      height="24"
+      role="img"
+      style="clip-rule: evenodd; display: inline-block; fill-rule: evenodd; user-select: none; vertical-align: middle; stroke-linejoin: round; stroke-miterlimit: 1.414;"
+      version="1.1"
+      viewBox="0 0 16 16"
+      width="24"
+      xml:space="preserve"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
     >
       <path
-        d="M0.75,-11.977A12,12,0,0,1,7.222,-9.583L5.265,-7.299A9,9,0,0,0,0.75,-8.969Z"
-        style="fill: rgb(18,183,106);"
-      />
-      <path
-        d="M8.361,-8.608A12,12,0,1,1,-0.75,-11.977L-0.75,-8.969A9,9,0,1,0,6.404,-6.324Z"
-        style="fill: rgb(180,35,24);"
+        clip-rule="evenodd"
+        d="M16 8C16 12.4183 12.4183 16 8 16C5.5106 16 3.28676 14.863 1.81951 13.0799L15.4913 5.1865C15.8201 6.06172 16 7.00986 16 8ZM14.5574 3.41624L0.750565 11.3876C0.269025 10.3589 0 9.21089 0 8C0 3.58172 3.58172 0 8 0C10.7132 0 13.1109 1.35064 14.5574 3.41624Z"
+        fill="#E1E6F3"
+        fill-rule="evenodd"
       />
-    </g>
-  </g>
-</svg>
+    </svg>
+  </div>
+</body>
 `;
 
 exports[`should display CoverageIndicator without value 1`] = `
-<svg
-  aria-hidden="true"
-  fill="none"
-  height="24"
-  role="img"
-  style="clip-rule: evenodd; display: inline-block; fill-rule: evenodd; user-select: none; vertical-align: middle; stroke-linejoin: round; stroke-miterlimit: 1.414;"
-  version="1.1"
-  viewBox="0 0 16 16"
-  width="24"
-  xml:space="preserve"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
->
-  <path
-    clip-rule="evenodd"
-    d="M16 8C16 12.4183 12.4183 16 8 16C5.5106 16 3.28676 14.863 1.81951 13.0799L15.4913 5.1865C15.8201 6.06172 16 7.00986 16 8ZM14.5574 3.41624L0.750565 11.3876C0.269025 10.3589 0 9.21089 0 8C0 3.58172 3.58172 0 8 0C10.7132 0 13.1109 1.35064 14.5574 3.41624Z"
-    fill="#E1E6F3"
-    fill-rule="evenodd"
-  />
-</svg>
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      fill="none"
+      height="24"
+      role="img"
+      style="clip-rule: evenodd; display: inline-block; fill-rule: evenodd; user-select: none; vertical-align: middle; stroke-linejoin: round; stroke-miterlimit: 1.414;"
+      version="1.1"
+      viewBox="0 0 16 16"
+      width="24"
+      xml:space="preserve"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M16 8C16 12.4183 12.4183 16 8 16C5.5106 16 3.28676 14.863 1.81951 13.0799L15.4913 5.1865C15.8201 6.06172 16 7.00986 16 8ZM14.5574 3.41624L0.750565 11.3876C0.269025 10.3589 0 9.21089 0 8C0 3.58172 3.58172 0 8 0C10.7132 0 13.1109 1.35064 14.5574 3.41624Z"
+        fill="#E1E6F3"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </div>
+</body>
 `;
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/DuplicationsIndicator-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/DuplicationsIndicator-test.tsx.snap
index 21ac97b1eea..677207098fe 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/DuplicationsIndicator-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/DuplicationsIndicator-test.tsx.snap
@@ -1,181 +1,203 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should display DuplicationsIndicator with rating 1`] = `
-<svg
-  height="24"
-  role="img"
-  viewBox="0 0 16 16"
-  width="24"
->
-  <circle
-    cx="8"
-    cy="8"
-    fill="rgb(18,183,106)"
-    r="2"
-  />
-  <path
-    clip-rule="evenodd"
-    d="M8 14c3.3137 0 6-2.6863 6-6 0-3.31371-2.6863-6-6-6-3.31371 0-6 2.68629-6 6 0 3.3137 2.68629 6 6 6Zm0 2c4.4183 0 8-3.5817 8-8 0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 4.4183 3.58172 8 8 8Z"
-    fill="rgb(239,242,249)"
-    fill-rule="evenodd"
-  />
-  <circle
-    cx="8"
-    cy="8"
-    fill="rgb(18,183,106)"
-    r="2"
-  />
-</svg>
+<body>
+  <div>
+    <svg
+      height="24"
+      viewBox="0 0 16 16"
+      width="24"
+    >
+      <circle
+        cx="8"
+        cy="8"
+        fill="rgb(18,183,106)"
+        r="2"
+      />
+      <path
+        clip-rule="evenodd"
+        d="M8 14c3.3137 0 6-2.6863 6-6 0-3.31371-2.6863-6-6-6-3.31371 0-6 2.68629-6 6 0 3.3137 2.68629 6 6 6Zm0 2c4.4183 0 8-3.5817 8-8 0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 4.4183 3.58172 8 8 8Z"
+        fill="rgb(239,242,249)"
+        fill-rule="evenodd"
+      />
+      <circle
+        cx="8"
+        cy="8"
+        fill="rgb(18,183,106)"
+        r="2"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
 exports[`should display DuplicationsIndicator with rating 2`] = `
-<svg
-  height="24"
-  role="img"
-  viewBox="0 0 16 16"
-  width="24"
->
-  <circle
-    cx="8"
-    cy="8"
-    fill="rgb(18,183,106)"
-    r="2"
-  />
-  <path
-    clip-rule="evenodd"
-    d="M8 14c3.3137 0 6-2.6863 6-6 0-3.31371-2.6863-6-6-6-3.31371 0-6 2.68629-6 6 0 3.3137 2.68629 6 6 6Zm0 2c4.4183 0 8-3.5817 8-8 0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 4.4183 3.58172 8 8 8Z"
-    fill="rgb(239,242,249)"
-    fill-rule="evenodd"
-  />
-  <path
-    d="M8 0c.81879 0 1.63272.125698 2.4134.372702L9.81002 2.27953A5.99976 5.99976 0 0 0 8 2V0Z"
-    fill="rgb(18,183,106)"
-  />
-</svg>
+<body>
+  <div>
+    <svg
+      height="24"
+      viewBox="0 0 16 16"
+      width="24"
+    >
+      <circle
+        cx="8"
+        cy="8"
+        fill="rgb(18,183,106)"
+        r="2"
+      />
+      <path
+        clip-rule="evenodd"
+        d="M8 14c3.3137 0 6-2.6863 6-6 0-3.31371-2.6863-6-6-6-3.31371 0-6 2.68629-6 6 0 3.3137 2.68629 6 6 6Zm0 2c4.4183 0 8-3.5817 8-8 0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 4.4183 3.58172 8 8 8Z"
+        fill="rgb(239,242,249)"
+        fill-rule="evenodd"
+      />
+      <path
+        d="M8 0c.81879 0 1.63272.125698 2.4134.372702L9.81002 2.27953A5.99976 5.99976 0 0 0 8 2V0Z"
+        fill="rgb(18,183,106)"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
 exports[`should display DuplicationsIndicator with rating 3`] = `
-<svg
-  height="24"
-  role="img"
-  viewBox="0 0 16 16"
-  width="24"
->
-  <circle
-    cx="8"
-    cy="8"
-    fill="rgb(110,183,18)"
-    r="2"
-  />
-  <path
-    clip-rule="evenodd"
-    d="M8 14c3.3137 0 6-2.6863 6-6 0-3.31371-2.6863-6-6-6-3.31371 0-6 2.68629-6 6 0 3.3137 2.68629 6 6 6Zm0 2c4.4183 0 8-3.5817 8-8 0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 4.4183 3.58172 8 8 8Z"
-    fill="rgb(239,242,249)"
-    fill-rule="evenodd"
-  />
-  <path
-    d="M8 0c1.89071 2e-8 3.7203.669649 5.1643 1.89017l-1.2911 1.52746C10.7902 2.50224 9.41803 2 8 2V0Z"
-    fill="rgb(110,183,18)"
-  />
-</svg>
+<body>
+  <div>
+    <svg
+      height="24"
+      viewBox="0 0 16 16"
+      width="24"
+    >
+      <circle
+        cx="8"
+        cy="8"
+        fill="rgb(110,183,18)"
+        r="2"
+      />
+      <path
+        clip-rule="evenodd"
+        d="M8 14c3.3137 0 6-2.6863 6-6 0-3.31371-2.6863-6-6-6-3.31371 0-6 2.68629-6 6 0 3.3137 2.68629 6 6 6Zm0 2c4.4183 0 8-3.5817 8-8 0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 4.4183 3.58172 8 8 8Z"
+        fill="rgb(239,242,249)"
+        fill-rule="evenodd"
+      />
+      <path
+        d="M8 0c1.89071 2e-8 3.7203.669649 5.1643 1.89017l-1.2911 1.52746C10.7902 2.50224 9.41803 2 8 2V0Z"
+        fill="rgb(110,183,18)"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
 exports[`should display DuplicationsIndicator with rating 4`] = `
-<svg
-  height="24"
-  role="img"
-  viewBox="0 0 16 16"
-  width="24"
->
-  <circle
-    cx="8"
-    cy="8"
-    fill="rgb(245,184,64)"
-    r="2"
-  />
-  <path
-    clip-rule="evenodd"
-    d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
-    fill="rgb(239,242,249)"
-    fill-rule="evenodd"
-  />
-  <path
-    d="M8 0a7.9999 7.9999 0 0 1 4.5815 1.44181 7.99949 7.99949 0 0 1 2.9301 3.80574l-1.8779.68811A6.00009 6.00009 0 0 0 8 2V0Z"
-    fill="rgb(245,184,64)"
-  />
-</svg>
+<body>
+  <div>
+    <svg
+      height="24"
+      viewBox="0 0 16 16"
+      width="24"
+    >
+      <circle
+        cx="8"
+        cy="8"
+        fill="rgb(245,184,64)"
+        r="2"
+      />
+      <path
+        clip-rule="evenodd"
+        d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+        fill="rgb(239,242,249)"
+        fill-rule="evenodd"
+      />
+      <path
+        d="M8 0a7.9999 7.9999 0 0 1 4.5815 1.44181 7.99949 7.99949 0 0 1 2.9301 3.80574l-1.8779.68811A6.00009 6.00009 0 0 0 8 2V0Z"
+        fill="rgb(245,184,64)"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
 exports[`should display DuplicationsIndicator with rating 5`] = `
-<svg
-  height="24"
-  role="img"
-  viewBox="0 0 16 16"
-  width="24"
->
-  <circle
-    cx="8"
-    cy="8"
-    fill="rgb(247,95,9)"
-    r="2"
-  />
-  <path
-    clip-rule="evenodd"
-    d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
-    fill="rgb(239,242,249)"
-    fill-rule="evenodd"
-  />
-  <path
-    d="M8 0a8 8 0 0 1 5.0686 1.81054 8.00033 8.00033 0 0 1 2.7744 4.61211l-1.9608.39434a5.99958 5.99958 0 0 0-2.0808-3.45908A5.99972 5.99972 0 0 0 8 2V0Z"
-    fill="rgb(247,95,9)"
-  />
-</svg>
+<body>
+  <div>
+    <svg
+      height="24"
+      viewBox="0 0 16 16"
+      width="24"
+    >
+      <circle
+        cx="8"
+        cy="8"
+        fill="rgb(247,95,9)"
+        r="2"
+      />
+      <path
+        clip-rule="evenodd"
+        d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+        fill="rgb(239,242,249)"
+        fill-rule="evenodd"
+      />
+      <path
+        d="M8 0a8 8 0 0 1 5.0686 1.81054 8.00033 8.00033 0 0 1 2.7744 4.61211l-1.9608.39434a5.99958 5.99958 0 0 0-2.0808-3.45908A5.99972 5.99972 0 0 0 8 2V0Z"
+        fill="rgb(247,95,9)"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
 exports[`should display DuplicationsIndicator with rating 6`] = `
-<svg
-  height="24"
-  role="img"
-  viewBox="0 0 16 16"
-  width="24"
->
-  <circle
-    cx="8"
-    cy="8"
-    fill="rgb(240,68,56)"
-    r="2"
-  />
-  <path
-    clip-rule="evenodd"
-    d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
-    fill="rgb(239,242,249)"
-    fill-rule="evenodd"
-  />
-  <path
-    d="M8 0a8.0002 8.0002 0 0 1 5.6569 13.6569l-1.4143-1.4143a5.9993 5.9993 0 0 0 1.3007-6.5387A5.9999 5.9999 0 0 0 8 2V0Z"
-    fill="rgb(240,68,56)"
-  />
-</svg>
+<body>
+  <div>
+    <svg
+      height="24"
+      viewBox="0 0 16 16"
+      width="24"
+    >
+      <circle
+        cx="8"
+        cy="8"
+        fill="rgb(240,68,56)"
+        r="2"
+      />
+      <path
+        clip-rule="evenodd"
+        d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+        fill="rgb(239,242,249)"
+        fill-rule="evenodd"
+      />
+      <path
+        d="M8 0a8.0002 8.0002 0 0 1 5.6569 13.6569l-1.4143-1.4143a5.9993 5.9993 0 0 0 1.3007-6.5387A5.9999 5.9999 0 0 0 8 2V0Z"
+        fill="rgb(240,68,56)"
+      />
+    </svg>
+  </div>
+</body>
 `;
 
 exports[`should display DuplicationsIndicator without rating 1`] = `
-<svg
-  aria-hidden="true"
-  fill="none"
-  height="24"
-  role="img"
-  style="clip-rule: evenodd; display: inline-block; fill-rule: evenodd; user-select: none; vertical-align: middle; stroke-linejoin: round; stroke-miterlimit: 1.414;"
-  version="1.1"
-  viewBox="0 0 16 16"
-  width="24"
-  xml:space="preserve"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
->
-  <path
-    clip-rule="evenodd"
-    d="M16 8C16 12.4183 12.4183 16 8 16C5.5106 16 3.28676 14.863 1.81951 13.0799L15.4913 5.1865C15.8201 6.06172 16 7.00986 16 8ZM14.5574 3.41624L0.750565 11.3876C0.269025 10.3589 0 9.21089 0 8C0 3.58172 3.58172 0 8 0C10.7132 0 13.1109 1.35064 14.5574 3.41624Z"
-    fill="#E1E6F3"
-    fill-rule="evenodd"
-  />
-</svg>
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      fill="none"
+      height="24"
+      role="img"
+      style="clip-rule: evenodd; display: inline-block; fill-rule: evenodd; user-select: none; vertical-align: middle; stroke-linejoin: round; stroke-miterlimit: 1.414;"
+      version="1.1"
+      viewBox="0 0 16 16"
+      width="24"
+      xml:space="preserve"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M16 8C16 12.4183 12.4183 16 8 16C5.5106 16 3.28676 14.863 1.81951 13.0799L15.4913 5.1865C15.8201 6.06172 16 7.00986 16 8ZM14.5574 3.41624L0.750565 11.3876C0.269025 10.3589 0 9.21089 0 8C0 3.58172 3.58172 0 8 0C10.7132 0 13.1109 1.35064 14.5574 3.41624Z"
+        fill="#E1E6F3"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </div>
+</body>
 `;
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`] = `
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 2701872489e..13095e0a393 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -1992,6 +1992,7 @@ project_navigation.analysis_status.warnings=The last analysis has warnings.
 project_navigation.analysis_status.pending=New analysis pending
 project_navigation.analysis_status.in_progress=New analysis in progress
 project_navigation.analysis_status.details_link=See details
+project_navigation.analysis_status.details_link.label=See details about the last analysis
 
 #------------------------------------------------------------------------------
 #