Add default Aria labels for pagination break, and provide breakAriaLa…

…bels prop to allow user customization

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 - Removed support for depecrated `extraAriaContext` (please use `ariaLabelBuilder` instead)
 
+## >= 8.1.5
+
+- Add an ARIA label for pagination break link with default props of `Jump forward` and `Jump backward` when index is before and after the break, respectively
+- Add an optional prop to PaginationBoxView `breakAriaLabels` allowing the above labels to be user defined.
+
 ## >= 8.1.4
 
 - Add an ARIA role [`navigation`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role) to main `<ul>` tag

__tests__/PaginationBoxView-test.js

@@ -752,6 +752,90 @@ describe('Test pagination behaviour', () => {
     );
     consoleWarnMock.mockRestore();
   });
+
+  it('should provide default forward aria-label for the break if breakAriaLabels is not provided and index is before the break', async () => {
+    render(
+      <PaginationBoxView
+        initialPage={0}
+        pageCount={22}
+        marginPagesDisplayed={2}
+        pageRangeDisplayed={5}
+      />
+    );
+    const pagination = await screen.findByRole('navigation');
+    expect(pagination).toBeDefined();
+
+    // Aria label should be 'Jump forward' if selected page is before the break
+    const breakLinkAria = ReactDOM.findDOMNode(pagination)
+      .querySelector('.break a')
+      .getAttribute('aria-label');
+    expect(breakLinkAria).toBe('Jump forward');
+  });
+
+  it('should provide default backward aria-label for the break if breakAriaLabels is not provided and index is after the break', async () => {
+    render(
+      <PaginationBoxView
+        initialPage={21}
+        pageCount={22}
+        marginPagesDisplayed={2}
+        pageRangeDisplayed={5}
+      />
+    );
+    const pagination = await screen.findByRole('navigation');
+    expect(pagination).toBeDefined();
+
+    // Aria label should be 'Jump backward' if selected page is after the break
+    const breakLinkAria = ReactDOM.findDOMNode(pagination)
+      .querySelector('.break a')
+      .getAttribute('aria-label');
+    expect(breakLinkAria).toBe('Jump backward');
+  });
+
+  it('should provide given forward aria-label for the break if breakAriaLabels is provided and index is before the break', async () => {
+    render(
+      <PaginationBoxView
+        initialPage={0}
+        pageCount={22}
+        marginPagesDisplayed={2}
+        pageRangeDisplayed={5}
+        breakAriaLabels={{
+          forward: 'Skip forward',
+          backward: 'Skip backward',
+        }}
+      />
+    );
+    const pagination = await screen.findByRole('navigation');
+    expect(pagination).toBeDefined();
+
+    // Aria label should be 'Skip forward' if selected page is before the break
+    const breakLinkAria = ReactDOM.findDOMNode(pagination)
+      .querySelector('.break a')
+      .getAttribute('aria-label');
+    expect(breakLinkAria).toBe('Skip forward');
+  });
+
+  it('should provide given backward aria-label for the break if breakAriaLabels is provided and index is after the break', async () => {
+    render(
+      <PaginationBoxView
+        initialPage={21}
+        pageCount={22}
+        marginPagesDisplayed={2}
+        pageRangeDisplayed={5}
+        breakAriaLabels={{
+          forward: 'Skip forward',
+          backward: 'Skip backward',
+        }}
+      />
+    );
+    const pagination = await screen.findByRole('navigation');
+    expect(pagination).toBeDefined();
+
+    // Aria label should be 'Skip backward' if selected page is after the break
+    const breakLinkAria = ReactDOM.findDOMNode(pagination)
+      .querySelector('.break a')
+      .getAttribute('aria-label');
+    expect(breakLinkAria).toBe('Skip backward');
+  });
 });
 
 describe('Test default props', () => {

index.d.ts

@@ -214,6 +214,17 @@ export interface ReactPaginateProps {
    */
   ariaLabelBuilder?(pageIndex: number, selectedPage: number): void;
 
+  /**
+   * By default the pagination link will have an 'aria-label' attribute of 'Jump forward'
+   * when the break is after the current index, and an 'aria-label' attribute of 'Jump
+   * backward' when the break is before the current index. This optional prop can be used
+   * to provide alternative 'aria-label' attributes.
+   */
+  breakAriaLabels?: {
+    forward: string;
+    backward: string;
+  };
+
   /**
    * The event to listen onto before changing the selected page. Default is: `onClick`.
    */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-paginate",
-  "version": "8.1.4",
+  "version": "8.1.5",
   "description": "A ReactJS component that creates a pagination.",
   "main": "./dist/react-paginate.js",
   "repository": {

react_components/BreakView.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 const BreakView = (props) => {
   const {
     breakLabel,
+    breakAriaLabel,
     breakClassName,
     breakLinkClassName,
     breakHandler,
@@ -19,6 +20,7 @@ const BreakView = (props) => {
         className={breakLinkClassName}
         role="button"
         tabIndex="0"
+        aria-label={breakAriaLabel}
         onKeyPress={breakHandler}
         {...getEventListener(breakHandler)}
       >
@@ -30,6 +32,7 @@ const BreakView = (props) => {
 
 BreakView.propTypes = {
   breakLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  breakAriaLabel: PropTypes.string,
   breakClassName: PropTypes.string,
   breakLinkClassName: PropTypes.string,
   breakHandler: PropTypes.func.isRequired,

react_components/PaginationBoxView.js

@@ -20,6 +20,10 @@ export default class PaginationBoxView extends Component {
     nextPageRel: PropTypes.string,
     nextRel: PropTypes.string,
     breakLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    breakAriaLabels: PropTypes.shape({
+      forward: PropTypes.string,
+      backward: PropTypes.string,
+    }),
     hrefBuilder: PropTypes.func,
     hrefAllControls: PropTypes.bool,
     onPageChange: PropTypes.func,
@@ -65,6 +69,7 @@ export default class PaginationBoxView extends Component {
     nextPageRel: 'next',
     nextRel: 'next',
     breakLabel: '...',
+    breakAriaLabels: { forward: 'Jump forward', backward: 'Jump backward' },
     disabledClassName: 'disabled',
     disableInitialCallback: false,
     pageLabelBuilder: (page) => page,
@@ -381,6 +386,7 @@ export default class PaginationBoxView extends Component {
       breakLabel,
       breakClassName,
       breakLinkClassName,
+      breakAriaLabels,
     } = this.props;
 
     const { selected } = this.state;
@@ -470,9 +476,14 @@ export default class PaginationBoxView extends Component {
           // We do not show break if only one active page is displayed.
           (pageRangeDisplayed > 0 || marginPagesDisplayed > 0)
         ) {
+          const useBreakAriaLabel =
+            index < selected
+              ? breakAriaLabels.backward
+              : breakAriaLabels.forward;
           breakView = (
             <BreakView
               key={index}
+              breakAriaLabel={useBreakAriaLabel}
               breakLabel={breakLabel}
               breakClassName={breakClassName}
               breakLinkClassName={breakLinkClassName}