enhance(accessibility): Add onKeyPress where onClick exists

To improve navigability by keyboard-only users. https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md This is required for eslint-config-airbnb 16+ airbnb/javascript#1482
Empact · Jan 8, 2018 · 2e4fb87 · 2e4fb87
1 parent f7a41f4
commit 2e4fb87
Show file tree

Hide file tree

Showing 36 changed files with 140 additions and 51 deletions.
diff --git a/app/components/ChannelForm/ChannelForm.js b/app/components/ChannelForm/ChannelForm.js
@@ -50,7 +50,7 @@ const ChannelForm = ({
       parentSelector={() => document.body}
       className={styles.modal}
     >
-      <div onClick={closeChannelForm} className={styles.modalClose}>
+      <div onClick={closeChannelForm} onKeyPress={closeChannelForm} className={styles.modalClose}>
         <FaClose />
       </div>
 

diff --git a/app/components/ChannelForm/Footer.js b/app/components/ChannelForm/Footer.js
@@ -17,15 +17,16 @@ const Footer = ({ step, changeStep, stepTwoIsValid, submit }) => {
 
   const rightButtonText = step === 4 ? 'Submit' : 'Next'
   const rightButtonOnClick = step === 4 ? () => submit() : nextFunc
+  const backButtonOnClick = () => changeStep(step - 1)
 
   return (
     <div className={styles.footer}>
       <div className='buttonContainer'>
-        <div className='buttonPrimary' onClick={() => changeStep(step - 1)}>
+        <div className='buttonPrimary' onClick={backButtonOnClick} onKeyPress={backButtonOnClick}>
           Back
         </div>
       </div>
-      <div className='buttonContainer' onClick={rightButtonOnClick}>
+      <div className='buttonContainer' onClick={rightButtonOnClick} onKeyPress={rightButtonOnClick}>
         <div className={`buttonPrimary ${nextIsInactive && 'inactive'}`}>
           {rightButtonText}
         </div>

diff --git a/app/components/ChannelForm/StepOne.js b/app/components/ChannelForm/StepOne.js
@@ -54,6 +54,7 @@ class StepOne extends Component {
                 key={peer.peer_id}
                 className={styles.peer}
                 onClick={() => this.peerClicked(peer)}
+                onKeyPress={() => this.peerClicked(peer)}
               >
                 <h4>{peer.address}</h4>
                 <h1>{peer.pub_key}</h1>

diff --git a/app/components/Channels/Channel.js b/app/components/Channels/Channel.js
@@ -26,6 +26,7 @@ const Channel = ({ ticker, channel, closeChannel, currentTicker }) => (
         <p
           className={styles.close}
           onClick={() => closeChannel({ channel_point: channel.channel_point })}
+          onKeyPress={() => closeChannel({ channel_point: channel.channel_point })}
         >
           Close channel
         </p>

diff --git a/app/components/Channels/ChannelForm.js b/app/components/Channels/ChannelForm.js
@@ -95,6 +95,7 @@ const ChannelForm = ({ form, setForm, ticker, peers, openChannel, currentTicker
                       key={peer.peer_id}
                       className={styles.peer}
                       onClick={() => setForm({ node_key: peer.pub_key })}
+                      onKeyPress={() => setForm({ node_key: peer.pub_key })}
                     >
                       <h4>{peer.address}</h4>
                       <h1>{peer.pub_key}</h1>
@@ -107,7 +108,7 @@ const ChannelForm = ({ form, setForm, ticker, peers, openChannel, currentTicker
           </ul>
 
           <div className={styles.buttonGroup}>
-            <div className={styles.button} onClick={submitClicked}>Submit</div>
+            <div className={styles.button} onClick={submitClicked} onKeyPress={submitClicked}>Submit</div>
           </div>
         </div>
       </ReactModal>

diff --git a/app/components/Channels/ChannelModal.js b/app/components/Channels/ChannelModal.js
@@ -21,11 +21,14 @@ const ChannelModal = ({ isOpen, resetChannel, channel, explorerLinkBase, closeCh
     }
   }
 
-  const closeChannelClicked = () => {
+  const onCloseChannel = () => {
     closeChannel({ channel_point: channel.channel_point })
     resetChannel(null)
   }
 
+  const onSelectChannel = () =>
+    shell.openExternal(`${explorerLinkBase}/tx/${channel.channel_point.split(':')[0]}`)
+
   return (
     <ReactModal
       isOpen={isOpen}
@@ -44,7 +47,8 @@ const ChannelModal = ({ isOpen, resetChannel, channel, explorerLinkBase, closeCh
               <h2
                 data-hint='Channel point'
                 className='hint--top-left'
-                onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${channel.channel_point.split(':')[0]}`)}
+                onClick={onSelectChannel}
+                onKeyPress={onSelectChannel}
               >
                 {channel.channel_point}
               </h2>
@@ -76,7 +80,7 @@ const ChannelModal = ({ isOpen, resetChannel, channel, explorerLinkBase, closeCh
                 <dd>{channel.num_updates}</dd>
               </dl>
             </div>
-            <div className={styles.close} onClick={closeChannelClicked}>
+            <div className={styles.close} onClick={onCloseChannel} onKeyPress={onCloseChannel}>
               <div>Close channel</div>
             </div>
             <footer className={styles.active}>

diff --git a/app/components/Channels/Channels.js b/app/components/Channels/Channels.js
@@ -72,6 +72,7 @@ const Channels = ({
           className={`${styles.openChannel} hint--top`}
           data-hint='Open a channel'
           onClick={() => setChannelForm({ isOpen: true })}
+          onKeyPress={() => setChannelForm({ isOpen: true })}
         >
           <TiPlus />
         </div>

diff --git a/app/components/Channels/ClosedPendingChannel.js b/app/components/Channels/ClosedPendingChannel.js
@@ -5,7 +5,11 @@ import { btc } from 'utils'
 import styles from './ClosedPendingChannel.scss'
 
 const ClosedPendingChannel = ({ ticker, channel: { channel, closing_txid }, currentTicker, explorerLinkBase }) => (
-  <li className={styles.channel} onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${closing_txid}`)}>
+  <li
+    className={styles.channel}
+    onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${closing_txid}`)}
+    onKeyPress={() => shell.openExternal(`${explorerLinkBase}/tx/${closing_txid}`)}
+  >
     <h1 className={styles.closing}>Closing Channel...</h1>
     <div className={styles.left}>
       <section className={styles.remotePubkey}>

diff --git a/app/components/Channels/OpenPendingChannel.js b/app/components/Channels/OpenPendingChannel.js
@@ -5,7 +5,11 @@ import { btc } from 'utils'
 import styles from './OpenPendingChannel.scss'
 
 const OpenPendingChannel = ({ ticker, channel, currentTicker, explorerLinkBase }) => (
-  <li className={styles.channel} onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${channel.channel.channel_point.split(':')[0]}`)}>
+  <li
+    className={styles.channel}
+    onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${channel.channel.channel_point.split(':')[0]}`)}
+    onKeyPress={() => shell.openExternal(`${explorerLinkBase}/tx/${channel.channel.channel_point.split(':')[0]}`)}
+  >
     <div className={styles.pending}>
       <h1>Opening Channel...</h1>
       <span>Blocks till open: {channel.blocks_till_open}</span>

diff --git a/app/components/Form/Form.js b/app/components/Form/Form.js
@@ -20,7 +20,7 @@ const Form = ({ formType, formProps, closeForm }) => {
   return (
     <div className={`${styles.outtercontainer} ${formType && styles.open}`}>
       <div className={styles.innercontainer}>
-        <div className={styles.esc} onClick={closeForm}>
+        <div className={styles.esc} onClick={closeForm} onKeyPress={closeForm}>
           <FaClose />
         </div>
 

diff --git a/app/components/Form/PayForm.js b/app/components/Form/PayForm.js
@@ -108,7 +108,13 @@ class PayForm extends Component {
           </section>
         </div>
         <section className={styles.buttonGroup}>
-          <div className={`buttonPrimary ${styles.button} ${isValid && styles.active}`} onClick={onPaySubmit}>Pay</div>
+          <div
+            className={`buttonPrimary ${styles.button} ${isValid && styles.active}`}
+            onClick={onPaySubmit}
+            onKeyPress={onPaySubmit}
+          >
+            Pay
+          </div>
         </section>
       </div>
     )

diff --git a/app/components/Form/RequestForm.js b/app/components/Form/RequestForm.js
@@ -38,7 +38,7 @@ const RequestForm = ({
       />
     </section>
     <section className={styles.buttonGroup}>
-      <div className={`buttonPrimary ${styles.button}`} onClick={onRequestSubmit}>
+      <div className={`buttonPrimary ${styles.button}`} onClick={onRequestSubmit} onKeyPress={onRequestSubmit}>
           Request
       </div>
     </section>

diff --git a/app/components/GlobalError/GlobalError.js b/app/components/GlobalError/GlobalError.js
@@ -16,7 +16,7 @@ class GlobalError extends React.Component {
     return (
       <div className={`${styles.container} ${!error && styles.closed}`}>
         <div className={styles.content}>
-          <div className={styles.close} onClick={clearError}>
+          <div className={styles.close} onClick={clearError} onKeyPress={clearError}>
             <MdClose />
           </div>
           <h2>{error}</h2>

diff --git a/app/components/LndSyncing/LndSyncing.js b/app/components/LndSyncing/LndSyncing.js
@@ -57,6 +57,7 @@ class LndSyncing extends Component {
                   className={`${styles.factButton} ${currentFact === index && styles.active}`}
                   key={index}
                   onClick={() => this.setState({ currentFact: index })}
+                  onKeyPress={() => this.setState({ currentFact: index })}
                 />
               ))
             }

diff --git a/app/components/ModalRoot/ModalRoot.js b/app/components/ModalRoot/ModalRoot.js
@@ -20,7 +20,7 @@ const ModalRoot = ({ modalType, modalProps, hideModal, currentTicker, currency }
   return (
     <div className={styles.container}>
       <div className={styles.content}>
-        <div className={styles.esc} onClick={hideModal}>
+        <div className={styles.esc} onClick={hideModal} onKeyPress={hideModal}>
           <FaClose />
         </div>
 

diff --git a/app/components/ModalRoot/SuccessfulSendCoins.js b/app/components/ModalRoot/SuccessfulSendCoins.js
@@ -7,18 +7,19 @@ import styles from './SuccessfulSendCoins.scss'
 
 const SuccessfulSendCoins = ({ amount, addr, txid, hideModal, currentTicker, currency }) => {
   const calculatedAmount = currency === 'usd' ? btc.satoshisToUsd(amount, currentTicker.price_usd) : btc.satoshisToBtc(amount)
+  const showTransaction = () => shell.openExternal(`https://testnet.smartbit.com.au/tx/${txid}`)
 
   return (
     <div className={styles.container}>
       <AnimatedCheckmark />
       <h1>
         You&nbsp;
-        <span className={styles.link} onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${txid}`)}>sent</span>&nbsp;
+        <span className={styles.link} onClick={showTransaction} onKeyPress={showTransaction}>sent</span>&nbsp;
         <span className={styles.amount}>{calculatedAmount} {currency.toUpperCase()}</span>&nbsp;
         to&nbsp;
         <span className={styles.addr}>{addr}</span>
       </h1>
-      <div className={styles.button} onClick={hideModal}>
+      <div className={styles.button} onClick={hideModal} onKeyPress={hideModal}>
         Done
       </div>
     </div>

diff --git a/app/components/ModalRoot/SuccessfulSendPayment.js b/app/components/ModalRoot/SuccessfulSendPayment.js
@@ -9,7 +9,7 @@ const SuccessfulSendPayment = ({ hideModal }) => (
     <h1>
       <span>Successfully sent payment</span>&nbsp;
     </h1>
-    <div className={styles.button} onClick={hideModal}>
+    <div className={styles.button} onClick={hideModal} onKeyPress={hideModal}>
         Done
     </div>
   </div>

diff --git a/app/components/Nav/Nav.js b/app/components/Nav/Nav.js
@@ -47,10 +47,10 @@ const Nav = ({ openPayForm, openRequestForm }) => (
       </NavLink>
     </ul>
     <div className={styles.buttons}>
-      <div className={`buttonPrimary ${styles.button}`} onClick={openPayForm}>
+      <div className={`buttonPrimary ${styles.button}`} onClick={openPayForm} onKeyPress={openPayForm}>
         <span>Pay</span>
       </div>
-      <div className={`buttonPrimary ${styles.button}`} onClick={openRequestForm}>
+      <div className={`buttonPrimary ${styles.button}`} onClick={openRequestForm} onKeyPress={openRequestForm}>
         <span>Request</span>
       </div>
     </div>

diff --git a/app/components/Network/ChannelsList.js b/app/components/Network/ChannelsList.js
@@ -8,12 +8,22 @@ const ChannelsList = ({ channels, updateSelectedChannels, selectedChannelIds })
   <ul className={styles.channels}>
     {
       channels.map(channel => (
-        <li key={channel.chan_id} className={styles.channel} onClick={() => updateSelectedChannels(channel)}>
+        <li
+          key={channel.chan_id}
+          className={styles.channel}
+          onClick={() => updateSelectedChannels(channel)}
+          onKeyPress={() => updateSelectedChannels(channel)}
+        >
           <span className={`${styles.dot} ${selectedChannelIds.includes(channel.chan_id) && styles.active}`} />
 
           <header>
             <h1>Capacity: {btc.satoshisToBtc(channel.capacity)}</h1>
-            <span onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${channel.channel_point.split(':')[0]}`)}>Channel Point</span>
+            <span
+              onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${channel.channel_point.split(':')[0]}`)}
+              onKeyPress={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${channel.channel_point.split(':')[0]}`)}
+            >
+              Channel Point
+            </span>
           </header>
 
           <section>

diff --git a/app/components/Network/PeersList.js b/app/components/Network/PeersList.js
@@ -6,7 +6,7 @@ const PeersList = ({ peers, updateSelectedPeers, selectedPeerPubkeys }) => (
   <ul className={styles.peers}>
     {
       peers.map(peer => (
-        <li key={peer.peer_id} className={styles.peer} onClick={() => updateSelectedPeers(peer)}>
+        <li key={peer.peer_id} className={styles.peer} onClick={() => updateSelectedPeers(peer)} onKeyPress={() => updateSelectedPeers(peer)}>
           <span className={`${styles.dot} ${selectedPeerPubkeys.includes(peer.pub_key) && styles.active}`} />
           <h1>{peer.address}</h1>
           <h4>{peer.pub_key}</h4>

diff --git a/app/components/Network/TransactionForm.js b/app/components/Network/TransactionForm.js
@@ -25,7 +25,12 @@ const TransactionForm = ({ updatePayReq, pay_req, loadingRoutes, payReqRoutes, s
     <ul className={styles.routes}>
       {
         payReqRoutes.map((route, index) => (
-          <li className={`${styles.route} ${currentRoute === route && styles.active}`} key={index} onClick={() => setCurrentRoute(route)}>
+          <li
+            className={`${styles.route} ${currentRoute === route && styles.active}`}
+            key={index}
+            onClick={() => setCurrentRoute(route)}
+            onKeyPress={() => setCurrentRoute(route)}
+          >
             <header>
               <h1>Route #{index + 1}</h1>
               <span>Hops: {route.hops.length}</span>

diff --git a/app/components/Peers/Peer.js b/app/components/Peers/Peer.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styles from './Peer.scss'
 
 const Peer = ({ peer, setPeer }) => (
-  <li className={styles.peer} onClick={() => setPeer(peer)}>
+  <li className={styles.peer} onClick={() => setPeer(peer)} onKeyPress={() => setPeer(peer)}>
     <h4>{peer.address}</h4>
     <h1>{peer.pub_key}</h1>
   </li>

diff --git a/app/components/Peers/PeerForm.js b/app/components/Peers/PeerForm.js
@@ -10,6 +10,8 @@ const PeerForm = ({ form, setForm, connect }) => {
     connect({ pubkey, host })
   }
 
+  const onClose = () => setForm({ isOpen: false })
+
   return (
     <div>
       <ReactModal
@@ -21,7 +23,7 @@ const PeerForm = ({ form, setForm, connect }) => {
         parentSelector={() => document.body}
         className={styles.modal}
       >
-        <div onClick={() => setForm({ isOpen: false })} className={styles.modalClose}>
+        <div onClick={onClose} onKeyPress={onClose} className={styles.modalClose}>
           <FaClose />
         </div>
 
@@ -51,7 +53,7 @@ const PeerForm = ({ form, setForm, connect }) => {
             />
           </section>
 
-          <div className='buttonContainer' onClick={submit}>
+          <div className='buttonContainer' onClick={submit} onKeyPress={submit}>
             <div className='buttonPrimary'>
               Submit
             </div>

diff --git a/app/components/Peers/PeerModal.js b/app/components/Peers/PeerModal.js
@@ -24,6 +24,9 @@ const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => {
     }
   }
 
+  const onClose = () => resetPeer(null)
+  const onDisconnect = () => disconnect({ pubkey: peer.pub_key })
+
   return (
     <ReactModal
       isOpen={isOpen}
@@ -35,7 +38,7 @@ const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => {
       style={customStyles}
     >
       <div className={styles.closeContainer}>
-        <span onClick={() => resetPeer(null)}>
+        <span onClick={onClose} onKeyPress={onClose}>
           <FaClose />
         </span>
       </div>
@@ -59,7 +62,7 @@ const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => {
               <dd>{peer.bytes_sent}</dd>
             </dl>
           </div>
-          <div className={styles.close} onClick={() => disconnect({ pubkey: peer.pub_key })}>
+          <div className={styles.close} onClick={onDisconnect} onKeyPress={onDisconnect}>
             <div>Disconnect peer</div>
           </div>
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ const SuccessfulSendPayment = ({ hideModal }) => ( @@
         <h1>
           <span>Successfully sent payment</span>&nbsp;
         </h1>
-        <div className={styles.button} onClick={hideModal}>
+        <div className={styles.button} onClick={hideModal} onKeyPress={hideModal}>
             Done
         </div>
       </div>
@@ Expand Down @@