feature/accessible-pages

assets/index.less

@@ -17,6 +17,18 @@
   user-select: none;
   padding: 0;
 
+  .visuallyHidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
   > li {
     list-style: none;
   }
@@ -55,6 +67,9 @@
     a {
       text-decoration: none;
       color: #666;
+      width: 100%;
+      height: 100%;
+      display: block;
     }
 
     &:hover {

examples/focusOnListItem.html

@@ -0,0 +1 @@
+placeholder

examples/focusOnListItem.js

@@ -0,0 +1,29 @@
+/* eslint func-names: 0, no-console: 0 */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Pagination from 'rc-pagination';
+import 'rc-pagination/assets/index.less';
+
+class App extends React.Component {
+  state = {
+    current: 3,
+  };
+  onChange = (page) => {
+    console.log(page);
+    this.setState({
+      current: page,
+    });
+  }
+  render() {
+    return (
+      <Pagination
+        focusOnListItem={false}
+        onChange={this.onChange}
+        current={this.state.current}
+        total={25}
+      />
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('__react-content'));

rc-pagination.d.ts

@@ -17,6 +17,7 @@ declare module 'rc-pagination' {
     showPrevNextJumpers: boolean;
     showQuickJumper: boolean | object;
     showTitle: boolean;
+    focusOnListItem: boolean;
 
     locale: object;
 

src/Pager.jsx

@@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
 
 const Pager = (props) => {
   const prefixCls = `${props.rootPrefixCls}-item`;
+  const ariaAttributes = {};
   let cls = `${prefixCls} ${prefixCls}-${props.page}`;
 
   if (props.active) {
     cls = `${cls} ${prefixCls}-active`;
+    ariaAttributes['aria-current'] = 'page';
   }
 
   if (props.className) {
@@ -17,6 +19,22 @@ const Pager = (props) => {
     cls = `${cls} ${prefixCls}-disabled`;
   }
 
+  const renderVisuallyHiddenText = () => (
+    <span className="visuallyHidden">
+      {props.active
+        ? props.locale.aria_current_page
+        : props.locale.aria_page
+      }
+    </span>
+  );
+
+  const renderLink = () => (
+    <a href="#" {...ariaAttributes}>
+      {renderVisuallyHiddenText()}
+      {props.page}
+    </a>
+  );
+
   const handleClick = () => {
     props.onClick(props.page);
   };
@@ -31,9 +49,9 @@ const Pager = (props) => {
       className={cls}
       onClick={handleClick}
       onKeyPress={handleKeyPress}
-      tabIndex="0"
+      tabIndex={props.focusOnListItem ? 0 : null}
     >
-      {props.itemRender(props.page, 'page', <a>{props.page}</a>)}
+      {props.itemRender(props.page, 'page', renderLink())}
     </li>
   );
 };
@@ -45,6 +63,7 @@ Pager.propTypes = {
   locale: PropTypes.object,
   className: PropTypes.string,
   showTitle: PropTypes.bool,
+  focusOnListItem: PropTypes.bool,
   rootPrefixCls: PropTypes.string,
   onClick: PropTypes.func,
   onKeyPress: PropTypes.func,

src/Pagination.jsx

@@ -47,6 +47,7 @@ class Pagination extends React.Component {
     showPrevNextJumpers: PropTypes.bool,
     showQuickJumper: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
     showTitle: PropTypes.bool,
+    focusOnListItem: PropTypes.bool,
     pageSizeOptions: PropTypes.arrayOf(PropTypes.string),
     showTotal: PropTypes.func,
     locale: PropTypes.object,
@@ -73,6 +74,7 @@ class Pagination extends React.Component {
     showSizeChanger: false,
     showLessItems: false,
     showTitle: true,
+    focusOnListItem: true,
     onShowSizeChange: noop,
     locale: LOCALE,
     style: {},
@@ -451,6 +453,7 @@ class Pagination extends React.Component {
         onClick: this.handleChange,
         onKeyPress: this.runIfEnter,
         showTitle: props.showTitle,
+        focusOnListItem: props.focusOnListItem,
         itemRender: props.itemRender,
       };
       if (!allPages) {
@@ -530,6 +533,7 @@ class Pagination extends React.Component {
           page={allPages}
           active={false}
           showTitle={props.showTitle}
+          focusOnListItem={props.focusOnListItem}
           itemRender={props.itemRender}
         />
       );
@@ -543,6 +547,7 @@ class Pagination extends React.Component {
           page={1}
           active={false}
           showTitle={props.showTitle}
+          focusOnListItem={props.focusOnListItem}
           itemRender={props.itemRender}
         />
       );
@@ -570,6 +575,7 @@ class Pagination extends React.Component {
             page={i}
             active={active}
             showTitle={props.showTitle}
+            focusOnListItem={props.focusOnListItem}
             itemRender={props.itemRender}
           />
         );

src/locale/ar_EG.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'الذهاب إلى',
   jump_to_confirm: 'تأكيد',
   page: '',
+  aria_page: 'صفحة',
+  aria_current_page: 'الصفحه الحاليه',
 
   // Pagination.jsx
   prev_page: 'الصفحة السابقة',

src/locale/bg_BG.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Към',
   jump_to_confirm: 'потвърждавам',
   page: '',
+  aria_page: 'Страница',
+  aria_current_page: 'Текуща страница',
 
   // Pagination.jsx
   prev_page: 'Предишна страница',

src/locale/ca_ES.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Anar a',
   jump_to_confirm: 'Confirma',
   page: '',
+  aria_page: 'Página',
+  aria_current_page: 'Página actual',
 
   // Pagination.jsx
   prev_page: 'Pàgina prèvia',

src/locale/cs_CZ.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Přejít',
   jump_to_confirm: 'potvrdit',
   page: '',
+  aria_page: 'Stránka',
+  aria_current_page: 'Aktuální stránka',
 
   // Pagination.jsx
   prev_page: 'Předchozí strana',

src/locale/da_DK.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Gå til',
   jump_to_confirm: 'bekræft',
   page: '',
+  aria_page: 'Side',
+  aria_current_page: 'Nuværende side',
 
   // Pagination.jsx
   prev_page: 'Forrige Side',

src/locale/de_DE.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Gehe zu',
   jump_to_confirm: 'bestätigen',
   page: '',
+  aria_page: 'Seite',
+  aria_current_page: 'Aktuelle Seite',
 
   // Pagination.jsx
   prev_page: 'Vorherige Seite',

src/locale/el_GR.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Μετάβαση',
   jump_to_confirm: 'επιβεβαιώνω',
   page: '',
+  aria_page: 'Σελίδα',
+  aria_current_page: 'Τρέχουσα σελίδα',
 
   // Pagination.jsx
   prev_page: 'Προηγούμενη Σελίδα',

src/locale/en_GB.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Goto',
   jump_to_confirm: 'confirm',
   page: '',
+  aria_page: 'Page',
+  aria_current_page: 'Current page',
 
   // Pagination.jsx
   prev_page: 'Previous Page',

src/locale/en_US.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Goto',
   jump_to_confirm: 'confirm',
   page: '',
+  aria_page: 'Page',
+  aria_current_page: 'Current page',
 
   // Pagination.jsx
   prev_page: 'Previous Page',

src/locale/es_ES.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Ir a',
   jump_to_confirm: 'confirmar',
   page: '',
+  aria_page: 'Página',
+  aria_current_page: 'Página actual',
 
   // Pagination.jsx
   prev_page: 'Página anterior',

src/locale/et_EE.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Hüppa',
   jump_to_confirm: 'Kinnitage',
   page: '',
+  aria_page: 'Leht',
+  aria_current_page: 'Käesolev lehekülg',
 
   // Pagination.jsx
   prev_page: 'Eelmine leht',

src/locale/fa_IR.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'برو به',
   jump_to_confirm: 'تایید',
   page: '',
+  aria_page: 'صفحه',
+  aria_current_page: 'صفحه فعلی',
 
   // Pagination.jsx
   prev_page: 'صفحه قبلی',

src/locale/fi_FI.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Mene',
   jump_to_confirm: 'Potvrdite',
   page: '',
+  aria_page: 'Sivu',
+  aria_current_page: 'Tämänhetkinen sivu',
 
   // Pagination.jsx
   prev_page: 'Edellinen sivu',

src/locale/fr_BE.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Aller à',
   jump_to_confirm: 'confirmer',
   page: '',
+  aria_page: 'Page',
+  aria_current_page: 'Page actuelle',
 
   // Pagination.jsx
   prev_page: 'Page précédente',

src/locale/fr_FR.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Aller à',
   jump_to_confirm: 'confirmer',
   page: '',
+  aria_page: 'Page',
+  aria_current_page: 'Page actuelle',
 
   // Pagination.jsx
   prev_page: 'Page précédente',

src/locale/he_IL.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'עבור אל',
   jump_to_confirm: 'אישור',
   page: '',
+  aria_page: 'עמוד',
+  aria_current_page: 'העמוד הנוכחי',
 
   // Pagination.jsx
   prev_page: 'העמוד הקודם',

src/locale/hi_IN.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'इस पर चलें',
   jump_to_confirm: 'पुष्टि करें',
   page: '',
+  aria_page: 'पृष्ठ',
+  aria_current_page: 'वर्तमान पृष्ठ',
 
   // Pagination.jsx
   prev_page: 'पिछला पृष्ठ',

src/locale/hr_HR.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Idi na',
   jump_to_confirm: 'potvrdi',
   page: '',
+  aria_page: 'Stranica',
+  aria_current_page: 'Trenutna stranica',
 
   // Pagination.jsx
   prev_page: 'Prijašnja stranica',

src/locale/hu_HU.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Ugrás', // 'Goto',
   jump_to_confirm: 'megerősít', // 'confirm',
   page: '',
+  aria_page: 'Oldal',
+  aria_current_page: 'Aktuális oldal',
 
   // Pagination.jsx
   prev_page: 'Előző oldal', // 'Previous Page',

src/locale/id_ID.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Menuju',
   jump_to_confirm: 'konfirmasi',
   page: '',
+  aria_page: 'Halaman',
+  aria_current_page: 'Halaman saat ini',
 
   // Pagination.jsx
   prev_page: 'Halaman Sebelumnya',

src/locale/is_IS.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'Síða',
   jump_to_confirm: 'staðfest',
   page: '',
+  aria_page: 'Síðu',
+  aria_current_page: 'Núverandi síða',
 
   // Pagination.jsx
   prev_page: 'Fyrri síða',

src/locale/it_IT.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'vai a',
   jump_to_confirm: 'Conferma',
   page: '',
+  aria_page: 'Pagina',
+  aria_current_page: 'Pagina corrente',
 
   // Pagination.jsx
   prev_page: 'Pagina precedente',

src/locale/ja_JP.js

@@ -4,6 +4,8 @@ export default {
   jump_to: '移動',
   jump_to_confirm: '確認する',
   page: 'ページ',
+  aria_page: 'ページ',
+  aria_current_page: '現在のページ',
 
   // Pagination.jsx
   prev_page: '前のページ',

src/locale/kn_IN.js

@@ -4,6 +4,8 @@ export default {
   jump_to: 'ಜಿಗಿತವನ್ನು',
   jump_to_confirm: 'ಖಚಿತಪಡಿಸಲು ಜಿಗಿತವನ್ನು',
   page: '',
+  aria_page: 'ಪುಟ',
+  aria_current_page: 'ಪ್ರಸ್ತುತ ಪುಟ',
 
   // Pagination.jsx
   prev_page: 'ಹಿಂದಿನ ಪುಟ',

src/locale/ko_KR.js

@@ -4,6 +4,8 @@ export default {
   jump_to: '이동하기',
   jump_to_confirm: '확인하다',
   page: '',
+  aria_page: '페이지',
+  aria_current_page: '현재 페이지',
 
   // Pagination.jsx
   prev_page: '이전 페이지',