refactor(xod-client): enable and fix jsx-a11y/no-static-element-interactions and improve SnackBarMessage styles

.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
   },
 };

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; }
   }
-}
+
+  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;
+  }
+}

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>
     );
   }