Improve accessibility on issues page

server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx

@@ -963,6 +963,7 @@ export default class App extends React.PureComponent<Props, State> {
                   {translate('issues.not_all_issue_show')}
                   <HelpTooltip
                     className="spacer-left"
+                    ariaLabel={translate('issues.not_all_issue_show_why')}
                     overlay={translate('issues.not_all_issue_show_why')}
                   />
                 </Alert>

server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap

@@ -42,6 +42,7 @@ exports[`should show warnning when not all projects are accessible 1`] = `
       >
         issues.not_all_issue_show
         <HelpTooltip
+          ariaLabel="issues.not_all_issue_show_why"
           className="spacer-left"
           overlay="issues.not_all_issue_show_why"
         />

server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx

@@ -31,11 +31,18 @@ interface Props extends Pick<IconProps, 'size'> {
   onShow?: () => void;
   overlay: React.ReactNode;
   placement?: Placement;
+  ariaLabel?: string;
+  ariaLabelledby?: string;
 }
 
-export default function HelpTooltip({ size = 12, ...props }: Props) {
+export default function HelpTooltip({ size = 12, ariaLabel, ariaLabelledby, ...props }: Props) {
+  const role = ariaLabel || ariaLabelledby ? 'note' : undefined;
   return (
-    <div className={classNames('help-tooltip', props.className)}>
+    <div
+      className={classNames('help-tooltip', props.className)}
+      aria-labelledby={ariaLabelledby}
+      aria-label={ariaLabel}
+      role={role}>
       <Tooltip
         mouseLeaveDelay={0.25}
         onShow={props.onShow}

server/sonar-web/src/main/js/components/issue/IssueView.tsx

@@ -21,6 +21,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { deleteIssueComment, editIssueComment } from '../../api/issues';
 import Checkbox from '../../components/controls/Checkbox';
+import { translate } from '../../helpers/l10n';
 import { BranchLike } from '../../types/branch-like';
 import { updateIssue } from './actions';
 import IssueActionsBar from './components/IssueActionsBar';
@@ -112,6 +113,7 @@ export default class IssueView extends React.PureComponent<Props> {
               checked={this.props.checked || false}
               className="issue-checkbox-container"
               onCheck={this.handleCheck}
+              title={translate('issues.action_select')}
             />
           </>
         )}

server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx

@@ -50,12 +50,7 @@ export default class IssueAssign extends React.PureComponent<Props> {
       return (
         <>
           <span className="text-top">
-            <Avatar
-              className="little-spacer-right"
-              hash={issue.assigneeAvatar}
-              name={assigneeName}
-              size={16}
-            />
+            <Avatar className="little-spacer-right" hash={issue.assigneeAvatar} name="" size={16} />
           </span>
           <span className="issue-meta-label">
             {issue.assigneeActive === false

server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx

@@ -50,7 +50,7 @@ export default class IssueCommentAction extends React.PureComponent<Props> {
 
   render() {
     return (
-      <li className="issue-meta dropdown">
+      <div className="issue-meta dropdown">
         <Toggler
           closeOnClickOutside={false}
           onRequestClose={this.handleClose}
@@ -71,7 +71,7 @@ export default class IssueCommentAction extends React.PureComponent<Props> {
             <span className="issue-meta-label">{translate('issue.comment.formlink')}</span>
           </ButtonLink>
         </Toggler>
-      </li>
+      </div>
     );
   }
 }

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueAssign-test.tsx.snap

@@ -35,7 +35,7 @@ exports[`should open the popup when the button is clicked 2`] = `
         <Connect(Avatar)
           className="little-spacer-right"
           hash="gravatarhash"
-          name="John Doe"
+          name=""
           size={16}
         />
       </span>
@@ -111,7 +111,7 @@ exports[`should render with the action 1`] = `
         <Connect(Avatar)
           className="little-spacer-right"
           hash="gravatarhash"
-          name="John Doe"
+          name=""
           size={16}
         />
       </span>
@@ -136,7 +136,7 @@ exports[`should render without the action when the correct rights are missing 1`
     <Connect(Avatar)
       className="little-spacer-right"
       hash="gravatarhash"
-      name="John Doe"
+      name=""
       size={16}
     />
   </span>

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentAction-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should open the popup when the button is clicked 1`] = `
-<li
+<div
   className="issue-meta dropdown"
 >
   <Toggler
@@ -41,11 +41,11 @@ exports[`should open the popup when the button is clicked 1`] = `
       </span>
     </ButtonLink>
   </Toggler>
-</li>
+</div>
 `;
 
 exports[`should render correctly 1`] = `
-<li
+<div
   className="issue-meta dropdown"
 >
   <Toggler
@@ -73,5 +73,5 @@ exports[`should render correctly 1`] = `
       </span>
     </ButtonLink>
   </Toggler>
-</li>
+</div>
 `;

server/sonar-web/src/main/js/components/tags/TagsList.tsx

