From: Mathieu Suen <mathieu.suen@sonarsource.com>
Date: Tue, 26 Oct 2021 13:17:46 +0000 (+0200)
Subject: Fixing critical accessibility issue
X-Git-Tag: 9.2.0.49834~85
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=0a0cc59dbda707da3c7e4a019962f774de2142a9;p=sonarqube.git

Fixing critical accessibility issue
---

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/InfoDrawer.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/InfoDrawer.tsx
index ae8aef6b211..fd49934083c 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/InfoDrawer.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/InfoDrawer.tsx
@@ -22,6 +22,7 @@ import * as React from 'react';
 import { ClearButton } from '../../../../../components/controls/buttons';
 import EscKeydownHandler from '../../../../../components/controls/EscKeydownHandler';
 import OutsideClickHandler from '../../../../../components/controls/OutsideClickHandler';
+import { translate } from '../../../../../helpers/l10n';
 import './InfoDrawer.css';
 
 export interface InfoDrawerProps {
@@ -39,7 +40,7 @@ export default function InfoDrawer(props: InfoDrawerProps) {
       className={classNames('info-drawer info-drawer-pane', { open: displayed })}
       style={{ top }}>
       <div className="close-button">
-        <ClearButton onClick={onClose} />
+        <ClearButton aria-label={translate('close')} onClick={onClose} />
       </div>
       {displayed && (
         <EscKeydownHandler onKeydown={onClose}>
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/InfoDrawer-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/InfoDrawer-test.tsx.snap
index 4bdb4cd7014..4280459e52c 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/InfoDrawer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/InfoDrawer-test.tsx.snap
@@ -13,6 +13,7 @@ exports[`should render correctly: default 1`] = `
     className="close-button"
   >
     <ClearButton
+      aria-label="close"
       onClick={[MockFunction]}
     />
   </div>
@@ -32,6 +33,7 @@ exports[`should render correctly: displayed 1`] = `
     className="close-button"
   >
     <ClearButton
+      aria-label="close"
       onClick={[MockFunction]}
     />
   </div>
diff --git a/server/sonar-web/src/main/js/components/ui/Alert.tsx b/server/sonar-web/src/main/js/components/ui/Alert.tsx
index 5ed07a1d665..33e07772763 100644
--- a/server/sonar-web/src/main/js/components/ui/Alert.tsx
+++ b/server/sonar-web/src/main/js/components/ui/Alert.tsx
@@ -147,13 +147,11 @@ export function Alert(props: AlertProps & React.HTMLAttributes<HTMLDivElement>)
       className={classNames('alert', className)}
       isInline={isInline}
       role="alert"
+      aria-label={translate('alert.tooltip', variant)}
       variantInfo={variantInfo}
       {...domProps}>
       <StyledAlertInner isBanner={isBanner}>
-        <StyledAlertIcon
-          aria-label={translate('alert.tooltip', variant)}
-          isBanner={isBanner}
-          variantInfo={variantInfo}>
+        <StyledAlertIcon isBanner={isBanner} variantInfo={variantInfo}>
           {variantInfo.icon}
         </StyledAlertIcon>
         <StyledAlertContent className="alert-content">{props.children}</StyledAlertContent>
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap
index 893212cc564..35b25b7367d 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap
@@ -69,6 +69,7 @@ exports[`should render banner alert with correct css 1`] = `
 }
 
 <div
+  aria-label="alert.tooltip.error"
   class="alert alert-test emotion-3"
   id="error-message"
   role="alert"
@@ -77,7 +78,6 @@ exports[`should render banner alert with correct css 1`] = `
     class="emotion-2"
   >
     <div
-      aria-label="alert.tooltip.error"
       class="emotion-0"
     >
       <svg
@@ -106,6 +106,7 @@ exports[`should render banner alert with correct css 1`] = `
 
 exports[`should render properly 1`] = `
 <Styled(div)
+  aria-label="alert.tooltip.error"
   className="alert alert-test"
   id="error-message"
   isInline={false}
@@ -125,7 +126,6 @@ exports[`should render properly 1`] = `
     isBanner={false}
   >
     <Styled(div)
-      aria-label="alert.tooltip.error"
       isBanner={false}
       variantInfo={
         Object {