SONAR-16829 Accessible name not same order as visible label

diff --git a/server/sonar-web/src/main/js/components/controls/Checkbox.tsx b/server/sonar-web/src/main/js/components/controls/Checkbox.tsx
index e1a9af7ba581836be5d4bd36a59f8311db06b9f0..69fb1518e032f0e5088641f7ffb48b92d27ba7df 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/Checkbox.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Checkbox.tsx
@@ -31,6 +31,7 @@ interface Props {
   children?: React.ReactNode;
   className?: string;
   id?: string;
+  label?: string;
   loading?: boolean;
   onCheck: (checked: boolean, id?: string) => void;
   right?: boolean;
@@ -52,7 +53,17 @@ export default class Checkbox extends React.PureComponent<Props> {
   };
 
   render() {
-    const { checked, children, disabled, id, loading, right, thirdState, title } = this.props;
+    const {
+      checked,
+      children,
+      disabled,
+      id,
+      label,
+      loading,
+      right,
+      thirdState,
+      title
+    } = this.props;
     const className = classNames('icon-checkbox', {
       'icon-checkbox-checked': checked,
       'icon-checkbox-single': thirdState,
@@ -63,6 +74,7 @@ export default class Checkbox extends React.PureComponent<Props> {
       return (
         <a
           aria-checked={checked}
+          aria-label={label}
           className={classNames('link-checkbox', this.props.className, {
             disabled
           })}
@@ -87,6 +99,7 @@ export default class Checkbox extends React.PureComponent<Props> {
     return (
       <a
         aria-checked={checked}
+        aria-label={label}
         className={classNames(className, this.props.className)}
         href="#"
         id={id}

diff --git a/server/sonar-web/src/main/js/components/issue/IssueView.tsx b/server/sonar-web/src/main/js/components/issue/IssueView.tsx
index c5b9aa303b3dc7dffe2bd3231364178c09e1f450..b01c9e69c4ff09b3ad8bd029c8449019467f17b4 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/IssueView.tsx
+++ b/server/sonar-web/src/main/js/components/issue/IssueView.tsx
@@ -21,7 +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 { translate, translateWithParameters } from '../../helpers/l10n';
 import { BranchLike } from '../../types/branch-like';
 import { Issue } from '../../types/types';
 import { updateIssue } from './actions';
@@ -94,6 +94,15 @@ export default class IssueView extends React.PureComponent<Props> {
         onClick={this.handleClick}
         role="region"
         aria-label={issue.message}>
+        {hasCheckbox && (
+          <Checkbox
+            checked={checked || false}
+            className="issue-checkbox-container"
+            onCheck={this.handleCheck}
+            label={translateWithParameters('issues.action_select.label', issue.message)}
+            title={translate('issues.action_select')}
+          />
+        )}
         <IssueTitleBar
           branchLike={branchLike}
           currentPopup={currentPopup}
@@ -124,14 +133,6 @@ export default class IssueView extends React.PureComponent<Props> {
             ))}
           </div>
         )}
-        {hasCheckbox && (
-          <Checkbox
-            checked={checked || false}
-            className="issue-checkbox-container"
-            onCheck={this.handleCheck}
-            title={translate('issues.action_select')}
-          />
-        )}
       </div>
     );
   }

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index cc279036b393e4e3c1ee74a7ec6b77560e12b863..304b0f418e807af3217f59e354e5b4459f50003a 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -868,6 +868,7 @@ issue.transition.resetastoreview.description=The Security Hotspot should be anal
 issue.tabs.code=Where is the issue?
 
 issues.action_select=Select issue
+issues.action_select.label=Select issue {0}
 issue.set_severity=Change Severity
 issue.set_type=Change Type