From 201fd2cbbf4de4d4af327213fccb85ee6d8a48d6 Mon Sep 17 00:00:00 2001
From: Kirill Shumilov <brusher.designer@gmail.com>
Date: Mon, 16 Jan 2017 22:07:33 +0300
Subject: [PATCH] refactor(xod-client): enable and fix
 `jsx-a11y/no-static-element-interactions` and improve SnackBarMessage styles

---
 .eslintrc.js                                  |  1 -
 .../styles/components/SnackBarMessage.scss    | 29 +++++++++++++------
 .../messages/components/SnackBarMessage.jsx   | 18 ++++++++++--
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index aafa9b63..2f336633 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -51,7 +51,6 @@ module.exports = {
       ]
     }],
 
-    'jsx-a11y/no-static-element-interactions' : 'off', // TODO: enable and fix
     'react/forbid-prop-types' : 'off' // TODO: enable and make custom propTypes
   },
 };
diff --git a/packages/xod-client/src/core/styles/components/SnackBarMessage.scss b/packages/xod-client/src/core/styles/components/SnackBarMessage.scss
index f199d55d..6b12d39c 100644
--- a/packages/xod-client/src/core/styles/components/SnackBarMessage.scss
+++ b/packages/xod-client/src/core/styles/components/SnackBarMessage.scss
@@ -1,11 +1,7 @@
 .SnackBarMessage {
   position: relative;
-  display: block;
+  display: none;
   margin-top: 1px;
-  padding: 8px 16px;
-  color: #fff;
-  background: #666;
-  border-bottom: 1px solid #400;
   transition: all 0.3s ease-in;
   left: 0;
 
@@ -13,15 +9,30 @@
     left: $snackbar-width;
   }
 
+  &.display {
+    display: block;
+  }
+
   &.error {
-    background: #600;
+    a { background-color: #600; }
   }
 
   &.confirmation {
-    background: #060;
+    a { background-color: #060; }
   }
 
   &.notification {
-    background: #006;
+    a { background-color: #006; }
   }
-}
\ No newline at end of file
+
+  a {
+    display: block;
+    padding: 8px 16px;
+    color: #fff;
+    background-color: #666;
+    box-shadow: inset 0 -1px rgba(0,0,0,.25);
+
+    cursor: default;
+    outline: none;
+  }
+}
diff --git a/packages/xod-client/src/messages/components/SnackBarMessage.jsx b/packages/xod-client/src/messages/components/SnackBarMessage.jsx
index 3227fcef..c2fc5aea 100644
--- a/packages/xod-client/src/messages/components/SnackBarMessage.jsx
+++ b/packages/xod-client/src/messages/components/SnackBarMessage.jsx
@@ -11,6 +11,7 @@ class SnackBarMessage extends React.Component {
 
     this.state = {
       hidden: true,
+      display: true,
     };
 
     this.hide = this.hide.bind(this);
@@ -55,10 +56,18 @@ class SnackBarMessage extends React.Component {
     );
   }
 
+  setDisplay(val) {
+    this.setState(
+      R.assoc('display', val, this.state)
+    );
+  }
+
   hide() {
     return new Promise((resolve) => {
       this.setHidden(true);
       setTimeout(resolve, ANIMATION_TIMEOUT);
+    }).then(() => {
+      this.setDisplay(false);
     });
   }
 
@@ -66,6 +75,7 @@ class SnackBarMessage extends React.Component {
     const message = this.props.message;
     const cls = classNames('SnackBarMessage', {
       hidden: this.state.hidden,
+      display: this.state.display,
       error: message.type === MESSAGE_TYPE.ERROR,
       confirmation: message.type === MESSAGE_TYPE.CONFIRMATION,
       notification: message.type === MESSAGE_TYPE.NOTIFICATION,
@@ -75,10 +85,14 @@ class SnackBarMessage extends React.Component {
     return (
       <li
         className={cls}
-        onClick={this.onClick}
         dataId={message.id}
       >
-        {messageContent}
+        <a
+          tabIndex={message.id}
+          onClick={this.onClick}
+        >
+          {messageContent}
+        </a>
       </li>
     );
   }