Fixing critical accessibility issue

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}>

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>

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>

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 {