SONAR-16966 Device-dependent event handlers are used

SONAR-16963 Programmatic label does not convey purpose of control

server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx

@@ -288,11 +288,22 @@ it('should show issue indicator', async () => {
   const row = await screen.findByRole('row', { name: /.*\/ \*$/ });
   const issueRow = within(row);
   expect(issueRow.getByText('2')).toBeInTheDocument();
-  await user.click(issueRow.getByRole('button', { name: 'source_viewer.issues_on_line.show' }));
+  await user.click(
+    issueRow.getByRole('button', {
+      name:
+        'source_viewer.issues_on_line.X_issues_of_type_Y.source_viewer.issues_on_line.show.2.issue.type.BUG.plural'
+    })
+  );
   const firstIssueBox = issueRow.getByRole('region', { name: 'First Issue' });
   const secondIssueBox = issueRow.getByRole('region', { name: 'Second Issue' });
   expect(firstIssueBox).toBeInTheDocument();
   expect(secondIssueBox).toBeInTheDocument();
+  expect(
+    issueRow.getByRole('button', {
+      name:
+        'source_viewer.issues_on_line.X_issues_of_type_Y.source_viewer.issues_on_line.hide.2.issue.type.BUG.plural'
+    })
+  ).toBeInTheDocument();
 
   await user.click(firstIssueBox);
   expect(onIssueSelect).toBeCalledWith('first-issue');

server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx

@@ -48,17 +48,23 @@ export function LineIssuesIndicator(props: LineIssuesIndicatorProps) {
   const mostImportantIssue = sortByType(issues)[0];
   const issueTypes = uniq(issues.map(i => i.type));
 
+  const tooltipShowHide = translate('source_viewer.issues_on_line', issuesOpen ? 'hide' : 'show');
   let tooltipContent;
   if (issueTypes.length > 1) {
-    tooltipContent = translate('source_viewer.issues_on_line.multiple_issues');
+    tooltipContent = translateWithParameters(
+      'source_viewer.issues_on_line.multiple_issues',
+      tooltipShowHide
+    );
   } else if (issues.length === 1) {
     tooltipContent = translateWithParameters(
       'source_viewer.issues_on_line.issue_of_type_X',
+      tooltipShowHide,
       translate('issue.type', mostImportantIssue.type)
     );
   } else {
     tooltipContent = translateWithParameters(
       'source_viewer.issues_on_line.X_issues_of_type_Y',
+      tooltipShowHide,
       issues.length,
       translate('issue.type', mostImportantIssue.type, 'plural')
     );
@@ -66,14 +72,12 @@ export function LineIssuesIndicator(props: LineIssuesIndicatorProps) {
 
   return (
     <td className={className} data-line-number={line.line}>
-      <ButtonPlain
-        aria-label={translate('source_viewer.issues_on_line', issuesOpen ? 'hide' : 'show')}
-        onClick={props.onClick}>
-        <Tooltip overlay={tooltipContent}>
+      <Tooltip overlay={tooltipContent}>
+        <ButtonPlain aria-label={tooltipContent} aria-expanded={issuesOpen} onClick={props.onClick}>
           <IssueIcon type={mostImportantIssue.type} />
-        </Tooltip>
-        {issues.length > 1 && <span className="source-line-issues-counter">{issues.length}</span>}
-      </ButtonPlain>
+          {issues.length > 1 && <span className="source-line-issues-counter">{issues.length}</span>}
+        </ButtonPlain>
+      </Tooltip>
     </td>
   );
 }

server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineIssuesIndicator-test.tsx.snap

@@ -5,23 +5,23 @@ exports[`should render correctly: default 1`] = `
   className="source-meta source-line-issues source-line-with-issues"
   data-line-number={3}
 >
-  <ButtonPlain
-    aria-label="source_viewer.issues_on_line.show"
-    onClick={[MockFunction]}
+  <Tooltip
+    overlay="source_viewer.issues_on_line.multiple_issues.source_viewer.issues_on_line.show"
   >
-    <Tooltip
-      overlay="source_viewer.issues_on_line.multiple_issues"
+    <ButtonPlain
+      aria-label="source_viewer.issues_on_line.multiple_issues.source_viewer.issues_on_line.show"
+      onClick={[MockFunction]}
     >
       <IssueIcon
         type="BUG"
       />
-    </Tooltip>
-    <span
-      className="source-line-issues-counter"
-    >
-      2
-    </span>
-  </ButtonPlain>
+      <span
+        className="source-line-issues-counter"
+      >
+        2
+      </span>
+    </ButtonPlain>
+  </Tooltip>
 </td>
 `;
 
@@ -30,23 +30,23 @@ exports[`should render correctly: multiple issues, same type 1`] = `
   className="source-meta source-line-issues source-line-with-issues"
   data-line-number={3}
 >
-  <ButtonPlain
-    aria-label="source_viewer.issues_on_line.show"
-    onClick={[MockFunction]}
+  <Tooltip
+    overlay="source_viewer.issues_on_line.X_issues_of_type_Y.source_viewer.issues_on_line.show.2.issue.type.VULNERABILITY.plural"
   >
-    <Tooltip
-      overlay="source_viewer.issues_on_line.X_issues_of_type_Y.2.issue.type.VULNERABILITY.plural"
+    <ButtonPlain
+      aria-label="source_viewer.issues_on_line.X_issues_of_type_Y.source_viewer.issues_on_line.show.2.issue.type.VULNERABILITY.plural"
+      onClick={[MockFunction]}
     >
       <IssueIcon
         type="VULNERABILITY"
       />
-    </Tooltip>
-    <span
-      className="source-line-issues-counter"
-    >
-      2
-    </span>
-  </ButtonPlain>
+      <span
+        className="source-line-issues-counter"
+      >
+        2
+      </span>
+    </ButtonPlain>
+  </Tooltip>
 </td>
 `;
 
@@ -62,17 +62,17 @@ exports[`should render correctly: single issue 1`] = `
   className="source-meta source-line-issues source-line-with-issues"
   data-line-number={3}
 >
-  <ButtonPlain
-    aria-label="source_viewer.issues_on_line.show"
-    onClick={[MockFunction]}
+  <Tooltip
+    overlay="source_viewer.issues_on_line.issue_of_type_X.source_viewer.issues_on_line.show.issue.type.VULNERABILITY"
   >
-    <Tooltip
-      overlay="source_viewer.issues_on_line.issue_of_type_X.issue.type.VULNERABILITY"
+    <ButtonPlain
+      aria-label="source_viewer.issues_on_line.issue_of_type_X.source_viewer.issues_on_line.show.issue.type.VULNERABILITY"
+      onClick={[MockFunction]}
     >
       <IssueIcon
         type="VULNERABILITY"
       />
-    </Tooltip>
-  </ButtonPlain>
+    </ButtonPlain>
+  </Tooltip>
 </td>
 `;

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

@@ -2904,11 +2904,11 @@ source_viewer.tooltip.no_information_about_tests=There is no extra information a
 source_viewer.tooltip.scm.commited_on=Committed on
 source_viewer.tooltip.scm.revision=Revision
 
-source_viewer.issues_on_line.multiple_issues=There are multiple issues on this line.
-source_viewer.issues_on_line.issue_of_type_X=There is a {0} on this line
-source_viewer.issues_on_line.X_issues_of_type_Y=There are {0} {1} on this line
-source_viewer.issues_on_line.show=Click to show all issues on this line
-source_viewer.issues_on_line.hide=Click to hide all issues on this line
+source_viewer.issues_on_line.multiple_issues={0} multiple issues on this line.
+source_viewer.issues_on_line.issue_of_type_X={0} {1} on this line
+source_viewer.issues_on_line.X_issues_of_type_Y={0} {1} {2} on this line
+source_viewer.issues_on_line.show=Show
+source_viewer.issues_on_line.hide=Hide
 
 source_viewer.load_more_code=Load More Code
 source_viewer.loading_more_code=Loading More Code...