Bug 1531243 - Fix ESLint jsx--a11y/label-has-associated-control

mozilla · Mar 1, 2019 · baa7e5a · baa7e5a
1 parent 616152c
commit baa7e5a
Show file tree

Hide file tree

Showing 13 changed files with 96 additions and 74 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -30,7 +30,6 @@ module.exports = {
     'consistent-return': 'off',
     'default-case': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
-    'jsx-a11y/label-has-associated-control': 'off',
     'jsx-a11y/label-has-for': 'off',
     'jsx-a11y/no-noninteractive-element-interactions': 'off',
     'jsx-a11y/no-static-element-interactions': 'off',

diff --git a/ui/css/treeherder-test-view.css b/ui/css/treeherder-test-view.css
@@ -126,7 +126,7 @@ main .progress {
 }
 
 .toggle-count {
-  cursor: pointer;
+  background: transparent;
 }
 
 [disabled]:hover {

diff --git a/ui/job-view/CustomJobActions.jsx b/ui/job-view/CustomJobActions.jsx
@@ -200,8 +200,11 @@ class CustomJobActions extends React.PureComponent {
           {!!actions && (
             <div>
               <div className="form-group">
-                <label>Action</label>
+                {/* This rule does not support the react-select component. */}
+                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                <label htmlFor="action-select">Action</label>
                 <Select
+                  inputId="action-select"
                   aria-describedby="selectedActionHelp"
                   value={selectedActionOption}
                   onChange={this.onChangeAction}
@@ -223,23 +226,31 @@ class CustomJobActions extends React.PureComponent {
                 {!!selectedAction.schema && (
                   <React.Fragment>
                     <div className="col-s-12 col-md-6 form-group">
-                      <label>Payload</label>
-                      <textarea
-                        value={payload}
-                        className="form-control pre"
-                        rows="10"
-                        onChange={evt => this.onChangePayload(evt.target.value)}
-                        spellCheck="false"
-                      />
+                      <label htmlFor="payload-textarea" className="w-100">
+                        Payload
+                        <textarea
+                          id="payload-textarea"
+                          value={payload}
+                          className="form-control pre"
+                          rows="10"
+                          onChange={evt =>
+                            this.onChangePayload(evt.target.value)
+                          }
+                          spellCheck="false"
+                        />
+                      </label>
                     </div>
                     <div className="col-s-12 col-md-6 form-group">
-                      <label>Schema</label>
-                      <textarea
-                        className="form-control pre"
-                        rows="10"
-                        readOnly
-                        value={schema}
-                      />
+                      <label htmlFor="schema-textarea" className="w-100">
+                        Schema
+                        <textarea
+                          id="schema-textarea"
+                          className="form-control pre"
+                          rows="10"
+                          readOnly
+                          value={schema}
+                        />
+                      </label>
                     </div>
                   </React.Fragment>
                 )}

diff --git a/ui/job-view/details/BugFiler.jsx b/ui/job-view/details/BugFiler.jsx
@@ -583,7 +583,7 @@ export class BugFilerClass extends React.Component {
                   ))}
                 </FormGroup>
               </div>
-              <label>Summary:</label>
+              <Label htmlFor="summary">Summary:</Label>
               <div className="d-flex">
                 {!!unhelpfulSummaryReason && (
                   <div>
@@ -667,7 +667,7 @@ export class BugFilerClass extends React.Component {
               )}
               <div className="ml-5 mt-2">
                 <div>
-                  <label>
+                  <Label>
                     <Input
                       type="checkbox"
                       checked={checkedLogLinks.includes(parsedLog)}
@@ -680,10 +680,10 @@ export class BugFilerClass extends React.Component {
                     >
                       Include Parsed Log Link
                     </a>
-                  </label>
+                  </Label>
                 </div>
                 <div>
-                  <label>
+                  <Label>
                     <Input
                       type="checkbox"
                       checked={checkedLogLinks.includes(fullLog)}
@@ -692,11 +692,11 @@ export class BugFilerClass extends React.Component {
                     <a target="_blank" rel="noopener noreferrer" href={fullLog}>
                       Include Full Log Link
                     </a>
-                  </label>
+                  </Label>
                 </div>
                 {!!reftestUrl && (
                   <div>
-                    <label>
+                    <Label>
                       <Input
                         type="checkbox"
                         checked={checkedLogLinks.includes(reftestUrl)}
@@ -709,22 +709,23 @@ export class BugFilerClass extends React.Component {
                       >
                         Include Reftest Viewer Link
                       </a>
-                    </label>
+                    </Label>
                   </div>
                 )}
               </div>
               <div className="d-flex flex-column">
-                <label>Comment:</label>
+                <Label htmlFor="summary-input">Comment:</Label>
                 <Input
                   onChange={evt => this.setState({ comment: evt.target.value })}
                   type="textarea"
+                  id="summary-input"
                   className="flex-grow-1"
                   rows={5}
                 />
               </div>
               <div className="d-inline-flex mt-2 ml-5">
                 <div className="mt-2">
-                  <label>
+                  <Label>
                     <Input
                       onChange={() =>
                         this.setState({ isIntermittent: !isIntermittent })
@@ -733,7 +734,7 @@ export class BugFilerClass extends React.Component {
                       checked={isIntermittent}
                     />
                     This is an intermittent failure
-                  </label>
+                  </Label>
                 </div>
                 <div className="d-inline-flex ml-2">
                   <Input
@@ -790,16 +791,18 @@ export class BugFilerClass extends React.Component {
               </div>
               {!!crashSignatures.length && (
                 <div>
-                  <label>Signature:</label>
-                  <Input
-                    type="textarea"
-                    onChange={evt =>
-                      this.setState({ crashSignatures: evt.target.value })
-                    }
-                    maxLength="2048"
-                    readOnly
-                    value={crashSignatures.join('\n')}
-                  />
+                  <Label>
+                    <Input
+                      type="textarea"
+                      onChange={evt =>
+                        this.setState({ crashSignatures: evt.target.value })
+                      }
+                      maxLength="2048"
+                      readOnly
+                      value={crashSignatures.join('\n')}
+                    />
+                    Signature:
+                  </Label>
                 </div>
               )}
             </form>

diff --git a/ui/job-view/details/summary/StatusPanel.jsx b/ui/job-view/details/summary/StatusPanel.jsx
@@ -11,11 +11,11 @@ function StatusPanel(props) {
   return (
     <li id="result-status-pane" className={`small ${shadingClass}`}>
       <div>
-        <label>Result:</label>
+        <strong>Result:</strong>
         <span> {selectedJob.result}</span>
       </div>
       <div>
-        <label>State:</label>
+        <strong>State:</strong>
         <span> {selectedJob.state}</span>
       </div>
     </li>

diff --git a/ui/job-view/details/tabs/SimilarJobsTab.jsx b/ui/job-view/details/tabs/SimilarJobsTab.jsx
@@ -276,13 +276,13 @@ class SimilarJobsTab extends React.Component {
                   <tr>
                     <th>Classification</th>
                     <td>
-                      <label
+                      <strong
                         className={`badge ${
                           selectedSimilarJob.failure_classification.star
                         }`}
                       >
                         {selectedSimilarJob.failure_classification.name}
-                      </label>
+                      </strong>
                     </td>
                   </tr>
                   {!!selectedSimilarJob.error_lines && (

diff --git a/ui/job-view/headerbars/ActiveFilters.jsx b/ui/job-view/headerbars/ActiveFilters.jsx
@@ -134,15 +134,16 @@ export default class ActiveFilters extends React.Component {
           <div>
             <form className="form-inline">
               <div className="form-group input-group-sm new-filter-input">
-                <label className="sr-only" htmlFor="job-filter-field">
+                <span className="sr-only" id="field-input-label">
                   Field
-                </label>
+                </span>
                 <select
                   id="job-filter-field"
                   className="form-control"
                   value={newFilterField}
                   onChange={evt => this.setNewFilterField(evt.target.value)}
                   placeholder="filter field"
+                  aria-labelledby="field-input-label"
                   required
                 >
                   <option value="" disabled>
@@ -156,29 +157,33 @@ export default class ActiveFilters extends React.Component {
                     ) : null,
                   )}
                 </select>
-                <label className="sr-only" htmlFor="job-filter-value">
-                  Value
-                </label>
                 {newFilterMatchType !== 'choice' && (
-                  <input
-                    className="form-control"
-                    value={newFilterValue}
-                    onChange={evt => this.setNewFilterValue(evt.target.value)}
-                    id="job-filter-value"
-                    type="text"
-                    required
-                    placeholder="enter filter value"
-                  />
+                  <React.Fragment>
+                    <span className="sr-only" id="value-input-label">
+                      Value
+                    </span>
+                    <input
+                      className="form-control"
+                      value={newFilterValue}
+                      onChange={evt => this.setNewFilterValue(evt.target.value)}
+                      id="job-filter-value"
+                      type="text"
+                      required
+                      placeholder="enter filter value"
+                      aria-labelledby="value-input-label"
+                    />
+                  </React.Fragment>
                 )}
-                <label className="sr-only" htmlFor="job-filter-choice-value">
+                <span className="sr-only" id="value-filter-choice-label">
                   Value
-                </label>
+                </span>
                 {newFilterMatchType === 'choice' && (
                   <select
                     className="form-control"
                     value={newFilterValue}
                     onChange={evt => this.setNewFilterValue(evt.target.value)}
                     id="job-filter-choice-value"
+                    aria-labelledby="value-filter-choice-label"
                   >
                     <option value="" disabled>
                       select value

diff --git a/ui/job-view/headerbars/FiltersMenu.jsx b/ui/job-view/headerbars/FiltersMenu.jsx
@@ -56,7 +56,7 @@ function FiltersMenu(props) {
             {resultStatusMenuItems.map(filterName => (
               <span key={filterName}>
                 <span>
-                  <label className="dropdown-item">
+                  <label htmlFor={filterName} className="dropdown-item">
                     <input
                       type="checkbox"
                       className="mousetrap"
@@ -73,7 +73,7 @@ function FiltersMenu(props) {
             ))}
           </li>
           <li className="dropdown-divider separator" />
-          <label className="dropdown-item">
+          <label htmlFor="classified" className="dropdown-item">
             <input
               type="checkbox"
               id="classified"
@@ -82,7 +82,7 @@ function FiltersMenu(props) {
             />
             classified
           </label>
-          <label className="dropdown-item">
+          <label htmlFor="unclassified" className="dropdown-item">
             <input
               type="checkbox"
               id="unclassified"

diff --git a/ui/job-view/headerbars/TiersMenu.jsx b/ui/job-view/headerbars/TiersMenu.jsx
@@ -31,6 +31,7 @@ export default function TiersMenu(props) {
                       : ''
                   }
                   className={`dropdown-item ${isOnlyTier ? 'disabled' : ''}`}
+                  htmlFor="tier-checkbox"
                 >
                   <input
                     id="tier-checkbox"

diff --git a/ui/shared/JobDetails.jsx b/ui/shared/JobDetails.jsx
@@ -24,7 +24,7 @@ export default class JobDetails extends React.PureComponent {
               className="small"
               key={idx} // eslint-disable-line react/no-array-index-key
             >
-              <label>{line.title ? line.title : UNTITLED}:</label>&nbsp;
+              <strong>{line.title ? line.title : UNTITLED}:</strong>&nbsp;
               {/* URL provided */}
               {!!line.url && (
                 <a

diff --git a/ui/shared/JobInfo.jsx b/ui/shared/JobInfo.jsx
@@ -42,7 +42,7 @@ export default class JobInfo extends React.PureComponent {
     return (
       <ul id="job-info" className="list-unstyled">
         <li className="small">
-          <label>Job: </label>
+          <strong>Job: </strong>
           {showJobFilters ? (
             <React.Fragment>
               <a
@@ -65,8 +65,9 @@ export default class JobInfo extends React.PureComponent {
         </li>
         {job.taskcluster_metadata && (
           <li className="small">
-            <label>Task: </label>
+            <strong>Task: </strong>
             <a
+              id="taskInfo"
               href={getInspectTaskUrl(job.taskcluster_metadata.task_id)}
               target="_blank"
               rel="noopener noreferrer"
@@ -76,18 +77,18 @@ export default class JobInfo extends React.PureComponent {
           </li>
         )}
         <li className="small">
-          <label>Build: </label>
+          <strong>Build: </strong>
           <span>{`${job.build_architecture} ${
             job.build_platform
           } ${job.build_os || ''}`}</span>
         </li>
         <li className="small">
-          <label>Job name: </label>
+          <strong>Job name: </strong>
           <span>{job.job_type_name}</span>
         </li>
         {[...timeFields, ...extraFields].map(field => (
           <li className="small" key={`${field.title}${field.value}`}>
-            <label>{field.title}: </label>
+            <strong>{field.title}: </strong>
             {field.url ? (
               <a
                 title={field.value}