Aria-labels on pagination buttons are now customizable

src/DataTable/Pagination.tsx

@@ -15,6 +15,10 @@ const defaultComponentOptions = {
 	noRowsPerPage: false,
 	selectAllRowsItem: false,
 	selectAllRowsItemText: 'All',
+	previousPageLabel: 'Previous Page',
+	nextPageLabel: 'Next Page',
+	firstPageLabel: 'First Page',
+	lastPageLabel: 'Last Page',
 };
 
 const PaginationWrapper = styled.nav`
@@ -153,7 +157,7 @@ function Pagination({
 				<Button
 					id="pagination-first-page"
 					type="button"
-					aria-label="First Page"
+					aria-label={options.firstPageLabel}
 					aria-disabled={disabledLesser}
 					onClick={handleFirst}
 					disabled={disabledLesser}
@@ -165,7 +169,7 @@ function Pagination({
 				<Button
 					id="pagination-previous-page"
 					type="button"
-					aria-label="Previous Page"
+					aria-label={options.previousPageLabel}
 					aria-disabled={disabledLesser}
 					onClick={handlePrevious}
 					disabled={disabledLesser}
@@ -179,7 +183,7 @@ function Pagination({
 				<Button
 					id="pagination-next-page"
 					type="button"
-					aria-label="Next Page"
+					aria-label={options.nextPageLabel}
 					aria-disabled={disabledGreater}
 					onClick={handleNext}
 					disabled={disabledGreater}
@@ -191,7 +195,7 @@ function Pagination({
 				<Button
 					id="pagination-last-page"
 					type="button"
-					aria-label="Last Page"
+					aria-label={options.lastPageLabel}
 					aria-disabled={disabledGreater}
 					onClick={handleLast}
 					disabled={disabledGreater}

src/DataTable/__tests__/Pagination.test.tsx

@@ -4,7 +4,7 @@
 
 import 'jest-styled-components';
 import * as React from 'react';
-import { fireEvent } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
 import { renderWithTheme } from '../../internal/test-helpers'; // since child elements require theme
 import Pagination from '../Pagination';
 
@@ -230,3 +230,42 @@ describe('when the screensize is small', () => {
 		expect(container.firstChild).toMatchSnapshot();
 	});
 });
+
+describe('Pagination component accessibility labels', () => {
+	test('should render custom aria-labels for navigation buttons', () => {
+		global.innerWidth = 500;
+
+		renderWithTheme(
+			<Pagination
+				currentPage={1}
+				rowsPerPage={10}
+				rowCount={40}
+				onChangePage={jest.fn()}
+				onChangeRowsPerPage={jest.fn()}
+				paginationComponentOptions={{
+					firstPageLabel: 'Primeira página',
+					lastPageLabel: 'Última página',
+					nextPageLabel: 'Próxima página',
+					previousPageLabel: 'Página anterior',
+				}}
+			/>,
+		);
+
+		const firstPageButton = screen.getByRole('button', { name: /Primeira página/i });
+		const lastPageButton = screen.getByRole('button', { name: /Última página/i });
+		const nextPageButton = screen.getByRole('button', { name: /Próxima página/i });
+		const previousPageButton = screen.getByRole('button', { name: /Página anterior/i });
+
+		expect(firstPageButton).not.toBeNull();
+		expect(firstPageButton.getAttribute('aria-label')).toBe('Primeira página');
+
+		expect(lastPageButton).not.toBeNull();
+		expect(lastPageButton.getAttribute('aria-label')).toBe('Última página');
+
+		expect(nextPageButton).not.toBeNull();
+		expect(nextPageButton.getAttribute('aria-label')).toBe('Próxima página');
+
+		expect(previousPageButton).not.toBeNull();
+		expect(previousPageButton.getAttribute('aria-label')).toBe('Página anterior');
+	});
+});

src/DataTable/types.ts

@@ -223,6 +223,10 @@ export interface PaginationOptions {
 	rangeSeparatorText?: string;
 	selectAllRowsItem?: boolean;
 	selectAllRowsItemText?: string;
+	previousPageLabel?: string;
+	nextPageLabel?: string;
+	firstPageLabel?: string;
+	lastPageLabel?: string;
 }
 
 export interface PaginationServerOptions {

stories/DataTable/pagination/options.mdx

@@ -4,20 +4,28 @@ import { Story, Canvas } from '@storybook/addon-docs';
 
 `paginationComponentOptions`allow you to provide options to the built-in in Pagination component.
 
-| Property              | Type    | Description                                           |
-| --------------------- | ------- | ----------------------------------------------------- |
-| noRowsPerPage         | boolean | hide the rows per page dropdown                       |
-| rowsPerPageText       | string  | change the rows per page text                         |
-| rangeSeparatorText    | string  | change the seperator text e.g. 1 - 10 'of' 100 rows   |
-| selectAllRowsItem     | boolean | show 'All' as an option in the rows per page dropdown |
-| selectAllRowsItemText | string  | change the rows per page text                         |
+| Property              | Type    | Description                                           						|
+| --------------------- | ------- | ----------------------------------------------------------------- |
+| noRowsPerPage         | boolean | hide the rows per page dropdown                       						|
+| rowsPerPageText       | string  | change the rows per page text                         						|
+| rangeSeparatorText    | string  | change the seperator text e.g. 1 - 10 'of' 100 rows   						|
+| selectAllRowsItem     | boolean | show 'All' as an option in the rows per page dropdown 						|
+| selectAllRowsItemText | string  | change the rows per page text                         						|
+| previousPageLabel     | string  | Sets the aria-label for the "previous page" navigation button			|
+| nextPageLabel					| string  | Sets the aria-label for the "next page" navigation button					|
+| firstPageLabel 				| string  | Sets the aria-label for the "first page" navigation button				|
+| lastPageLabel 				| string  | Sets the aria-label for the "last page" navigation button         |
 
 ```js
 const paginationComponentOptions = {
 	rowsPerPageText: 'Filas por página',
 	rangeSeparatorText: 'de',
 	selectAllRowsItem: true,
 	selectAllRowsItemText: 'Todos',
+	previousPageLabel: 'Página anterior',
+	nextPageLabel: 'Página siguiente',
+	firstPageLabel: 'First page',
+	lastPageLabel: 'Dernière page',
 };
 
 function MyComponent() {