From a07e5dd70a4800c56d7983e7935a84a833557cf8 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Tue, 17 Oct 2017 17:30:42 +0200
Subject: [PATCH] Small DOM semantic replacements.

---
 client/.eslintrc                                 |  3 +--
 .../node-details/node-details-table-headers.js   | 16 ++++++++--------
 client/app/scripts/components/search.js          |  4 ++--
 client/app/styles/_base.scss                     |  8 ++++++--
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/client/.eslintrc b/client/.eslintrc
index 956aef223..37c82e8f7 100644
--- a/client/.eslintrc
+++ b/client/.eslintrc
@@ -38,9 +38,8 @@
     "react/prop-types": 0,
 
     "jsx-a11y/click-events-have-key-events": 0,
-    "jsx-a11y/label-has-for": 0,
+
     "jsx-a11y/mouse-events-have-key-events": 0,
-    "jsx-a11y/no-noninteractive-element-interactions": 0,
     "no-multi-spaces": 0,
     "no-restricted-globals": 0,
     "object-curly-newline": 0,
diff --git a/client/app/scripts/components/node-details/node-details-table-headers.js b/client/app/scripts/components/node-details/node-details-table-headers.js
index 9d72a2ce4..050ae188f 100644
--- a/client/app/scripts/components/node-details/node-details-table-headers.js
+++ b/client/app/scripts/components/node-details/node-details-table-headers.js
@@ -38,14 +38,14 @@ export default class NodeDetailsTableHeaders extends React.Component {
             NODE_DETAILS_TABLE_XS_LABEL[header.id] : header.label;
 
           return (
-            <td
-              className={headerClasses.join(' ')} style={style} onClick={onClick}
-              title={header.label} key={header.id}>
-              {isSortedAsc
-                && <span className="node-details-table-header-sorter fa fa-caret-up" />}
-              {isSortedDesc
-                && <span className="node-details-table-header-sorter fa fa-caret-down" />}
-              {label}
+            <td className={headerClasses.join(' ')} style={style} title={header.label} key={header.id}>
+              <div className="node-details-table-header-sortable" onClick={onClick}>
+                {isSortedAsc
+                  && <span className="node-details-table-header-sorter fa fa-caret-up" />}
+                {isSortedDesc
+                  && <span className="node-details-table-header-sorter fa fa-caret-down" />}
+                {label}
+              </div>
             </td>
           );
         })}
diff --git a/client/app/scripts/components/search.js b/client/app/scripts/components/search.js
index d46468055..9641473c6 100644
--- a/client/app/scripts/components/search.js
+++ b/client/app/scripts/components/search.js
@@ -159,9 +159,9 @@ class Search extends React.Component {
           </div>
           <div className="search-label">
             <i className="fa fa-search search-label-icon" />
-            <label className="search-label-hint" htmlFor={inputId}>
+            <span className="search-label-hint" htmlFor={inputId}>
               Search
-            </label>
+            </span>
           </div>
           {!showPinnedSearches && <div className="search-hint">
             {getHint(nodes)} <span
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index dd13c7992..e59252ead 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -1019,8 +1019,12 @@ a {
       color: $text-tertiary-color;
       font-size: 90%;
       text-align: right;
-      cursor: pointer;
-      padding: 0 4px;
+      padding: 0;
+
+      .node-details-table-header-sortable {
+        padding: 3px 2px;
+        cursor: pointer;
+      }
 
       &-sorted {
         color: $text-secondary-color;