Ansarmie/v3/accessibility labels roles tootips (#973)

* Fix several Accessibility bugs including Tooltip behavior and Non present labels and roles

* Fix every name, Focus Tooltip and Role

* Fix Selenium IDE Controls title overlapping the controls in small screen sizes

* Fix linting errors

* Fix Google link test

* Undo unnecessary change from js to jsx

* Minor Lint error

Author: ansarmie

package.json

@@ -63,5 +63,6 @@
     "stylelint-prettier": "^1.0.3",
     "putasset": "^4.3.2",
     "grizzly": "^4.0.1"
-  }
+  },
+  "dependencies": {}
 }

packages/selenium-ide/src/neo/components/ActionButtons/ActionButton/index.jsx

@@ -21,25 +21,32 @@ import classNames from 'classnames'
 import './style.css'
 
 export default class ActionButton extends React.Component {
+  static defaultProps = {
+    'aria-label': '',
+  }
   render() {
     const props = { ...this.props }
 
     delete props.isActive
     return (
       <button
         type="button"
+        data-event="focus mouseenter"
+        data-event-off="blur mouseleave"
         {...props}
         className={classNames(
           'btn-action',
           { active: this.props.isActive },
           this.props.className
         )}
+        aria-label={props['aria-label']}
       />
     )
   }
 
   static propTypes = {
     className: PropTypes.string.isRequired,
     isActive: PropTypes.bool,
+    'aria-label': PropTypes.string,
   }
 }

packages/selenium-ide/src/neo/components/ActionButtons/Add/index.jsx

@@ -16,10 +16,14 @@
 // under the License.
 
 import React from 'react'
+import PropTypes from 'prop-types'
 import ActionButton from '../ActionButton'
 import classNames from 'classnames'
 
 export default class AddButton extends React.Component {
+  static defaultProps = {
+    'aria-label': 'Add',
+  }
   render() {
     return (
       <ActionButton
@@ -28,4 +32,7 @@ export default class AddButton extends React.Component {
       /> // eslint-disable-line react/prop-types
     )
   }
+  static propTypes = {
+    'aria-label': PropTypes.string,
+  }
 }

packages/selenium-ide/src/neo/components/ActionButtons/Clear/index.jsx

@@ -26,6 +26,7 @@ export default class ClearButton extends React.Component {
         data-tip="<p>Clear log</p>"
         {...this.props}
         className={classNames('si-clear', this.props.className)}
+        aria-label="Clear log"
       /> // eslint-disable-line react/prop-types
     )
   }

packages/selenium-ide/src/neo/components/ActionButtons/DisableBreakpoints/index.jsx

@@ -30,6 +30,7 @@ export default class DisableBreakpointsButton extends React.Component {
         )}</span></p>`}
         {...this.props}
         className={classNames('si-disable-breakpoints', this.props.className)}
+        aria-label="Disable breakpoints"
       /> // eslint-disable-line react/prop-types
     )
   }

packages/selenium-ide/src/neo/components/ActionButtons/New/index.jsx

@@ -31,6 +31,7 @@ export default class NewButton extends React.Component {
         )}</span></p>`}
         {...props}
         className={classNames('si-new-project', this.props.className)}
+        aria-label="Create new project"
       /> // eslint-disable-line react/prop-types
     )
   }

packages/selenium-ide/src/neo/components/ActionButtons/Open/index.jsx

@@ -70,12 +70,28 @@ export class OpenInput extends React.Component {
           }}
           type="file"
           onChange={this.handleChange}
+          onFocus={() => {
+            if (this.label) {
+              this.label.dispatchEvent(new Event('focusexternal'))
+            }
+          }}
+          onBlur={() => {
+            if (this.label) {
+              this.label.dispatchEvent(new Event('blurexternal'))
+            }
+          }}
         />
         <label
+          ref={label => {
+            this.label = label
+          }}
           data-tip={`<p>Open project <span style="color: #929292;padding-left: 5px;">${parse(
             'o',
             { primaryKey: true }
           )}</span></p>`}
+          // We need special events because Focus and Blur are lost before the tooltip is shown
+          data-event="focusexternal mouseenter"
+          data-event-off="blurexternal mouseleave"
           htmlFor={this.id}
           onFocus={() => {
             this.input.focus()

packages/selenium-ide/src/neo/components/ActionButtons/PauseExceptions/index.jsx

@@ -26,6 +26,7 @@ export default class PauseExceptionsButton extends React.Component {
         data-tip="<p>Pause on exceptions</p>"
         {...this.props}
         className={classNames('si-break-exceptions', this.props.className)}
+        aria-label="Pause on exceptions"
       /> // eslint-disable-line react/prop-types
     )
   }

packages/selenium-ide/src/neo/components/ActionButtons/PlayAll/index.jsx

@@ -28,6 +28,7 @@ export default class PlayAllButton extends React.Component {
           'r',
           { primaryKey: true, shiftKey: true }
         )}</span></p>`}
+        aria-label="Run all tests in suite"
         {...this.props}
         className={classNames('si-play-all', this.props.className)}
       /> // eslint-disable-line react/prop-types

packages/selenium-ide/src/neo/components/ActionButtons/Record/index.jsx

@@ -42,12 +42,17 @@ export default class Record extends React.Component {
                 { primaryKey: true }
               )}</span></p>`
         }
+        data-event="focus mouseenter"
+        data-event-off="blur mouseleave"
       >
         <ActionButton
           disabled={this.props.disabled}
           isActive={this.props.isRecording}
           onClick={this.props.onClick}
           className="si-record"
+          aria-label={
+            this.props.isRecording ? 'Stop recording' : 'Start recording'
+          }
         />
       </div>
     )