Converted some links into buttons.

client/.eslintrc

@@ -37,7 +37,6 @@
     "react/sort-comp": 0,
     "react/prop-types": 0,
 
-    "jsx-a11y/anchor-is-valid": 0,
     "jsx-a11y/click-events-have-key-events": 0,
     "jsx-a11y/label-has-for": 0,
     "jsx-a11y/mouse-events-have-key-events": 0,

client/app/scripts/components/footer.js

@@ -65,25 +65,25 @@ class Footer extends React.Component {
         </div>
 
         <div className="footer-tools">
-          <a
+          <button
             className="footer-icon"
             onClick={this.handleRelayoutClick}
             title={forceRelayoutTitle}>
             <span className="fa fa-refresh" />
-          </a>
-          <a onClick={this.handleContrastClick} className="footer-icon" title={otherContrastModeTitle}>
+          </button>
+          <button onClick={this.handleContrastClick} className="footer-icon" title={otherContrastModeTitle}>
             <span className="fa fa-adjust" />
-          </a>
-          <a
+          </button>
+          <button
             onClick={this.props.toggleTroubleshootingMenu}
             className="footer-icon" title="Open troubleshooting menu"
             href=""
           >
             <span className="fa fa-bug" />
-          </a>
-          <a className="footer-icon" onClick={this.props.toggleHelp} title="Show help">
+          </button>
+          <button className="footer-icon" onClick={this.props.toggleHelp} title="Show help">
             <span className="fa fa-question" />
-          </a>
+          </button>
         </div>
 
       </div>

client/app/scripts/components/node-details/node-details-image-status.js

@@ -90,11 +90,11 @@ class NodeDetailsImageStatus extends React.PureComponent {
           Container Image Status
           {containers &&
             <div>
-              <a
+              <button
                 onClick={this.handleServiceClick}
                 className="node-details-table-node-link">
                   View in Deploy
-              </a>
+              </button>
             </div>
           }
 

client/app/scripts/components/time-travel-component.js

@@ -145,7 +145,7 @@ const DisabledRange = styled.rect`
   fill-opacity: 0.15;
 `;
 
-const TimestampLabel = styled.a`
+const TimestampLabel = styled.button`
   margin-left: 2px;
   padding: 3px;
 
@@ -155,7 +155,7 @@ const TimestampLabel = styled.a`
   }
 `;
 
-const TimelinePanButton = styled.a`
+const TimelinePanButton = styled.button`
   pointer-events: all;
   padding: 2px;
 `;
@@ -236,7 +236,9 @@ export default class TimeTravelComponent extends React.Component {
 
     this.instantUpdateTimestamp = this.instantUpdateTimestamp.bind(this);
     this.debouncedUpdateTimestamp = debounce(
-      this.instantUpdateTimestamp.bind(this), TIMELINE_DEBOUNCE_INTERVAL);
+      this.instantUpdateTimestamp.bind(this),
+      TIMELINE_DEBOUNCE_INTERVAL
+    );
   }
 
   componentDidMount() {

client/app/scripts/components/troubleshooting-menu.js

@@ -42,8 +42,7 @@ class DebugMenu extends React.Component {
               </a>
             </div>
             <div className="troubleshooting-menu-item">
-              <a
-                href=""
+              <button
                 className="footer-icon"
                 onClick={this.props.clickDownloadGraph}
                 title="Save canvas as SVG (does not include search highlighting)"
@@ -52,18 +51,17 @@ class DebugMenu extends React.Component {
                 <span className="description">
                   Save canvas as SVG (does not include search highlighting)
                 </span>
-              </a>
+              </button>
             </div>
             <div className="troubleshooting-menu-item">
-              <a
-                href=""
+              <button
                 className="footer-icon"
                 title="Reset view state"
                 onClick={this.handleClickReset}
               >
                 <span className="fa fa-undo" />
                 <span className="description">Reset your local view state and reload the page</span>
-              </a>
+              </button>
             </div>
             <div className="troubleshooting-menu-item">
               <a

client/app/scripts/components/zoom-control.js

@@ -56,9 +56,13 @@ export default class ZoomControl extends React.Component {
 
     return (
       <div className="zoom-control">
-        <a className="zoom-in" onClick={this.handleZoomIn}><span className="fa fa-plus" /></a>
+        <button className="zoom-in" onClick={this.handleZoomIn}>
+          <span className="fa fa-plus" />
+        </button>
         <Slider value={value} max={1} step={SLIDER_STEP} vertical onChange={this.handleChange} />
-        <a className="zoom-out" onClick={this.handleZoomOut}><span className="fa fa-minus" /></a>
+        <button className="zoom-out" onClick={this.handleZoomOut}>
+          <span className="fa fa-minus" />
+        </button>
       </div>
     );
   }

client/app/styles/_base.scss

@@ -109,16 +109,19 @@ a {
   position: absolute;
   bottom: 11px;
 
-  a {
+  button {
     @extend .btn-opacity;
+    background-color: transparent;
     border: 1px solid transparent;
     border-radius: 4px;
     color: $text-secondary-color;
     cursor: pointer;
+    line-height: 20px;
     padding: 1px 3px;
+    outline: 0;
 
     .fa {
-      font-size: 150%;
+      font-size: 125%;
       position: relative;
       top: 2px;
     }
@@ -1135,6 +1138,14 @@ a {
       }
     }
 
+    .node-details-table-node-link {
+      background-color: transparent;
+      border: 0;
+      cursor: pointer;
+      padding: 0;
+      outline: 0;
+    }
+
     .node-details-table-node-link,
     .node-details-table-node-label,
     .node-details-table-node-value {
@@ -2118,6 +2129,22 @@ a {
     height: 40px;
   }
 
+  button {
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+    padding: 0;
+    outline: 0;
+  }
+
+  button, a {
+    color: $weave-charcoal-blue;
+
+    &:hover {
+      color: $text-color;
+    }
+  }
+
   .fa {
     width: 20px;
     text-align: center;