SONAR-11619 Remove label[for] styling and fix some input ids

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

@@ -189,10 +189,6 @@ em.mandatory {
   font-style: italic;
 }
 
-label[for] {
-  cursor: pointer;
-}
-
 .form-field {
   clear: both;
   display: block;

server/sonar-web/src/main/js/apps/create/components/OrganizationAvatarInput.tsx

@@ -97,7 +97,7 @@ export default class OrganizationAvatarInput extends React.PureComponent<Props,
               'is-invalid': isInvalid,
               'is-valid': isValid
             })}
-            id="organization-display-name"
+            id="organization-avatar"
             onBlur={this.handleBlur}
             onChange={this.handleChange}
             onFocus={this.handleFocus}

server/sonar-web/src/main/js/apps/create/components/OrganizationDescriptionInput.tsx

@@ -72,7 +72,7 @@ export default class OrganizationDescriptionInput extends React.PureComponent<Pr
     return (
       <ValidationInput
         error={this.state.error}
-        id="organization-display-name"
+        id="organization-description"
         isInvalid={isInvalid}
         isValid={isValid}
         label={translate('onboarding.create_organization.description')}>

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

@@ -19,7 +19,7 @@ exports[`should display the fallback avatar when there is no url 1`] = `
   />
   <input
     className="input-super-large text-middle"
-    id="organization-display-name"
+    id="organization-avatar"
     onBlur={[Function]}
     onChange={[Function]}
     onFocus={[Function]}
@@ -49,7 +49,7 @@ exports[`should render correctly 1`] = `
   />
   <input
     className="input-super-large text-middle"
-    id="organization-display-name"
+    id="organization-avatar"
     onBlur={[Function]}
     onChange={[Function]}
     onFocus={[Function]}

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

@@ -2,7 +2,7 @@
 
 exports[`should render correctly 1`] = `
 <ValidationInput
-  id="organization-display-name"
+  id="organization-description"
   isInvalid={false}
   isValid={false}
   label="onboarding.create_organization.description"

server/sonar-web/src/main/js/apps/create/project/OrganizationInput.tsx

@@ -47,8 +47,10 @@ export class OrganizationInput extends React.PureComponent<Props & WithRouterPro
     return (
       <div className="form-field spacer-bottom">
         <label htmlFor="select-organization">
-          {translate('onboarding.create_project.organization')}
-          <em className="mandatory">*</em>
+          <span className="text-middle">
+            <strong>{translate('onboarding.create_project.organization')}</strong>
+            <em className="mandatory">*</em>
+          </span>
         </label>
         <OrganizationSelect
           hideIcons={!autoImport}

server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/OrganizationInput-test.tsx.snap

@@ -7,12 +7,18 @@ exports[`should render correctly 1`] = `
   <label
     htmlFor="select-organization"
   >
-    onboarding.create_project.organization
-    <em
-      className="mandatory"
+    <span
+      className="text-middle"
     >
-      *
-    </em>
+      <strong>
+        onboarding.create_project.organization
+      </strong>
+      <em
+        className="mandatory"
+      >
+        *
+      </em>
+    </span>
   </label>
   <OrganizationSelect
     hideIcons={true}

server/sonar-web/src/main/js/apps/custom-measures/components/Form.tsx

@@ -123,6 +123,7 @@ export default class Form extends React.PureComponent<Props, State> {
           <Select
             autoFocus={true}
             clearable={false}
+            id="create-custom-measure-metric"
             onChange={this.handleMetricSelect}
             options={options}
             value={this.state.metricKey}

server/sonar-web/src/main/js/apps/custom-measures/components/__tests__/__snapshots__/Form-test.tsx.snap

@@ -135,6 +135,7 @@ exports[`should render form 2`] = `
         <Select
           autoFocus={true}
           clearable={false}
+          id="create-custom-measure-metric"
           onChange={[Function]}
           options={
             Array [

server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx

@@ -149,6 +149,7 @@ export default class Form extends React.PureComponent<Props, State> {
               <div className="modal-field">
                 <label htmlFor="create-metric-domain">{translate('custom_metrics.domain')}</label>
                 <Creatable
+                  id="create-metric-domain"
                   onChange={this.handleDomainChange}
                   options={domains.map(domain => ({ label: domain, value: domain }))}
                   value={this.state.domain}
@@ -161,6 +162,7 @@ export default class Form extends React.PureComponent<Props, State> {
                 </label>
                 <Select
                   clearable={false}
+                  id="create-metric-type"
                   onChange={this.handleTypeChange}
                   options={this.props.types.map(type => ({
                     label: translate('metric.type', type),

server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap

@@ -89,6 +89,7 @@ exports[`should render form 1`] = `
           custom_metrics.domain
         </label>
         <Creatable
+          id="create-metric-domain"
           onChange={[Function]}
           options={
             Array [
@@ -119,6 +120,7 @@ exports[`should render form 1`] = `
         </label>
         <Select
           clearable={false}
+          id="create-metric-type"
           onChange={[Function]}
           options={
             Array [

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

@@ -270,8 +270,12 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
     </div>
   );
 
-  renderCheckbox = (field: keyof FormFields) => (
-    <Checkbox checked={this.state[field] !== undefined} onCheck={this.handleFieldCheck(field)} />
+  renderCheckbox = (field: keyof FormFields, id?: string) => (
+    <Checkbox
+      checked={this.state[field] !== undefined}
+      id={id}
+      onCheck={this.handleFieldCheck(field)}
+    />
   );
 
   renderAffected = (affected: number) => (
@@ -485,7 +489,7 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
   renderNotificationsField = () => (
     <div className="modal-field">
       <label htmlFor="send-notifications">{translate('issue.send_notifications')}</label>
-      {this.renderCheckbox('notifications')}
+      {this.renderCheckbox('notifications', 'send-notifications')}
     </div>
   );
 

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

@@ -75,6 +75,7 @@ exports[`should display form when issues are present 1`] = `
         </label>
         <Checkbox
           checked={false}
+          id="send-notifications"
           onCheck={[Function]}
           thirdState={false}
         />

server/sonar-web/src/main/js/apps/permissions/project/components/ApplyTemplate.tsx

@@ -121,6 +121,7 @@ export default class ApplyTemplate extends React.PureComponent<Props, State> {
                       {this.state.permissionTemplates && (
                         <Select
                           clearable={false}
+                          id="project-permissions-template"
                           onChange={this.handlePermissionTemplateChange}
                           options={this.state.permissionTemplates.map(permissionTemplate => ({
                             label: permissionTemplate.name,

server/sonar-web/src/main/js/apps/quality-gates/components/ConditionModal.tsx

@@ -110,7 +110,7 @@ export default class ConditionModal extends React.PureComponent<Props, State> {
         onConfirm={this.handleFormSubmit}>
         {this.state.errorMessage && <Alert variant="error">{this.state.errorMessage}</Alert>}
         <div className="modal-field">
-          <label htmlFor="create-user-login">{translate('quality_gates.conditions.metric')}</label>
+          <label htmlFor="condition-metric">{translate('quality_gates.conditions.metric')}</label>
           {metrics && <MetricSelect metrics={metrics} onMetricChange={this.handleMetricChange} />}
           {this.props.metric && (
             <span className="note">{getLocalizedMetricName(this.props.metric)}</span>
@@ -119,7 +119,9 @@ export default class ConditionModal extends React.PureComponent<Props, State> {
         {metric && (
           <>
             <div className="modal-field">
-              <label>{translate('quality_gates.conditions.operator')}</label>
+              <label htmlFor="condition-operator">
+                {translate('quality_gates.conditions.operator')}
+              </label>
               <ConditionOperator
                 metric={metric}
                 onOperatorChange={this.handleOperatorChange}
@@ -127,7 +129,9 @@ export default class ConditionModal extends React.PureComponent<Props, State> {
               />
             </div>
             <div className="modal-field">
-              <label>{translate('quality_gates.conditions.error')}</label>
+              <label htmlFor="condition-threshold">
+                {translate('quality_gates.conditions.error')}
+              </label>
               <ThresholdInput
                 metric={metric}
                 name="error"

server/sonar-web/src/main/js/apps/quality-gates/components/ConditionOperator.tsx

@@ -53,6 +53,7 @@ export default class ConditionOperator extends React.PureComponent<Props> {
           autoFocus={true}
           className="input-medium"
           clearable={false}
+          id="condition-operator"
           name="operator"
           onChange={this.handleChange}
           options={operatorOptions}

server/sonar-web/src/main/js/apps/quality-gates/components/MetricSelect.tsx

@@ -75,6 +75,7 @@ export default class MetricSelect extends React.PureComponent<Props, State> {
     return (
       <Select
         className="text-middle input-large"
+        id="condition-metric"
         onChange={this.handleChange}
         options={optionsWithDomains}
         placeholder={translate('search.search_for_metrics')}

server/sonar-web/src/main/js/apps/quality-gates/components/ThresholdInput.tsx

@@ -54,6 +54,7 @@ export default class ThresholdInput extends React.PureComponent<Props> {
       <Select
         className="input-tiny text-middle"
         clearable={true}
+        id="condition-threshold"
         name={name}
         onChange={this.handleSelectChange}
         options={options}
@@ -75,6 +76,7 @@ export default class ThresholdInput extends React.PureComponent<Props> {
       <input
         className="input-tiny text-middle"
         data-type={metric.type}
+        id="condition-threshold"
         name={name}
         onChange={this.handleChange}
         type="text"

server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeParentForm.tsx

@@ -107,6 +107,7 @@ export default class ChangeParentForm extends React.PureComponent<Props, State>
               </label>
               <Select
                 clearable={false}
+                id="change-profile-parent"
                 name="parentKey"
                 onChange={this.handleSelectChange}
                 options={options}

server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx

@@ -142,6 +142,7 @@ export default class CreateProfileForm extends React.PureComponent<Props, State>
                 </label>
                 <Select
                   clearable={false}
+                  id="create-profile-language"
                   name="language"
                   onChange={this.handleLanguageChange}
                   options={languages.map(language => ({

server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx

@@ -150,7 +150,7 @@ class EmailForm extends React.PureComponent<Props, State> {
             <textarea
               className="settings-large-input"
               disabled={this.state.loading}
-              id="test-email-title"
+              id="test-email-message"
               onChange={this.onMessageChange}
               required={true}
               rows={5}