SONAR-16782 [893332] The decorative image is not hidden from screen readers

3 files changed, 22 insertions, 8 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/ScopeFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/ScopeFacet.tsx
index e21c5798bd5..f831854f467 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/ScopeFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/ScopeFacet.tsx
@@ -67,7 +67,11 @@ export default function ScopeFacet(props: ScopeFacetProps) {
                   key={scope}
                   name={
                     <span className="display-flex-center">
-                      <QualifierIcon className="little-spacer-right" qualifier={qualifier} />{' '}
+                      <QualifierIcon
+                        className="little-spacer-right"
+                        qualifier={qualifier}
+                        aria-hidden={true}
+                      />{' '}
                       {translate('issue.scope', scope)}
                     </span>
                   }
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/ScopeFacet-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/ScopeFacet-test.tsx.snap
index c92cd880a4e..034d490ba1a 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/ScopeFacet-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/ScopeFacet-test.tsx.snap
@@ -27,6 +27,7 @@ exports[`should render correctly: active facet 1`] = `
           className="display-flex-center"
         >
           <QualifierIcon
+            aria-hidden={true}
             className="little-spacer-right"
             qualifier="FIL"
           />
@@ -47,6 +48,7 @@ exports[`should render correctly: active facet 1`] = `
           className="display-flex-center"
         >
           <QualifierIcon
+            aria-hidden={true}
             className="little-spacer-right"
             qualifier="UTS"
           />
@@ -103,6 +105,7 @@ exports[`should render correctly: disabled facet 1`] = `
           className="display-flex-center"
         >
           <QualifierIcon
+            aria-hidden={true}
             className="little-spacer-right"
             qualifier="FIL"
           />
@@ -124,6 +127,7 @@ exports[`should render correctly: disabled facet 1`] = `
           className="display-flex-center"
         >
           <QualifierIcon
+            aria-hidden={true}
             className="little-spacer-right"
             qualifier="UTS"
           />
@@ -165,6 +169,7 @@ exports[`should render correctly: open 1`] = `
           className="display-flex-center"
         >
           <QualifierIcon
+            aria-hidden={true}
             className="little-spacer-right"
             qualifier="FIL"
           />
@@ -185,6 +190,7 @@ exports[`should render correctly: open 1`] = `
           className="display-flex-center"
         >
           <QualifierIcon
+            aria-hidden={true}
             className="little-spacer-right"
             qualifier="UTS"
           />
diff --git a/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx b/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx
index 57cef682ed5..2c97d64e948 100644
--- a/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx
@@ -34,22 +34,26 @@ const qualifierIcons: Dict<(props: IconProps) => React.ReactElement> = {
   vw: PortfolioIcon
 };
 
-interface QualifierIconProps {
+interface QualifierIconProps extends IconProps {
   className?: string;
   fill?: string;
   qualifier: string | null | undefined;
 }
 
-export default function QualifierIcon(props: QualifierIconProps) {
-  if (!props.qualifier) {
+export default function QualifierIcon({
+  qualifier,
+  className,
+  fill,
+  ...props
+}: QualifierIconProps) {
+  if (!qualifier) {
     return null;
   }
 
-  const qualifier = props.qualifier.toLowerCase();
-  const FoundIcon = qualifierIcons[qualifier];
-  const ariaLabel = props.qualifier != null ? translate(`qualifier.${props.qualifier}`) : undefined;
+  const FoundIcon = qualifierIcons[qualifier.toLowerCase()];
+  const ariaLabel = qualifier != null ? translate(`qualifier.${qualifier}`) : undefined;
   return FoundIcon ? (
-    <FoundIcon className={props.className} fill={props.fill} ariaLabel={ariaLabel} />
+    <FoundIcon className={className} fill={fill} ariaLabel={ariaLabel} {...props} />
   ) : null;
 }