Make TextInput label real, add aria-label to icon buttons

client/css/style.css

@@ -180,7 +180,7 @@ i[class*=' icon-']:before {
   padding: 25px 15px 10px;
 }
 
-.textinput span {
+.textinput-label {
   position: absolute;
   top: 0;
   left: 0;
@@ -441,13 +441,17 @@ input::-webkit-inner-spin-button {
 .connect-form-address label {
   margin-top: 5px;
   font: 12px 'Montserrat', sans-serif;
-  padding: 10px;
+  padding: 10px 0;
   padding-bottom: 0;
   text-align: center;
   background: #fff;
   color: #777;
 }
 
+.connect-form-ssl {
+  padding: 10px !important;
+}
+
 .connect-form-button-optionals {
   font-size: 24px;
   color: #999;

client/js/components/TabList.js

@@ -114,9 +114,17 @@ export default class TabList extends PureComponent {
       <div className={className}>
         <div className="tab-container">{tabs}</div>
         <div className="side-buttons">
-          <Button icon={FiPlus} onClick={this.handleConnectClick} />
-          <Button icon={FiUser} />
-          <Button icon={FiSettings} onClick={this.handleSettingsClick} />
+          <Button
+            icon={FiPlus}
+            aria-label="Connect"
+            onClick={this.handleConnectClick}
+          />
+          <Button icon={FiUser} aria-label="User" />
+          <Button
+            icon={FiSettings}
+            aria-label="Settings"
+            onClick={this.handleSettingsClick}
+          />
         </div>
       </div>
     );

client/js/components/pages/Chat/ChatTitle.js

@@ -58,12 +58,23 @@ const ChatTitle = ({
           {serverError}
         </div>
         {tab.name && (
-          <Button icon={FiSearch} title="Search" onClick={onToggleSearch} />
+          <Button
+            icon={FiSearch}
+            title="Search"
+            aria-label="Search"
+            onClick={onToggleSearch}
+          />
         )}
-        <Button icon={FiX} title={closeTitle} onClick={onCloseClick} />
+        <Button
+          icon={FiX}
+          title={closeTitle}
+          aria-label={closeTitle}
+          onClick={onCloseClick}
+        />
         <Button
           icon={FiUsers}
           className="button-userlist"
+          aria-label="Users"
           onClick={onToggleUserList}
         />
       </div>

client/js/components/pages/Connect.js

@@ -108,6 +108,7 @@ class Connect extends Component {
               noError
             />
             <Checkbox
+              classNameLabel="connect-form-ssl"
               name="tls"
               label="SSL"
               topLabel
@@ -122,6 +123,7 @@ class Connect extends Component {
           <Button
             className="connect-form-button-optionals"
             icon={FiMoreHorizontal}
+            aria-label="Show more"
             onClick={this.handleShowClick}
           />
           <Button type="submit">Connect</Button>

client/js/components/ui/Checkbox.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import classnames from 'classnames';
 
-const Checkbox = ({ name, label, topLabel, ...props }) => (
+const Checkbox = ({ name, label, topLabel, classNameLabel, ...props }) => (
   <label
-    className={classnames('checkbox', {
+    className={classnames('checkbox', classNameLabel, {
       'top-label': topLabel
     })}
     htmlFor={name}

client/js/components/ui/TextInput.js

@@ -58,6 +58,7 @@ export default class TextInput extends PureComponent {
                 className={field.value && 'value'}
                 type="text"
                 name={name}
+                id={name}
                 autoCapitalize="off"
                 autoCorrect="off"
                 autoComplete="off"
@@ -100,16 +101,17 @@ export default class TextInput extends PureComponent {
                   }
                 }}
               />
-              <span
-                className={classnames('textinput-1', {
+              <label
+                htmlFor={name}
+                className={classnames('textinput-label', 'textinput-1', {
                   value: field.value,
                   error: form.touched[name] && form.errors[name]
                 })}
               >
                 {label}
-              </span>
+              </label>
               <span
-                className={classnames('textinput-2', {
+                className={classnames('textinput-label', 'textinput-2', {
                   value: field.value,
                   error: form.touched[name] && form.errors[name]
                 })}