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

@@ -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',
 }
 ```
 

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 }) => (

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}>

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]),