Fix primefaces#2827: Paginator accessible buttons (primefaces#2828)

melloware · May 2, 2022 · 4f04f11 · 4f04f11
1 parent 281a993
commit 4f04f11
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) {