fix: add required paginationLabel prop to TablePagination component's…

… use of Pagination component (#3406)

This commit fixes a bug with the TablePagination component. This component renders the Pagination component without a paginationLabel prop, which is a required prop of the Pagination component. This commit adds a paginationLabel="table pagination" prop, which matches the prop passed to the PaginationComponent by the TablePaginationMinimal component.

Authored-by: michaelroytman <mroytman@edx.org>

src/DataTable/TablePagination.jsx

@@ -1,8 +1,12 @@
 import React, { useContext } from 'react';
+import { useIntl } from 'react-intl';
 import DataTableContext from './DataTableContext';
 import Pagination from '../Pagination';
+import messages from './messages';
 
 function TablePagination() {
+  const intl = useIntl();
+
   const {
     pageCount, state, gotoPage,
   } = useContext(DataTableContext);
@@ -19,6 +23,7 @@ function TablePagination() {
       currentPage={pageIndex + 1}
       onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
       pageCount={pageCount}
+      paginationLabel={intl.formatMessage(messages.paginationLabel)}
       icons={{
         leftIcon: null,
         rightIcon: null,

src/DataTable/TablePaginationMinimal.jsx

@@ -1,9 +1,13 @@
 import React, { useContext } from 'react';
+import { useIntl } from 'react-intl';
 import DataTableContext from './DataTableContext';
 import Pagination from '../Pagination';
 import { ArrowBackIos, ArrowForwardIos } from '../../icons';
+import messages from './messages';
 
 function TablePaginationMinimal() {
+  const intl = useIntl();
+
   const {
     nextPage, pageCount, gotoPage, state,
   } = useContext(DataTableContext);
@@ -20,7 +24,7 @@ function TablePaginationMinimal() {
       variant="minimal"
       currentPage={pageIndex + 1}
       pageCount={pageCount}
-      paginationLabel="table pagination"
+      paginationLabel={intl.formatMessage(messages.paginationLabel)}
       onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
       icons={{
         leftIcon: ArrowBackIos,

src/DataTable/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  paginationLabel: {
+    id: 'pgn.DataTable.paginationLabel',
+    defaultMessage: 'table pagination',
+    description: 'Accessibile name for the navigation element of a pagination component',
+  },
+});
+
+export default messages;

src/DataTable/tests/TableFooter.test.jsx

@@ -32,7 +32,11 @@ describe('<TableFooter />', () => {
   it('Renders the default footer', () => {
     render(<TableFooterWrapper />);
     expect(screen.getByTestId('row-status')).toBeInTheDocument();
-    expect(screen.getByLabelText('table pagination')).toBeInTheDocument();
+
+    // The TableFooter contains two components that have the aria-label
+    // "table pagination" - DataTable and DataTableMinimal.
+    const tables = screen.getAllByLabelText('table pagination');
+    tables.forEach(table => expect(table).toBeInTheDocument());
   });
 
   it('accepts a class name', () => {

src/DataTable/tests/TablePagination.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, act, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
 import userEvent from '@testing-library/user-event';
 
 import TablePagination from '../TablePagination';
@@ -14,9 +15,11 @@ const instance = {
 // eslint-disable-next-line react/prop-types
 function PaginationWrapper({ value }) {
   return (
-    <DataTableContext.Provider value={value}>
-      <TablePagination />
-    </DataTableContext.Provider>
+    <IntlProvider>
+      <DataTableContext.Provider value={value}>
+        <TablePagination />
+      </DataTableContext.Provider>
+    </IntlProvider>
   );
 }