Add ability to navigate using keyboard

Signed-off-by: Gabriel Ramirez <gabriel.e.ramirez@uscis.dhs.gov>
react-component · May 25, 2017 · c359154 · c359154
1 parent 3783be1
commit c359154
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/src/Pager.jsx b/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;
diff --git a/src/Pagination.jsx b/src/Pagination.jsx
@@ -190,6 +190,12 @@ class Pagination extends React.Component {
     return this.state.current < this._calcPage();
   }
 
+  _runIfEnter(event, callback) {
+    if (event.keyCode === 'Enter') {
+      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}
         >