Add ability to navigate using keyboard

Signed-off-by: Gabriel Ramirez <gabriel.e.ramirez@uscis.dhs.gov>
Signed-off-by: Patrick Oyarzun <patrick.t.oyarzun@uscis.dhs.gov>
Signed-off-by: Gabriel Ramirez <gabriel.e.ramirez@uscis.dhs.gov>
Signed-off-by: Patrick Oyarzun <patrick.t.oyarzun@uscis.dhs.gov>

.gitignore

@@ -26,4 +26,5 @@ assets/**/*.css
 build
 lib
 es
-.vscode
+.vscode
+coverage/

package.json

@@ -36,16 +36,17 @@
     "pub": "rc-tools run pub --babel-runtime",
     "lint": "rc-tools run lint",
     "lint:fix": "rc-tools run lint --fix",
-    "karma": "rc-tools run karma",
-    "saucelabs": "rc-tools run saucelabs",
-    "test": "rc-tools run test",
-    "chrome-test": "rc-tools run chrome-test",
-    "coverage": "rc-tools run coverage"
+    "karma": "rc-test run karma",
+    "saucelabs": "rc-test run saucelabs",
+    "test": "rc-test run test",
+    "chrome-test": "rc-test run chrome-test",
+    "coverage": "rc-test run coverage"
   },
   "devDependencies": {
     "expect.js": "0.3.x",
     "pre-commit": "1.x",
     "rc-select": "5.x",
+    "rc-test": "^6.0.1",
     "rc-tools": "6.x",
     "react": "^15.2.1",
     "react-addons-test-utils": "^15.3.1",

src/Pager.jsx

@@ -14,7 +14,13 @@ const Pager = (props) => {
   }
 
   return (
-    <li title={props.showTitle ? props.page : null} className={cls} onClick={props.onClick}>
+    <li
+      title={props.showTitle ? props.page : null}
+      className={cls}
+      onClick={props.onClick}
+      onKeyPress={props.onKeyPress}
+      tabIndex="0"
+    >
       <a>{props.page}</a>
     </li>
   );
@@ -29,6 +35,7 @@ Pager.propTypes = {
   showTitle: PropTypes.bool,
   rootPrefixCls: PropTypes.string,
   onClick: PropTypes.func,
+  onKeyPress: PropTypes.func,
 };
 
 export default Pager;

src/Pagination.jsx

@@ -190,6 +190,12 @@ class Pagination extends React.Component {
     return this.state.current < this._calcPage();
   }
 
+  _runIfEnter(event, callback) {
+    if (event.key === 'Enter' || event.charCode === 13) {
+      callback();
+    }
+  }
+
   render() {
     const props = this.props;
     const locale = props.locale;
@@ -211,6 +217,8 @@ class Pagination extends React.Component {
           <li
             title={props.showTitle ? locale.prev_page : null}
             onClick={this._prev}
+            tabIndex="0"
+            onKeyPress={(evt) => this._runIfEnter(evt, this._prev)}
             className={`${this._hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
             aria-disabled={!this._hasPrev()}
           >
@@ -233,6 +241,8 @@ class Pagination extends React.Component {
           <li
             title={props.showTitle ? locale.next_page : null}
             onClick={this._next}
+            tabIndex="0"
+            onKeyPress={(evt) => this._runIfEnter(evt, this._next)}
             className={`${this._hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
             aria-disabled={!this._hasNext()}
           >
@@ -250,6 +260,7 @@ class Pagination extends React.Component {
             locale={locale}
             rootPrefixCls={prefixCls}
             onClick={this._handleChange.bind(this, i)}
+            onKeyPress={(evt) => this._runIfEnter(evt, this._handleChange.bind(this, i))}
             key={i}
             page={i}
             active={active}
@@ -265,6 +276,8 @@ class Pagination extends React.Component {
           title={props.showTitle ? prevItemTitle : null}
           key="prev"
           onClick={this._jumpPrev}
+          tabIndex="0"
+          onKeyPress={(evt) => this._runIfEnter(evt, this._jumpPrev)}
           className={`${prefixCls}-jump-prev`}
         >
           <a />
@@ -274,7 +287,9 @@ class Pagination extends React.Component {
         <li
           title={props.showTitle ? nextItemTitle : null}
           key="next"
+          tabIndex="0"
           onClick={this._jumpNext}
+          onKeyPress={(evt) => this._runIfEnter(evt, this._jumpNext)}
           className={`${prefixCls}-jump-next`}
         >
           <a />
@@ -286,6 +301,7 @@ class Pagination extends React.Component {
           last
           rootPrefixCls={prefixCls}
           onClick={this._handleChange.bind(this, allPages)}
+          onKeyPress={(evt) => this._runIfEnter(evt, this._handleChange.bind(this, allPages))}
           key={allPages}
           page={allPages}
           active={false}
@@ -297,6 +313,7 @@ class Pagination extends React.Component {
           locale={props.locale}
           rootPrefixCls={prefixCls}
           onClick={this._handleChange.bind(this, 1)}
+          onKeyPress={(evt) => this._runIfEnter(evt, this._handleChange.bind(this, 1))}
           key={1}
           page={1}
           active={false}
@@ -322,6 +339,7 @@ class Pagination extends React.Component {
             locale={props.locale}
             rootPrefixCls={prefixCls}
             onClick={this._handleChange.bind(this, i)}
+            onKeyPress={(evt) => this._runIfEnter(evt, this._handleChange.bind(this, i))}
             key={i}
             page={i}
             active={active}
@@ -378,6 +396,8 @@ class Pagination extends React.Component {
         <li
           title={props.showTitle ? locale.prev_page : null}
           onClick={this._prev}
+          tabIndex="0"
+          onKeyPress={(evt) => this._runIfEnter(evt, this._prev)}
           className={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
           aria-disabled={prevDisabled}
         >
@@ -387,6 +407,8 @@ class Pagination extends React.Component {
         <li
           title={props.showTitle ? locale.next_page : null}
           onClick={this._next}
+          tabIndex="0"
+          onKeyPress={(evt) => this._runIfEnter(evt, this._next)}
           className={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
           aria-disabled={nextDisabled}
         >

tests/Pagination.spec.js

@@ -1,9 +1,10 @@
 /* eslint func-names: 0, no-console: 0 */
 import expect from 'expect.js';
-import Pagination from '../';
+import Pagination from '../src';
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 import ReactDOM from 'react-dom';
+import TwoPagination from './helper/two-pagination';
 
 const Simulate = TestUtils.Simulate;
 
@@ -185,8 +186,6 @@ describe('Controlled Pagination', () => {
 });
 
 describe('Controlled Pagination', () => {
-  const TwoPagination = require('./helper/two-pagination');
-
   let entry = null;
   const container = document.createElement('div');
   document.body.appendChild(container);

tests/helper/two-pagination.jsx

@@ -1,5 +1,5 @@
 import 'rc-select/assets/index.css';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 import React from 'react';
 import Select from 'rc-select';