@@ -34,6 +34,7 @@ export default function TagsList({ allowUpdate = false, className, tags }: Props
   return (
     <span
       aria-label={translateWithParameters('tags_list_x', tags.join(', '))}
+      role="note"
       className={classNames('tags-list', className)}>
       <TagsIcon className="text-middle" />
       <span aria-hidden={true} className="text-ellipsis text-middle" title={tags.join(', ')}>

server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsList-test.tsx.snap

@@ -4,6 +4,7 @@ exports[`should render with a caret on the right if update is allowed 1`] = `
 <span
   aria-label="tags_list_x.foo, bar"
   className="tags-list"
+  role="note"
 >
   <TagsIcon
     className="text-middle"
@@ -25,6 +26,7 @@ exports[`should render with a list of tag 1`] = `
 <span
   aria-label="tags_list_x.foo, bar"
   className="tags-list"
+  role="note"
 >
   <TagsIcon
     className="text-middle"

server/sonar-web/src/main/js/components/ui/Alert.tsx

@@ -42,6 +42,7 @@ interface AlertVariantInformation {
   color: string;
   borderColor: string;
   backGroundColor: string;
+  role: string;
 }
 
 const DOUBLE = 2;
@@ -105,31 +106,36 @@ function getAlertVariantInfo(variant: AlertVariant): AlertVariantInformation {
       icon: <AlertErrorIcon fill={colors.alertIconError} />,
       color: colors.alertTextError,
       borderColor: colors.alertBorderError,
-      backGroundColor: colors.alertBackgroundError
+      backGroundColor: colors.alertBackgroundError,
+      role: 'alert'
     },
     warning: {
       icon: <AlertWarnIcon fill={colors.alertIconWarning} />,
       color: colors.alertTextWarning,
       borderColor: colors.alertBorderWarning,
-      backGroundColor: colors.alertBackgroundWarning
+      backGroundColor: colors.alertBackgroundWarning,
+      role: 'alert'
     },
     success: {
       icon: <AlertSuccessIcon fill={colors.alertIconSuccess} />,
       color: colors.alertTextSuccess,
       borderColor: colors.alertBorderSuccess,
-      backGroundColor: colors.alertBackgroundSuccess
+      backGroundColor: colors.alertBackgroundSuccess,
+      role: 'status'
     },
     info: {
       icon: <InfoIcon fill={colors.alertIconInfo} />,
       color: colors.alertTextInfo,
       borderColor: colors.alertBorderInfo,
-      backGroundColor: colors.alertBackgroundInfo
+      backGroundColor: colors.alertBackgroundInfo,
+      role: 'status'
     },
     loading: {
       icon: <DeferredSpinner timeout={0} />,
       color: colors.alertTextInfo,
       borderColor: colors.alertBorderInfo,
-      backGroundColor: colors.alertBackgroundInfo
+      backGroundColor: colors.alertBackgroundInfo,
+      role: 'status'
     }
   };
 
@@ -146,7 +152,7 @@ export function Alert(props: AlertProps & React.HTMLAttributes<HTMLDivElement>)
     <StyledAlert
       className={classNames('alert', className)}
       isInline={isInline}
-      role="alert"
+      role={variantInfo.role}
       aria-label={translate('alert.tooltip', variant)}
       variantInfo={variantInfo}
       {...domProps}>

server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap

@@ -119,6 +119,7 @@ exports[`should render properly 1`] = `
       "icon": <AlertErrorIcon
         fill="#a4030f"
       />,
+      "role": "alert",
     }
   }
 >
@@ -135,6 +136,7 @@ exports[`should render properly 1`] = `
           "icon": <AlertErrorIcon
             fill="#a4030f"
           />,
+          "role": "alert",
         }
       }
     >
@@ -159,6 +161,7 @@ Object {
   "icon": <AlertErrorIcon
     fill="#a4030f"
   />,
+  "role": "alert",
 }
 `;
 
@@ -170,6 +173,7 @@ Object {
   "icon": <AlertWarnIcon
     fill="#db781a"
   />,
+  "role": "alert",
 }
 `;
 
@@ -181,6 +185,7 @@ Object {
   "icon": <AlertSuccessIcon
     fill="#6d9867"
   />,
+  "role": "status",
 }
 `;
 
@@ -192,6 +197,7 @@ Object {
   "icon": <InfoIcon
     fill="#0271b9"
   />,
+  "role": "status",
 }
 `;
 
@@ -203,5 +209,6 @@ Object {
   "icon": <DeferredSpinner
     timeout={0}
   />,
+  "role": "status",
 }
 `;

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -869,6 +869,7 @@ vulnerability.transition.resetastoreview.description=The vulnerability can't be
 vulnerability.transition.resolveasreviewed=Resolve as Reviewed
 vulnerability.transition.resolveasreviewed.description=The vulnerability has been fixed. The security hotspot is considered reviewed
 
+issues.action_select=Select issue
 issue.set_severity=Change Severity
 issue.set_type=Change Type