SONAR-21808 Add the failed badge on software quality cards

2 files changed, 10 insertions, 7 deletions

diff --git a/server/sonar-web/design-system/src/components/Badge.tsx b/server/sonar-web/design-system/src/components/Badge.tsx
index 54ed4d62289..1746a417d0c 100644
--- a/server/sonar-web/design-system/src/components/Badge.tsx
+++ b/server/sonar-web/design-system/src/components/Badge.tsx
@@ -32,8 +32,7 @@ const variantList: Record<BadgeVariant, ThemeColors> = {
   counterFailed: 'badgeCounterFailed',
 };
 
-interface BadgeProps {
-  children: string | number;
+interface BadgeProps extends React.PropsWithChildren {
   className?: string;
   title?: string;
   variant?: BadgeVariant;
@@ -41,9 +40,9 @@ interface BadgeProps {
 
 export function Badge({ className, children, title, variant = 'default' }: BadgeProps) {
   const commonProps = {
-    'aria-label': title ?? children.toString(),
+    'aria-label': title,
     className,
-    role: 'status',
+    role: title ? 'img' : 'presentation',
     title,
   };
 
diff --git a/server/sonar-web/design-system/src/components/__tests__/Badge-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Badge-test.tsx
index 97f901852d8..5429ccc2a16 100644
--- a/server/sonar-web/design-system/src/components/__tests__/Badge-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/Badge-test.tsx
@@ -23,10 +23,14 @@ import { Badge } from '../Badge';
 
 it('renders badge correctly', () => {
   render(<Badge>foo</Badge>);
-  expect(screen.getByRole('status')).toBeInTheDocument();
+  expect(screen.getByText('foo')).toBeInTheDocument();
 });
 
 it('renders counter correctly', () => {
-  render(<Badge variant="counter">23</Badge>);
-  expect(screen.getByRole('status')).toHaveAttribute('aria-label', '23');
+  render(
+    <Badge title="This 23" variant="counter">
+      23
+    </Badge>,
+  );
+  expect(screen.getByRole('img')).toHaveAccessibleName('This 23');
 });