feat: add tabIndex props for improved keyboard navigation (#87)

Author: clowreed

components/form/button/Button.es6.js

@@ -11,7 +11,7 @@ function Button({ label, badge, primary, danger,
   onClick, className, buttonRef, id, alternative,
   chevron, type, title, round, roundedRectangle,
   hasSelection, selected, recording, processing,
-  highlighted, disabledStyle,
+  highlighted, disabledStyle, tabIndex
 }) {
 
   const renderButtonContent = () => {
@@ -75,6 +75,7 @@ function Button({ label, badge, primary, danger,
     ref={buttonRef}
     id={id}
     title={title}
+    tabIndex={tabIndex}
   >
     {renderButtonContent()}
 
@@ -120,6 +121,7 @@ Button.defaultProps = {
   processing: false,
   highlighted: false,
   disabledStyle: 'light',
+  tabIndex: 0
 }
 
 Button.propTypes = {
@@ -239,6 +241,11 @@ Button.propTypes = {
    * Style for the disabled button
    */
   disabledStyle: PropTypes.oneOf(['dark', 'light']),
+
+   /**
+   * Sets the tabIndex
+   */
+  tabIndex: PropTypes.number
 }
 
 export default Button

components/form/prompt-input/PromptInputTextarea.es6.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-function PromptInputTextarea ({ className, placeholder, rows, textareaRef, value, onChange, disabled }) {
+function PromptInputTextarea ({ className, placeholder, rows, textareaRef, value, onChange, disabled, tabIndex }) {
   return (
     <textarea
       className={classnames('ds-prompt-input__textarea', className)}
@@ -12,6 +12,7 @@ function PromptInputTextarea ({ className, placeholder, rows, textareaRef, value
       value={value}
       onChange={onChange}
       disabled={disabled}
+      tabIndex={tabIndex}
     />
   )
 }
@@ -22,7 +23,8 @@ PromptInputTextarea.defaultProps = {
   textareaRef: null,
   value: '',
   onChange: () => {},
-  disabled: false
+  disabled: false,
+  tabIndex: 0
 }
 
 PromptInputTextarea.propTypes = {
@@ -35,7 +37,8 @@ PromptInputTextarea.propTypes = {
   ]),
   value: PropTypes.string,
   onChange: PropTypes.func,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  tabIndex: PropTypes.number
 }
 
 export default PromptInputTextarea

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b12/metronome",
-  "version": "1.1.29",
+  "version": "1.1.30",
   "description": "",
   "main": "index.es6.js",
   "scripts": {