From 474244ce419ebcb825d8e7927289631ef7696af8 Mon Sep 17 00:00:00 2001
From: tragessere <tragessere@gmail.com>
Date: Thu, 4 Oct 2018 16:47:30 -0400
Subject: [PATCH] Pagination accessibility (#1127)

* Add aria-label attributes to pagination jump and row count selector with a new prop to specify different text.

* Add new text props for labels to README
---
 README.md           | 4 ++++
 src/defaultProps.js | 2 ++
 src/pagination.js   | 8 +++++---
 src/propTypes.js    | 2 ++
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 1a2414e..a736b63 100644
--- a/README.md
+++ b/README.md
@@ -351,6 +351,10 @@ These are all of the available props (and their default values) for the main `<R
   pageText: 'Page',
   ofText: 'of',
   rowsText: 'rows',
+  
+  // Accessibility Labels
+  pageJumpText: 'jump to page',
+  rowsSelectorText: 'rows per page',
 }
 ```
 
diff --git a/src/defaultProps.js b/src/defaultProps.js
index 7b0cced..1d11cfd 100644
--- a/src/defaultProps.js
+++ b/src/defaultProps.js
@@ -174,6 +174,8 @@ export default {
   pageText: 'Page',
   ofText: 'of',
   rowsText: 'rows',
+  pageJumpText: 'jump to page',
+  rowsSelectorText: 'rows per page',
 
   // Components
   TableComponent: ({ children, className, ...rest }) => (
diff --git a/src/pagination.js b/src/pagination.js
index dfda26a..714d887 100644
--- a/src/pagination.js
+++ b/src/pagination.js
@@ -1,7 +1,5 @@
 import React, { Component } from 'react'
 import classnames from 'classnames'
-//
-// import _ from './utils'
 
 const defaultButton = props => (
   <button type="button" {...props} className="-btn">
@@ -88,6 +86,7 @@ export default class ReactTablePagination extends Component {
             {showPageJump ? (
               <div className="-pageJump">
                 <input
+                  aria-label={this.props.pageJumpText}
                   type={this.state.page === '' ? 'text' : 'number'}
                   onChange={e => {
                     const val = e.target.value
@@ -113,7 +112,10 @@ export default class ReactTablePagination extends Component {
           </span>
           {showPageSizeOptions && (
             <span className="select-wrap -pageSizeOptions">
-              <select onChange={e => onPageSizeChange(Number(e.target.value))} value={pageSize}>
+              <select
+                aria-label={this.props.rowsSelectorText}
+                onChange={e => onPageSizeChange(Number(e.target.value))}
+                value={pageSize}>
                 {pageSizeOptions.map((option, i) => (
                   // eslint-disable-next-line react/no-array-index-key
                   <option key={i} value={option}>
diff --git a/src/propTypes.js b/src/propTypes.js
index a1bf766..a19a055 100644
--- a/src/propTypes.js
+++ b/src/propTypes.js
@@ -139,6 +139,8 @@ export default {
   pageText: PropTypes.node,
   ofText: PropTypes.node,
   rowsText: PropTypes.node,
+  pageJumpText: PropTypes.node,
+  rowsSelectorText: PropTypes.node,
 
   // Components
   TableComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),