From 4f04f11cd90d425e69adca4b700645893426d535 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 2 May 2022 11:17:22 -0400
Subject: [PATCH] Fix #2827: Paginator accessible buttons (#2828)

---
 components/lib/api/Locale.js              | 2 ++
 components/lib/paginator/FirstPageLink.js | 8 +++-----
 components/lib/paginator/LastPageLink.js  | 8 +++-----
 components/lib/paginator/NextPageLink.js  | 8 +++-----
 components/lib/paginator/PageLinks.js     | 8 ++++----
 components/lib/paginator/PrevPageLink.js  | 8 +++-----
 6 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/components/lib/api/Locale.js b/components/lib/api/Locale.js
index 2496c40c00..ea2451583c 100644
--- a/components/lib/api/Locale.js
+++ b/components/lib/api/Locale.js
@@ -49,6 +49,8 @@ let locales = {
             falseLabel: 'False',
             nullLabel: 'Not Selected',
             pageLabel: 'Page',
+            firstPageLabel: 'First Page',
+            lastPageLabel: 'Last Page',
             nextPageLabel: 'Next Page',
             previousPageLabel: 'Previous Page'
         }
diff --git a/components/lib/paginator/FirstPageLink.js b/components/lib/paginator/FirstPageLink.js
index 9e91e327a5..2ec945b712 100644
--- a/components/lib/paginator/FirstPageLink.js
+++ b/components/lib/paginator/FirstPageLink.js
@@ -1,15 +1,13 @@
 import * as React from 'react';
-import { Ripple } from '../ripple/Ripple';
+import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const FirstPageLink = React.memo((props) => {
     const className = classNames('p-paginator-first p-paginator-element p-link', { 'p-disabled': props.disabled });
     const iconClassName = 'p-paginator-icon pi pi-angle-double-left';
     const element = (
-        <button type="button" className={className} onClick={props.onClick} disabled={props.disabled}>
-            <span className={iconClassName}></span>
-            <Ripple />
-        </button>
+        <Button className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('firstPageLabel')}/>
     );
 
     if (props.template) {
diff --git a/components/lib/paginator/LastPageLink.js b/components/lib/paginator/LastPageLink.js
index 6a01e32b72..1357709a30 100644
--- a/components/lib/paginator/LastPageLink.js
+++ b/components/lib/paginator/LastPageLink.js
@@ -1,15 +1,13 @@
 import * as React from 'react';
-import { Ripple } from '../ripple/Ripple';
+import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const LastPageLink = React.memo((props) => {
     const className = classNames('p-paginator-last p-paginator-element p-link', { 'p-disabled': props.disabled });
     const iconClassName = 'p-paginator-icon pi pi-angle-double-right';
     const element = (
-        <button type="button" className={className} onClick={props.onClick} disabled={props.disabled}>
-            <span className={iconClassName}></span>
-            <Ripple />
-        </button>
+        <Button className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('lastPageLabel')}/>
     );
 
     if (props.template) {
diff --git a/components/lib/paginator/NextPageLink.js b/components/lib/paginator/NextPageLink.js
index b36bdab59b..b49a7b50dd 100644
--- a/components/lib/paginator/NextPageLink.js
+++ b/components/lib/paginator/NextPageLink.js
@@ -1,15 +1,13 @@
 import * as React from 'react';
-import { Ripple } from '../ripple/Ripple';
+import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const NextPageLink = React.memo((props) => {
     const className = classNames('p-paginator-next p-paginator-element p-link', { 'p-disabled': props.disabled });
     const iconClassName = 'p-paginator-icon pi pi-angle-right';
     const element = (
-        <button type="button" className={className} onClick={props.onClick} disabled={props.disabled}>
-            <span className={iconClassName}></span>
-            <Ripple />
-        </button>
+        <Button className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('nextPageLabel')}/>
     );
 
     if (props.template) {
diff --git a/components/lib/paginator/PageLinks.js b/components/lib/paginator/PageLinks.js
index b63ac9bd12..1e6ad0271d 100644
--- a/components/lib/paginator/PageLinks.js
+++ b/components/lib/paginator/PageLinks.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Ripple } from '../ripple/Ripple';
+import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const PageLinks = React.memo((props) => {
@@ -29,10 +30,9 @@ export const PageLinks = React.memo((props) => {
             });
 
             let element = (
-                <button type="button" className={className} onClick={(e) => onPageLinkClick(e, pageLink)}>
+                <Button className={className} onClick={(e) => onPageLinkClick(e, pageLink)} aria-label={`${ariaLabel('pageLabel')} ${pageLink + 1}`}>
                     {pageLink}
-                    <Ripple />
-                </button>
+                </Button>
             );
 
             if (props.template) {
diff --git a/components/lib/paginator/PrevPageLink.js b/components/lib/paginator/PrevPageLink.js
index 2e28fe7285..8a3545e3ab 100644
--- a/components/lib/paginator/PrevPageLink.js
+++ b/components/lib/paginator/PrevPageLink.js
@@ -1,15 +1,13 @@
 import * as React from 'react';
-import { Ripple } from '../ripple/Ripple';
+import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const PrevPageLink = React.memo((props) => {
     const className = classNames('p-paginator-prev p-paginator-element p-link', { 'p-disabled': props.disabled });
     const iconClassName = 'p-paginator-icon pi pi-angle-left';
     const element = (
-        <button type="button" className={className} onClick={props.onClick} disabled={props.disabled}>
-            <span className={iconClassName}></span>
-            <Ripple />
-        </button>
+        <Button className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('previousPageLabel')}/>
     );
 
     if (props.template) {