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 ae8aef6b211caa94c82001d9c5b1ae542ed802ef..fd49934083cedd90887bd65704f18b5d284af646 100644 (file)
--- 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 4bdb4cd70140ea0e2e98f34f79e09846f7f25bc3..4280459e52cce4ebdbd5344cc5cb4eab07520de0 100644 (file)
--- 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 5ed07a1d665dc675dcdbb2f6024d97b880e6d0a6..33e077727636a1607a52e37ef13d4ae9ddfd5f57 100644 (file)
--- 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 893212cc564d5af032148c9fe4a305cae57dcbd8..35b25b7367d83a269baaa7d5d653e6d8192a4401 100644 (file)
--- 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 {