SONAR-11774 Make issues more accessible to screen readers

server/sonar-web/src/main/js/app/styles/init/lists.css

@@ -46,7 +46,8 @@ ol.list-styled {
   list-style: none;
 }
 
-.list-inline > li {
+ul.list-inline > li,
+div.list-inline > div {
   display: inline-block;
   vertical-align: top;
   padding-right: 5px;

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

@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import QualifierIcon from 'sonar-ui-common/components/icons/QualifierIcon';
+import { translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { collapsePath, limitComponentName } from 'sonar-ui-common/helpers/path';
 import { getSelectedLocation } from '../utils';
 
@@ -42,7 +43,12 @@ export default function ComponentBreadcrumbs({
   const componentName = selectedLocation ? selectedLocation.componentName : issue.componentLongName;
 
   return (
-    <div className="component-name text-ellipsis">
+    <div
+      aria-label={translateWithParameters(
+        'issues.on_file_x',
+        `${displayProject ? issue.projectName + ', ' : ''}${componentName}`
+      )}
+      className="component-name text-ellipsis">
       <QualifierIcon className="spacer-right" qualifier={issue.componentQualifier} />
 
       {displayProject && (

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

@@ -70,7 +70,7 @@ export default class IssuesList extends React.PureComponent<Props, State> {
     }
 
     return (
-      <div>
+      <ul>
         {issues.map((issue, index) => (
           <ListItem
             branchLike={branchLike}
@@ -88,7 +88,7 @@ export default class IssuesList extends React.PureComponent<Props, State> {
             selected={selectedIssue != null && selectedIssue.key === issue.key}
           />
         ))}
-      </div>
+      </ul>
     );
   }
 }

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

@@ -95,7 +95,7 @@ export default class ListItem extends React.PureComponent<Props> {
     const displayComponent = !previousIssue || previousIssue.component !== issue.component;
 
     return (
-      <div className="issues-workspace-list-item">
+      <li className="issues-workspace-list-item">
         {displayComponent && (
           <div className="issues-workspace-list-component note">
             <ComponentBreadcrumbs component={component} issue={this.props.issue} />
@@ -113,7 +113,7 @@ export default class ListItem extends React.PureComponent<Props> {
           openPopup={this.props.openPopup}
           selected={this.props.selected}
         />
-      </div>
+      </li>
     );
   }
 }

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

@@ -2,6 +2,7 @@
 
 exports[`renders 1`] = `
 <div
+  aria-label="issues.on_file_x.proj-name, comp-name"
   className="component-name text-ellipsis"
 >
   <QualifierIcon
@@ -26,6 +27,7 @@ exports[`renders 1`] = `
 
 exports[`renders with sub-project 1`] = `
 <div
+  aria-label="issues.on_file_x.proj-name, comp-name"
   className="component-name text-ellipsis"
 >
   <QualifierIcon

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

@@ -9,7 +9,7 @@ exports[`should render correctly 1`] = `
 `;
 
 exports[`should render correctly 2`] = `
-<div>
+<ul>
   <ListItem
     checked={false}
     issue={
@@ -123,5 +123,5 @@ exports[`should render correctly 2`] = `
     }
     selected={false}
   />
-</div>
+</ul>
 `;

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

@@ -77,12 +77,7 @@ export default class IssueView extends React.PureComponent<Props> {
     });
 
     return (
-      <div
-        className={issueClass}
-        data-issue={issue.key}
-        onClick={this.handleClick}
-        role="listitem"
-        tabIndex={0}>
+      <div className={issueClass} data-issue={issue.key} onClick={this.handleClick} role="group">
         <IssueTitleBar
           branchLike={this.props.branchLike}
           currentPopup={this.props.currentPopup}

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

@@ -5,8 +5,7 @@ exports[`should render hotspots correctly 1`] = `
   className="issue hotspot selected"
   data-issue="AVsae-CQS-9G3txfbFN2"
   onClick={[Function]}
-  role="listitem"
-  tabIndex={0}
+  role="group"
 >
   <IssueTitleBar
     issue={
@@ -86,8 +85,7 @@ exports[`should render issues correctly 1`] = `
   className="issue selected"
   data-issue="AVsae-CQS-9G3txfbFN2"
   onClick={[Function]}
-  role="listitem"
-  tabIndex={0}
+  role="group"
 >
   <IssueTitleBar
     issue={

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

@@ -96,8 +96,8 @@ export default class IssueActionsBar extends React.PureComponent<Props, State> {
 
     return (
       <div className="issue-actions">
-        <ul className="issue-meta-list">
-          <li className="issue-meta">
+        <div className="issue-meta-list">
+          <div className="issue-meta">
             <IssueType
               canSetType={canSetType}
               isOpen={this.props.currentPopup === 'set-type' && canSetType}
@@ -105,9 +105,9 @@ export default class IssueActionsBar extends React.PureComponent<Props, State> {
               setIssueProperty={this.setIssueProperty}
               togglePopup={this.props.togglePopup}
             />
-          </li>
+          </div>
           {!isSecurityHotspot && (
-            <li className="issue-meta">
+            <div className="issue-meta">
               <IssueSeverity
                 canSetSeverity={canSetSeverity}
                 isOpen={this.props.currentPopup === 'set-severity' && canSetSeverity}
@@ -115,9 +115,9 @@ export default class IssueActionsBar extends React.PureComponent<Props, State> {
                 setIssueProperty={this.setIssueProperty}
                 togglePopup={this.props.togglePopup}
               />
-            </li>
+            </div>
           )}
-          <li className="issue-meta">
+          <div className="issue-meta">
             <IssueTransition
               hasTransitions={hasTransitions}
               isOpen={this.props.currentPopup === 'transition' && hasTransitions}
@@ -125,8 +125,8 @@ export default class IssueActionsBar extends React.PureComponent<Props, State> {
               onChange={this.handleTransition}
               togglePopup={this.props.togglePopup}
             />
-          </li>
-          <li className="issue-meta">
+          </div>
+          <div className="issue-meta">
             <IssueAssign
               canAssign={canAssign}
               isOpen={this.props.currentPopup === 'assign' && canAssign}
@@ -134,13 +134,13 @@ export default class IssueActionsBar extends React.PureComponent<Props, State> {
               onAssign={this.props.onAssign}
               togglePopup={this.props.togglePopup}
             />
-          </li>
+          </div>
           {!isSecurityHotspot && issue.effort && (
-            <li className="issue-meta">
+            <div className="issue-meta">
               <span className="issue-meta-label">
                 {translateWithParameters('issue.x_effort', issue.effort)}
               </span>
-            </li>
+            </div>
           )}
           {canComment && (
             <IssueCommentAction
@@ -152,9 +152,9 @@ export default class IssueActionsBar extends React.PureComponent<Props, State> {
               toggleComment={this.toggleComment}
             />
           )}
-        </ul>
-        <ul className="list-inline">
-          <li className="issue-meta js-issue-tags">
+        </div>
+        <div className="list-inline">
+          <div className="issue-meta js-issue-tags">
             <IssueTags
               canSetTags={canSetTags}
               isOpen={this.props.currentPopup === 'edit-tags' && canSetTags}
@@ -162,8 +162,8 @@ export default class IssueActionsBar extends React.PureComponent<Props, State> {
               onChange={this.props.onChange}
               togglePopup={this.props.togglePopup}
             />
-          </li>
-        </ul>
+          </div>
+        </div>
       </div>
     );
   }

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

@@ -53,7 +53,7 @@ export default class IssueAssign extends React.PureComponent<Props> {
             <Avatar
               className="little-spacer-right"
               hash={issue.assigneeAvatar}
-              name={issue.assigneeName || issue.assignee}
+              name={assigneeName}
               size={16}
             />
           </span>
@@ -70,15 +70,27 @@ export default class IssueAssign extends React.PureComponent<Props> {
   }
 
   render() {
-    if (this.props.canAssign) {
+    const { canAssign, isOpen, issue } = this.props;
+    const assigneeName = issue.assigneeName || issue.assignee;
+
+    if (canAssign) {
       return (
         <div className="dropdown">
           <Toggler
             closeOnEscape={true}
             onRequestClose={this.handleClose}
-            open={this.props.isOpen && this.props.canAssign}
+            open={isOpen}
             overlay={<SetAssigneePopup onSelect={this.props.onAssign} />}>
             <ButtonLink
+              aria-expanded={isOpen}
+              aria-label={
+                assigneeName
+                  ? translateWithParameters(
+                      'issue.assign.assigned_to_x_click_to_change',
+                      assigneeName
+                    )
+                  : translate('issue.assign.unassigned_click_to_assign')
+              }
               className="issue-action issue-action-with-options js-issue-assign"
               onClick={this.toggleAssign}>
               {this.renderAssignee()}
@@ -87,8 +99,8 @@ export default class IssueAssign extends React.PureComponent<Props> {
           </Toggler>
         </div>
       );
-    } else {
-      return this.renderAssignee();
     }
+
+    return this.renderAssignee();
   }
 }

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

@@ -52,6 +52,7 @@ export default class IssueChangelog extends React.PureComponent<Props> {
           open={this.props.isOpen}
           overlay={<ChangelogPopup issue={this.props.issue} />}>
           <ButtonLink
+            aria-expanded={this.props.isOpen}
             className="issue-action issue-action-with-options js-issue-show-changelog"
             onClick={this.handleClick}>
             <span className="issue-meta-label">

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

@@ -63,7 +63,11 @@ export default class IssueCommentAction extends React.PureComponent<Props> {
               toggleComment={this.props.toggleComment}
             />
           }>
-          <ButtonLink className="issue-action js-issue-comment" onClick={this.handleCommentClick}>
+          <ButtonLink
+            aria-expanded={this.props.currentPopup === 'comment'}
+            aria-label={translate('issue.comment.add_comment')}
+            className="issue-action js-issue-comment"
+            onClick={this.handleCommentClick}>
             <span className="issue-meta-label">{translate('issue.comment.formlink')}</span>
           </ButtonLink>
         </Toggler>

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

@@ -23,7 +23,7 @@ import { DeleteButton, EditButton } from 'sonar-ui-common/components/controls/bu
 import Toggler from 'sonar-ui-common/components/controls/Toggler';
 import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
 import { PopupPlacement } from 'sonar-ui-common/components/ui/popups';
-import { translateWithParameters } from 'sonar-ui-common/helpers/l10n';
+import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import Avatar from '../../ui/Avatar';
 import CommentDeletePopup from '../popups/CommentDeletePopup';
 import CommentPopup from '../popups/CommentPopup';
@@ -99,6 +99,7 @@ export default class IssueCommentLine extends React.PureComponent<Props, State>
           dangerouslySetInnerHTML={{ __html: sanitize(comment.htmlText) }}
         />
         <div className="issue-comment-age">
+          <span className="a11y-hidden">{translate('issue.comment.posted_on')}</span>
           <DateFromNow date={comment.createdAt} />
         </div>
         <div className="issue-comment-actions">
@@ -118,6 +119,7 @@ export default class IssueCommentLine extends React.PureComponent<Props, State>
                   />
                 }>
                 <EditButton
+                  aria-label={translate('issue.comment.edit')}
                   className="js-issue-comment-edit button-small"
                   onClick={this.toggleEditPopup}
                 />
@@ -131,6 +133,7 @@ export default class IssueCommentLine extends React.PureComponent<Props, State>
                 open={this.state.openPopup === 'delete'}
                 overlay={<CommentDeletePopup onDelete={this.handleDelete} />}>
                 <DeleteButton
+                  aria-label={translate('issue.comment.delete')}
                   className="js-issue-comment-delete button-small"
                   onClick={this.toggleDeletePopup}
                 />

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

@@ -21,6 +21,7 @@ import * as React from 'react';
 import { ButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import Toggler from 'sonar-ui-common/components/controls/Toggler';
 import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
+import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { setIssueSeverity } from '../../../api/issues';
 import { IssueResponse } from '../../../types/issues';
 import SeverityHelper from '../../shared/SeverityHelper';
@@ -62,6 +63,11 @@ export default class IssueSeverity extends React.PureComponent<Props> {
             open={this.props.isOpen && this.props.canSetSeverity}
             overlay={<SetSeverityPopup issue={issue} onSelect={this.setSeverity} />}>
             <ButtonLink
+              aria-label={translateWithParameters(
+                'issue.severity.severity_x_click_to_change',
+                translate('severity', issue.severity)
+              )}
+              aria-expanded={this.props.isOpen}
               className="issue-action issue-action-with-options js-issue-set-severity"
               onClick={this.toggleSetSeverity}>
               <SeverityHelper className="issue-meta-label" severity={issue.severity} />
@@ -70,8 +76,8 @@ export default class IssueSeverity extends React.PureComponent<Props> {
           </Toggler>
         </div>
       );
-    } else {
-      return <SeverityHelper className="issue-meta-label" severity={issue.severity} />;
     }
+
+    return <SeverityHelper className="issue-meta-label" severity={issue.severity} />;
   }
 }

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

@@ -66,6 +66,7 @@ export default class IssueTags extends React.PureComponent<Props> {
             open={this.props.isOpen}
             overlay={<SetIssueTagsPopup selectedTags={tags} setTags={this.setTags} />}>
             <ButtonLink
+              aria-expanded={this.props.isOpen}
               className="issue-action issue-action-with-options js-issue-edit-tags"
               onClick={this.toggleSetTags}>
               <TagsList
@@ -78,14 +79,14 @@ export default class IssueTags extends React.PureComponent<Props> {
           </Toggler>
         </div>
       );
-    } else {
-      return (
-        <TagsList
-          allowUpdate={this.props.canSetTags}
-          className="note"
-          tags={issue.tags && issue.tags.length > 0 ? issue.tags : [translate('issue.no_tag')]}
-        />
-      );
     }
+
+    return (
+      <TagsList
+        allowUpdate={this.props.canSetTags}
+        className="note"
+        tags={issue.tags && issue.tags.length > 0 ? issue.tags : [translate('issue.no_tag')]}
+      />
+    );
   }
 }

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

@@ -91,24 +91,24 @@ export default function IssueTitleBar(props: IssueTitleBarProps) {
       </WorkspaceContext.Consumer>
 
       <div className="issue-row-meta">
-        <ul className="issue-meta-list">
-          <li className="issue-meta">
+        <div className="issue-meta-list">
+          <div className="issue-meta">
             <IssueChangelog
               creationDate={issue.creationDate}
               isOpen={props.currentPopup === 'changelog'}
               issue={issue}
               togglePopup={props.togglePopup}
             />
-          </li>
+          </div>
           {issue.textRange != null && (
-            <li className="issue-meta">
+            <div className="issue-meta">
               <span className="issue-meta-label" title={translate('line_number')}>
                 L{issue.textRange.endLine}
               </span>
-            </li>
+            </div>
           )}
           {displayLocations && (
-            <li className="issue-meta">
+            <div className="issue-meta">
               {props.displayLocationsLink ? (
                 <Link target="_blank" to={issueUrl}>
                   {locationsBadge}
@@ -116,9 +116,9 @@ export default function IssueTitleBar(props: IssueTitleBarProps) {
               ) : (
                 locationsBadge
               )}
-            </li>
+            </div>
           )}
-          <li className="issue-meta">
+          <div className="issue-meta">
             <Link
               className="js-issue-permalink link-no-underline"
               target="_blank"
@@ -126,18 +126,18 @@ export default function IssueTitleBar(props: IssueTitleBarProps) {
               to={issueUrl}>
               <LinkIcon />
             </Link>
-          </li>
+          </div>
           {hasSimilarIssuesFilter && (
-            <li className="issue-meta">
+            <div className="issue-meta">
               <SimilarIssuesFilter
                 isOpen={props.currentPopup === 'similarIssues'}
                 issue={issue}
                 onFilter={props.onFilter}
                 togglePopup={props.togglePopup}
               />
-            </li>
+            </div>
           )}
-        </ul>
+        </div>
       </div>
     </div>
   );

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

@@ -21,6 +21,7 @@ import * as React from 'react';
 import { ButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import Toggler from 'sonar-ui-common/components/controls/Toggler';
 import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
+import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { setIssueTransition } from '../../../api/issues';
 import StatusHelper from '../../shared/StatusHelper';
 import { updateIssue } from '../actions';
@@ -69,6 +70,11 @@ export default class IssueTransition extends React.PureComponent<Props> {
               />
             }>
             <ButtonLink
+              aria-label={translateWithParameters(
+                'issue.transition.status_x_click_to_change',
+                translate('issue.status', issue.status)
+              )}
+              aria-expanded={this.props.isOpen}
               className="issue-action issue-action-with-options js-issue-transition"
               onClick={this.toggleSetTransition}>
               <StatusHelper
@@ -81,14 +87,14 @@ export default class IssueTransition extends React.PureComponent<Props> {
           </Toggler>
         </div>
       );
-    } else {
-      return (
-        <StatusHelper
-          className="issue-meta-label"
-          resolution={issue.resolution}
-          status={issue.status}
-        />
-      );
     }
+
+    return (
+      <StatusHelper
+        className="issue-meta-label"
+        resolution={issue.resolution}
+        status={issue.status}
+      />
+    );
   }
 }

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

@@ -22,7 +22,7 @@ import { ButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import Toggler from 'sonar-ui-common/components/controls/Toggler';
 import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
 import IssueTypeIcon from 'sonar-ui-common/components/icons/IssueTypeIcon';
-import { translate } from 'sonar-ui-common/helpers/l10n';
+import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { setIssueType } from '../../../api/issues';
 import { colors } from '../../../app/theme';
 import { IssueResponse } from '../../../types/issues';
@@ -64,6 +64,11 @@ export default class IssueType extends React.PureComponent<Props> {
             open={this.props.isOpen && this.props.canSetType}
             overlay={<SetTypePopup issue={issue} onSelect={this.setType} />}>
             <ButtonLink
+              aria-label={translateWithParameters(
+                'issue.type.type_x_click_to_change',
+                translate('issue.type', issue.type)
+              )}
+              aria-expanded={this.props.isOpen}
               className="issue-action issue-action-with-options js-issue-set-type"
               onClick={this.toggleSetType}>
               <IssueTypeIcon
@@ -77,13 +82,13 @@ export default class IssueType extends React.PureComponent<Props> {
           </Toggler>
         </div>
       );
-    } else {
-      return (
-        <span>
-          <IssueTypeIcon className="little-spacer-right" query={issue.type} />
-          {translate('issue.type', issue.type)}
-        </span>
-      );
     }
+
+    return (
+      <span>
+        <IssueTypeIcon className="little-spacer-right" query={issue.type} />
+        {translate('issue.type', issue.type)}
+      </span>
+    );
   }
 }

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

@@ -57,6 +57,7 @@ export default class SimilarIssuesFilter extends React.PureComponent<Props> {
           overlay={<SimilarIssuesPopup issue={this.props.issue} onFilter={this.handleFilter} />}>
           <ButtonLink
             aria-label={translate('issue.filter_similar_issues')}
+            aria-expanded={this.props.isOpen}
             className="issue-action issue-action-with-options js-issue-filter"
             onClick={this.togglePopup}
             title={translate('issue.filter_similar_issues')}>

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

@@ -4,10 +4,10 @@ exports[`should render commentable correctly 1`] = `
 <div
   className="issue-actions"
 >
-  <ul
+  <div
     className="issue-meta-list"
   >
-    <li
+    <div
       className="issue-meta"
     >
       <IssueType
@@ -49,8 +49,8 @@ exports[`should render commentable correctly 1`] = `
         setIssueProperty={[Function]}
         togglePopup={[MockFunction]}
       />
-    </li>
-    <li
+    </div>
+    <div
       className="issue-meta"
     >
       <IssueSeverity
@@ -92,8 +92,8 @@ exports[`should render commentable correctly 1`] = `
         setIssueProperty={[Function]}
         togglePopup={[MockFunction]}
       />
-    </li>
-    <li
+    </div>
+    <div
       className="issue-meta"
     >
       <IssueTransition
@@ -135,8 +135,8 @@ exports[`should render commentable correctly 1`] = `
         onChange={[Function]}
         togglePopup={[MockFunction]}
       />
-    </li>
-    <li
+    </div>
+    <div
       className="issue-meta"
     >
       <IssueAssign
@@ -178,7 +178,7 @@ exports[`should render commentable correctly 1`] = `
         onAssign={[MockFunction]}
         togglePopup={[MockFunction]}
       />
-    </li>
+    </div>
     <IssueCommentAction
       commentAutoTriggered={false}
       commentPlaceholder=""
@@ -186,11 +186,11 @@ exports[`should render commentable correctly 1`] = `
       onChange={[MockFunction]}
       toggleComment={[Function]}
     />
-  </ul>
-  <ul
+  </div>
+  <div
     className="list-inline"
   >
-    <li
+    <div
       className="issue-meta js-issue-tags"
     >
       <IssueTags
@@ -232,8 +232,8 @@ exports[`should render commentable correctly 1`] = `
         onChange={[MockFunction]}
         togglePopup={[MockFunction]}
       />
-    </li>
-  </ul>
+    </div>
+  </div>
 </div>
 `;
 
@@ -241,10 +241,10 @@ exports[`should render effort correctly 1`] = `
 <div
   className="issue-actions"
 >
-  <ul
+  <div
     className="issue-meta-list"
   >
-    <li
+    <div
       className="issue-meta"
     >
       <IssueType
@@ -285,8 +285,8 @@ exports[`should render effort correctly 1`] = `
         setIssueProperty={[Function]}
         togglePopup={[MockFunction]}
       />
-    </li>
-    <li
+    </div>
+    <div
       className="issue-meta"
     >
       <IssueSeverity
@@ -327,8 +327,8 @@ exports[`should render effort correctly 1`] = `
         setIssueProperty={[Function]}
         togglePopup={[MockFunction]}
       />
-    </li>
-    <li
+    </div>
+    <div
       className="issue-meta"
     >
       <IssueTransition
@@ -369,8 +369,8 @@ exports[`should render effort correctly 1`] = `
         onChange={[Function]}
         togglePopup={[MockFunction]}
       />
-    </li>
-    <li
+    </div>
+    <div
       className="issue-meta"
     >
       <IssueAssign
@@ -411,8 +411,8 @@ exports[`should render effort correctly 1`] = `
         onAssign={[MockFunction]}
         togglePopup={[MockFunction]}
       />
-    </li>
-    <li
+    </div>
+    <div
       className="issue-meta"
     >
       <span
@@ -420,12 +420,12 @@ exports[`should render effort correctly 1`] = `
       >
         issue.x_effort.great
       </span>
-    </li>
-  </ul>
-  <ul
+    </div>
+  </div>
+  <div
     className="list-inline"
   >
-    <li
+    <div
       className="issue-meta js-issue-tags"
     >
       <IssueTags
@@ -466,8 +466,8 @@ exports[`should render effort correctly 1`] = `
         onChange={[MockFunction]}
         togglePopup={[MockFunction]}
       />
-    </li>
-  </ul>
+    </div>
+  </div>
 </div>
 `;
 
@@ -475,10 +475,10 @@ exports[`should render issue correctly 1`] = `
 <div
   className="issue-actions"
 >
-  <ul
+  <div
     className="issue-meta-list"
   >
-    <li
+    <div
       className="issue-meta"
     >
       <IssueType
@@ -518,8 +518,8 @@ exports[`should render issue correctly 1`] = `
         setIssueProperty={[Function]}
         togglePopup={[MockFunction]}
       />
-    </li>
-    <li
+    </div>
+    <div
       className="issue-meta"
     >
       <IssueSeverity
@@ -559,8 +559,8 @@ exports[`should render issue correctly 1`] = `
         setIssueProperty={[Function]}
         togglePopup={[MockFunction]}
       />
-    </li>
-    <li
+    </div>
+    <div
       className="issue-meta"
     >
       <IssueTransition
@@ -600,8 +600,8 @@ exports[`should render issue correctly 1`] = `
         onChange={[Function]}
         togglePopup={[MockFunction]}
       />
-    </li>
-    <li
+    </div>
+    <div
       className="issue-meta"
     >
       <IssueAssign
@@ -641,12 +641,12 @@ exports[`should render issue correctly 1`] = `
         onAssign={[MockFunction]}
         togglePopup={[MockFunction]}
       />
-    </li>
-  </ul>
-  <ul
+    </div>
+  </div>
+  <div
     className="list-inline"
   >
-    <li
+    <div
       className="issue-meta js-issue-tags"
     >
       <IssueTags
@@ -686,8 +686,8 @@ exports[`should render issue correctly 1`] = `
         onChange={[MockFunction]}
         togglePopup={[MockFunction]}
       />
-    </li>
-  </ul>
+    </div>
+  </div>
 </div>
 `;
 
@@ -695,10 +695,10 @@ exports[`should render security hotspot correctly 1`] = `
 <div
   className="issue-actions"
 >
-  <ul
+  <div
     className="issue-meta-list"
   >
-    <li
+    <div
       className="issue-meta"
     >
       <IssueType
@@ -738,8 +738,8 @@ exports[`should render security hotspot correctly 1`] = `
         setIssueProperty={[Function]}
         togglePopup={[MockFunction]}
       />
-    </li>
-    <li
+    </div>
+    <div
       className="issue-meta"
     >
       <IssueTransition
@@ -779,8 +779,8 @@ exports[`should render security hotspot correctly 1`] = `
         onChange={[Function]}
         togglePopup={[MockFunction]}
       />
-    </li>
-    <li
+    </div>
+    <div
       className="issue-meta"
     >
       <IssueAssign
@@ -820,12 +820,12 @@ exports[`should render security hotspot correctly 1`] = `
         onAssign={[MockFunction]}
         togglePopup={[MockFunction]}
       />
-    </li>
-  </ul>
-  <ul
+    </div>
+  </div>
+  <div
     className="list-inline"
   >
-    <li
+    <div
       className="issue-meta js-issue-tags"
     >
       <IssueTags
@@ -865,7 +865,7 @@ exports[`should render security hotspot correctly 1`] = `
         onChange={[MockFunction]}
         togglePopup={[MockFunction]}
       />
-    </li>
-  </ul>
+    </div>
+  </div>
 </div>
 `;

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

@@ -24,6 +24,8 @@ exports[`should open the popup when the button is clicked 2`] = `
     }
   >
     <ButtonLink
+      aria-expanded={true}
+      aria-label="issue.assign.assigned_to_x_click_to_change.John Doe"
       className="issue-action issue-action-with-options js-issue-assign"
       onClick={[Function]}
     >
@@ -65,6 +67,8 @@ exports[`should render a fallback assignee display if assignee info are not avai
     }
   >
     <ButtonLink
+      aria-expanded={false}
+      aria-label="issue.assign.unassigned_click_to_assign"
       className="issue-action issue-action-with-options js-issue-assign"
       onClick={[Function]}
     >
@@ -96,6 +100,8 @@ exports[`should render with the action 1`] = `
     }
   >
     <ButtonLink
+      aria-expanded={false}
+      aria-label="issue.assign.assigned_to_x_click_to_change.John Doe"
       className="issue-action issue-action-with-options js-issue-assign"
       onClick={[Function]}
     >

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

@@ -29,6 +29,7 @@ exports[`should open the popup when the button is clicked 2`] = `
     }
   >
     <ButtonLink
+      aria-expanded={true}
       className="issue-action issue-action-with-options js-issue-show-changelog"
       onClick={[Function]}
     >
@@ -67,6 +68,7 @@ exports[`should render correctly 1`] = `
     }
   >
     <ButtonLink
+      aria-expanded={false}
       className="issue-action issue-action-with-options js-issue-show-changelog"
       onClick={[Function]}
     >

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

@@ -29,6 +29,8 @@ exports[`should open the popup when the button is clicked 1`] = `
     }
   >
     <ButtonLink
+      aria-expanded={true}
+      aria-label="issue.comment.add_comment"
       className="issue-action js-issue-comment"
       onClick={[Function]}
     >
@@ -59,6 +61,8 @@ exports[`should render correctly 1`] = `
     }
   >
     <ButtonLink
+      aria-expanded={false}
+      aria-label="issue.comment.add_comment"
       className="issue-action js-issue-comment"
       onClick={[Function]}
     >

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

@@ -39,6 +39,11 @@ exports[`should open the right popups when the buttons are clicked 3`] = `
   <div
     className="issue-comment-age"
   >
+    <span
+      className="a11y-hidden"
+    >
+      issue.comment.posted_on
+    </span>
     <DateFromNow
       date="2017-03-01T09:36:01+0100"
     />
@@ -76,6 +81,7 @@ exports[`should open the right popups when the buttons are clicked 3`] = `
         }
       >
         <EditButton
+          aria-label="issue.comment.edit"
           className="js-issue-comment-edit button-small"
           onClick={[Function]}
         />
@@ -94,6 +100,7 @@ exports[`should open the right popups when the buttons are clicked 3`] = `
         }
       >
         <DeleteButton
+          aria-label="issue.comment.delete"
           className="js-issue-comment-delete button-small"
           onClick={[Function]}
         />
@@ -130,6 +137,11 @@ exports[`should render correctly a comment that is not updatable 1`] = `
   <div
     className="issue-comment-age"
   >
+    <span
+      className="a11y-hidden"
+    >
+      issue.comment.posted_on
+    </span>
     <DateFromNow
       date="2017-03-01T09:36:01+0100"
     />
@@ -167,6 +179,11 @@ exports[`should render correctly a comment that is updatable 1`] = `
   <div
     className="issue-comment-age"
   >
+    <span
+      className="a11y-hidden"
+    >
+      issue.comment.posted_on
+    </span>
     <DateFromNow
       date="2017-03-01T09:36:01+0100"
     />
@@ -204,6 +221,7 @@ exports[`should render correctly a comment that is updatable 1`] = `
         }
       >
         <EditButton
+          aria-label="issue.comment.edit"
           className="js-issue-comment-edit button-small"
           onClick={[Function]}
         />
@@ -222,6 +240,7 @@ exports[`should render correctly a comment that is updatable 1`] = `
         }
       >
         <DeleteButton
+          aria-label="issue.comment.delete"
           className="js-issue-comment-delete button-small"
           onClick={[Function]}
         />

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

@@ -28,6 +28,8 @@ exports[`should open the popup when the button is clicked 2`] = `
     }
   >
     <ButtonLink
+      aria-expanded={true}
+      aria-label="issue.severity.severity_x_click_to_change.severity.BLOCKER"
       className="issue-action issue-action-with-options js-issue-set-severity"
       onClick={[Function]}
     >
@@ -62,6 +64,8 @@ exports[`should render with the action 1`] = `
     }
   >
     <ButtonLink
+      aria-expanded={false}
+      aria-label="issue.severity.severity_x_click_to_change.severity.BLOCKER"
       className="issue-action issue-action-with-options js-issue-set-severity"
       onClick={[Function]}
     >

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

@@ -29,6 +29,7 @@ exports[`should open the popup when the button is clicked 2`] = `
     }
   >
     <ButtonLink
+      aria-expanded={true}
       className="issue-action issue-action-with-options js-issue-edit-tags"
       onClick={[Function]}
     >
@@ -66,6 +67,7 @@ exports[`should render with the action 1`] = `
     }
   >
     <ButtonLink
+      aria-expanded={false}
       className="issue-action issue-action-with-options js-issue-edit-tags"
       onClick={[Function]}
     >

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

@@ -10,10 +10,10 @@ exports[`should render correctly: default 1`] = `
   <div
     className="issue-row-meta"
   >
-    <ul
+    <div
       className="issue-meta-list"
     >
-      <li
+      <div
         className="issue-meta"
       >
         <IssueChangelog
@@ -53,8 +53,8 @@ exports[`should render correctly: default 1`] = `
           }
           togglePopup={[MockFunction]}
         />
-      </li>
-      <li
+      </div>
+      <div
         className="issue-meta"
       >
         <span
@@ -64,8 +64,8 @@ exports[`should render correctly: default 1`] = `
           L
           26
         </span>
-      </li>
-      <li
+      </div>
+      <div
         className="issue-meta"
       >
         <Link
@@ -88,8 +88,8 @@ exports[`should render correctly: default 1`] = `
         >
           <LinkIcon />
         </Link>
-      </li>
-    </ul>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -114,10 +114,10 @@ exports[`should render correctly: with filter 1`] = `
   <div
     className="issue-row-meta"
   >
-    <ul
+    <div
       className="issue-meta-list"
     >
-      <li
+      <div
         className="issue-meta"
       >
         <IssueChangelog
@@ -157,8 +157,8 @@ exports[`should render correctly: with filter 1`] = `
           }
           togglePopup={[MockFunction]}
         />
-      </li>
-      <li
+      </div>
+      <div
         className="issue-meta"
       >
         <span
@@ -168,8 +168,8 @@ exports[`should render correctly: with filter 1`] = `
           L
           26
         </span>
-      </li>
-      <li
+      </div>
+      <div
         className="issue-meta"
       >
         <Link
@@ -192,8 +192,8 @@ exports[`should render correctly: with filter 1`] = `
         >
           <LinkIcon />
         </Link>
-      </li>
-      <li
+      </div>
+      <div
         className="issue-meta"
       >
         <SimilarIssuesFilter
@@ -233,8 +233,8 @@ exports[`should render correctly: with filter 1`] = `
           onFilter={[MockFunction]}
           togglePopup={[MockFunction]}
         />
-      </li>
-    </ul>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -249,10 +249,10 @@ exports[`should render correctly: with multi locations 1`] = `
   <div
     className="issue-row-meta"
   >
-    <ul
+    <div
       className="issue-meta-list"
     >
-      <li
+      <div
         className="issue-meta"
       >
         <IssueChangelog
@@ -360,8 +360,8 @@ exports[`should render correctly: with multi locations 1`] = `
           }
           togglePopup={[MockFunction]}
         />
-      </li>
-      <li
+      </div>
+      <div
         className="issue-meta"
       >
         <span
@@ -371,8 +371,8 @@ exports[`should render correctly: with multi locations 1`] = `
           L
           26
         </span>
-      </li>
-      <li
+      </div>
+      <div
         className="issue-meta"
       >
         <Tooltip
@@ -382,8 +382,8 @@ exports[`should render correctly: with multi locations 1`] = `
             7
           </LocationIndex>
         </Tooltip>
-      </li>
-      <li
+      </div>
+      <div
         className="issue-meta"
       >
         <Link
@@ -406,8 +406,8 @@ exports[`should render correctly: with multi locations 1`] = `
         >
           <LinkIcon />
         </Link>
-      </li>
-    </ul>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -422,10 +422,10 @@ exports[`should render correctly: with multi locations and link 1`] = `
   <div
     className="issue-row-meta"
   >
-    <ul
+    <div
       className="issue-meta-list"
     >
-      <li
+      <div
         className="issue-meta"
       >
         <IssueChangelog
@@ -533,8 +533,8 @@ exports[`should render correctly: with multi locations and link 1`] = `
           }
           togglePopup={[MockFunction]}
         />
-      </li>
-      <li
+      </div>
+      <div
         className="issue-meta"
       >
         <span
@@ -544,8 +544,8 @@ exports[`should render correctly: with multi locations and link 1`] = `
           L
           26
         </span>
-      </li>
-      <li
+      </div>
+      <div
         className="issue-meta"
       >
         <Link
@@ -573,8 +573,8 @@ exports[`should render correctly: with multi locations and link 1`] = `
             </LocationIndex>
           </Tooltip>
         </Link>
-      </li>
-      <li
+      </div>
+      <div
         className="issue-meta"
       >
         <Link
@@ -598,8 +598,8 @@ exports[`should render correctly: with multi locations and link 1`] = `
         >
           <LinkIcon />
         </Link>
-      </li>
-    </ul>
+      </div>
+    </div>
   </div>
 </div>
 `;

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

@@ -33,6 +33,8 @@ exports[`should open the popup when the button is clicked 2`] = `
     }
   >
     <ButtonLink
+      aria-expanded={true}
+      aria-label="issue.transition.status_x_click_to_change.issue.status.OPEN"
       className="issue-action issue-action-with-options js-issue-transition"
       onClick={[Function]}
     >
@@ -69,6 +71,8 @@ exports[`should render with a resolution 1`] = `
     }
   >
     <ButtonLink
+      aria-expanded={false}
+      aria-label="issue.transition.status_x_click_to_change.issue.status.RESOLVED"
       className="issue-action issue-action-with-options js-issue-transition"
       onClick={[Function]}
     >
@@ -109,6 +113,8 @@ exports[`should render with the action 1`] = `
     }
   >
     <ButtonLink
+      aria-expanded={false}
+      aria-label="issue.transition.status_x_click_to_change.issue.status.OPEN"
       className="issue-action issue-action-with-options js-issue-transition"
       onClick={[Function]}
     >

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

@@ -28,6 +28,8 @@ exports[`should open the popup when the button is clicked 2`] = `
     }
   >
     <ButtonLink
+      aria-expanded={true}
+      aria-label="issue.type.type_x_click_to_change.issue.type.BUG"
       className="issue-action issue-action-with-options js-issue-set-type"
       onClick={[Function]}
     >
@@ -64,6 +66,8 @@ exports[`should render with the action 1`] = `
     }
   >
     <ButtonLink
+      aria-expanded={false}
+      aria-label="issue.type.type_x_click_to_change.issue.type.BUG"
       className="issue-action issue-action-with-options js-issue-set-type"
       onClick={[Function]}
     >

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

@@ -762,14 +762,21 @@ hotspots.update.success=Security Hotspot status was successfully changed to {0}
 #
 #------------------------------------------------------------------------------
 
+issues.on_file_x=Issues on file {0}
 issue.add_tags=Add Tags
 issue.remove_tags=Remove Tags
 issue.no_tag=No tags
+issue.assign.assigned_to_x_click_to_change=Assigned to {0}, click to change
+issue.assign.unassigned_click_to_assign=Unassigned, click to assign issue
 issue.assign.formlink=Assign
 issue.assign.to_me=to me
+issue.comment.add_comment=Add Comment
 issue.comment.formlink=Comment
 issue.comment.submit=Comment
 issue.comment.explain_why=Consider explaining why
+issue.comment.posted_on=Comment posted on
+issue.comment.edit=Edit comment
+issue.comment.delete=Delete comment
 issue.comment.delete_confirm_message=Do you want to delete this comment?
 issue.manual_vulnerability=Manual
 issue.manual_vulnerability.description=This Vulnerability was created from a Security Hotspot and has its own issue workflow.
@@ -777,6 +784,9 @@ issue.rule_details=Rule Details
 issue.send_notifications=Send Notifications
 issue.why_this_issue=Why is this an issue?
 issue.why_this_issue.long=Why is this an issue? Open the rule's details at the bottom of the page.
+issue.type.type_x_click_to_change=Type: {0}, click to change
+issue.severity.severity_x_click_to_change=Severity: {0}, click to change
+issue.transition.status_x_click_to_change=Issue status: {0}, click to change
 issue.transition=Transition
 issue.transition.confirm=Confirm
 issue.transition.confirm.description=This issue has been reviewed and something should be done eventually to handle it.