Fix primefaces#1432: Carousel accessible buttons

melloware · May 2, 2022 · e330ffd · e330ffd
1 parent 91875ae
commit e330ffd
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 14 deletions.
diff --git a/components/lib/api/Locale.js b/components/lib/api/Locale.js
@@ -47,7 +47,10 @@ let locales = {
         aria: {
             trueLabel: 'True',
             falseLabel: 'False',
-            nullLabel: 'Not Selected'
+            nullLabel: 'Not Selected',
+            pageLabel: 'Page',
+            nextPageLabel: 'Next Page',
+            previousPageLabel: 'Previous Page'
         }
     }
 };

diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
@@ -53,7 +53,7 @@ export const Button = React.memo(React.forwardRef((props, ref) => {
     const icon = createIcon();
     const label = createLabel();
     const badge = createBadge();
-    const defaultAriaLabel = (props.label ? props.label + (props.badge ? ' ' + props.badge : '') : '');
+    const defaultAriaLabel = (props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label']);
 
     return (
         <>

diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import PrimeReact from '../api/Api';
+import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
 import { useMountEffect, usePrevious, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
-import { Ripple } from '../ripple/Ripple';
 import { classNames, DomHandler, ObjectUtils, UniqueComponentId } from '../utils/Utils';
 
 const CarouselItem = React.memo((props) => {
@@ -486,10 +487,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
         });
 
         return (
-            <button type="button" className={className} onClick={navBackward} disabled={isDisabled}>
-                <span className={iconClassName}></span>
-                <Ripple />
-            </button>
+            <Button className={className} icon={iconClassName} onClick={navBackward} disabled={isDisabled} aria-label={ariaLabel('previousPageLabel')} />
         )
     }
 
@@ -504,10 +502,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
         });
 
         return (
-            <button type="button" className={className} onClick={navForward} disabled={isDisabled}>
-                <span className={iconClassName}></span>
-                <Ripple />
-            </button>
+            <Button className={className} icon={iconClassName} onClick={navForward} disabled={isDisabled} aria-label={ariaLabel('nextPageLabel')} />
         )
     }
 
@@ -520,9 +515,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
 
         return (
             <li key={key} className={className}>
-                <button type="button" className="p-link" onClick={(e) => onDotClick(e, index)}>
-                    <Ripple />
-                </button>
+                <Button className="p-link" onClick={(e) => onDotClick(e, index)} aria-label={`${ariaLabel('pageLabel')} ${index + 1}`} />
             </li>
         )
     }