Bug 1531243 - Fix ESLint rule jsx-a11y/anchor-is-valid

.eslintrc.js

@@ -29,7 +29,6 @@ module.exports = {
     'class-methods-use-this': 'off',
     'consistent-return': 'off',
     'default-case': 'off',
-    'jsx-a11y/anchor-is-valid': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
     'jsx-a11y/label-has-associated-control': 'off',
     'jsx-a11y/label-has-for': 'off',

tests/selenium/pages/treeherder.py

@@ -401,7 +401,7 @@ class Treeherder(Base):
     class Pinboard(Region):
 
         _root_locator = (By.ID, 'pinboard-panel')
-        _clear_all_locator = (By.CSS_SELECTOR, '#pinboard-controls .dropdown-menu li:nth-child(3) a')
+        _clear_all_locator = (By.CSS_SELECTOR, '#pinboard-controls .dropdown-menu li:nth-child(3) button')
         _jobs_locator = (By.CLASS_NAME, 'pinned-job')
         _save_menu_locator = (By.CSS_SELECTOR, '#pinboard-controls .save-btn-dropdown')
 

ui/css/treeherder.css

@@ -14,6 +14,10 @@
   height: 100%;
 }
 
+.dropdown-item.disabled {
+  cursor: not-allowed;
+  font-style: italic;
+}
 /*
  * Resizer between PushList and DetailsPanel
  */

ui/job-view/details/PinBoard.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, Input, FormFeedback } from 'reactstrap';
+import { Button, FormGroup, Input, FormFeedback } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlusSquare, faTimes } from '@fortawesome/free-solid-svg-icons';
 
@@ -553,19 +553,19 @@ class PinBoard extends React.Component {
             title={this.hasPinnedJobs() ? '' : 'No pinned jobs'}
           >
             <div className="btn-group save-btn-group dropdown">
-              <button
+              <Button
                 className={`btn btn-light-bordered btn-xs save-btn ${
                   !isLoggedIn || !this.canSaveClassifications()
                     ? 'disabled'
                     : ''
                 }`}
-                type="button"
+                outline
                 title={this.saveUITitle('classification')}
                 onClick={this.save}
               >
                 save
-              </button>
-              <button
+              </Button>
+              <Button
                 className={`btn btn-light-bordered btn-xs dropdown-toggle save-btn-dropdown ${
                   !this.hasPinnedJobs() && !this.pinboardIsDirty()
                     ? 'disabled'
@@ -576,43 +576,44 @@ class PinBoard extends React.Component {
                     ? 'No pinned jobs'
                     : 'Additional pinboard functions'
                 }
-                type="button"
+                outline
                 data-toggle="dropdown"
               >
                 <span className="caret" />
-              </button>
+              </Button>
               <ul className="dropdown-menu save-btn-dropdown-menu">
                 <li
-                  className={!isLoggedIn ? 'disabled' : ''}
                   title={
                     !isLoggedIn ? 'Not logged in' : 'Repeat the pinned jobs'
                   }
                 >
-                  <a
-                    className="dropdown-item"
+                  <Button
+                    className={`${!isLoggedIn ? 'disabled' : ''} dropdown-item`}
                     onClick={() => !isLoggedIn || this.retriggerAllPinnedJobs()}
                   >
                     Retrigger all
-                  </a>
+                  </Button>
                 </li>
-                <li
-                  className={this.canCancelAllPinnedJobs() ? '' : 'disabled'}
-                  title={this.cancelAllPinnedJobsTitle()}
-                >
-                  <a
-                    className="dropdown-item"
+                <li title={this.cancelAllPinnedJobsTitle()}>
+                  <Button
+                    className={`${
+                      this.canCancelAllPinnedJobs() ? '' : 'disabled'
+                    } dropdown-item`}
                     onClick={() =>
                       this.canCancelAllPinnedJobs() &&
                       this.cancelAllPinnedJobs()
                     }
                   >
                     Cancel all
-                  </a>
+                  </Button>
                 </li>
                 <li>
-                  <a className="dropdown-item" onClick={() => this.unPinAll()}>
+                  <Button
+                    className="dropdown-item"
+                    onClick={() => this.unPinAll()}
+                  >
                     Clear all
-                  </a>
+                  </Button>
                 </li>
               </ul>
             </div>

ui/job-view/details/tabs/autoclassify/ErrorLine.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup } from 'reactstrap';
+import { Button, FormGroup } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faCaretDown,
@@ -684,7 +684,7 @@ class ErrorLine extends React.Component {
                   )}
                 </ul>
                 {this.hasHidden(options) && (
-                  <a
+                  <Button
                     onClick={() =>
                       this.setState(prevState => ({
                         showHidden: !prevState.showHidden,
@@ -693,7 +693,7 @@ class ErrorLine extends React.Component {
                     className="link-style has-hidden"
                   >
                     {!showHidden ? <span>More…</span> : <span>Fewer</span>}
-                  </a>
+                  </Button>
                 )}
                 {canClassify && (
                   <ul className="list-unstyled extra-options">

ui/job-view/details/tabs/autoclassify/LineOption.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, Label, Input } from 'reactstrap';
+import { Button, FormGroup, Label, Input } from 'reactstrap';
 import Select from 'react-select';
 import Highlighter from 'react-highlight-words';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -105,16 +105,15 @@ class LineOption extends React.Component {
             {!!option.bugNumber && (
               <span className="line-option-text">
                 {(!canClassify || selectedJob.id in pinnedJobs) && (
-                  <button
+                  <Button
                     className="btn btn-xs btn-light-bordered"
-                    type="button"
                     onClick={() =>
                       addBug({ id: option.bugNumber }, selectedJob)
                     }
                     title="add to list of bugs to associate with all pinned jobs"
                   >
                     <FontAwesomeIcon icon={faThumbtack} />
-                  </button>
+                  </Button>
                 )}
                 {!!option.bugResolution && (
                   <span className="classification-bug-resolution">
@@ -166,13 +165,13 @@ class LineOption extends React.Component {
                     onManualBugNumberChange(option, evt.target.value)
                   }
                 />
-                <a
+                <Button
                   className="btn btn-xs btn-light-bordered btn-file-bug"
                   onClick={() => this.fileBug()}
                   title="File a bug for this failure"
                 >
                   <FontAwesomeIcon icon={faBug} />
-                </a>
+                </Button>
                 {option.id === 'manual' && !!option.manualBugNumber && (
                   <a
                     href={getBugUrl(option.manualBugNumber)}

ui/job-view/details/tabs/autoclassify/StaticLineOption.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
 import Highlighter from 'react-highlight-words';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faStar } from '@fortawesome/free-regular-svg-icons';
@@ -45,14 +46,13 @@ function StaticLineOption(props) {
       {!!option.bugNumber && (
         <span className="line-option-text">
           {(!canClassify || selectedJob.id in pinnedJobs) && (
-            <button
+            <Button
               className="btn btn-xs btn-light-bordered"
-              type="button"
               onClick={() => addBug({ id: option.bugNumber }, selectedJob)}
               title="add to list of bugs to associate with all pinned jobs"
             >
               <FontAwesomeIcon icon={faThumbtack} />
-            </button>
+            </Button>
           )}
           {!!option.bugResolution && (
             <span className="classification-bug-resolution">
@@ -107,9 +107,9 @@ function StaticLineOption(props) {
         </span>
       )}
       <div>
-        <a onClick={setEditable} className="link-style">
+        <Button onClick={setEditable} className="link-style">
           Edit…
-        </a>
+        </Button>
       </div>
     </div>
   );