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: '이전 페이지',