Fix primefaces#4563: Paginator fix ARIA for page links (primefaces#4564)

melloware · Jun 28, 2023 · cc7ec96 · cc7ec96
1 parent 62cb776
commit cc7ec96
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/components/lib/api/Locale.js b/components/lib/api/Locale.js
@@ -67,7 +67,7 @@ let locales = {
             moveToSource: 'Move to Source',
             moveAllToTarget: 'Move All to Target',
             moveAllToSource: 'Move All to Source',
-            pageLabel: 'Page',
+            pageLabel: 'Page {page}',
             firstPageLabel: 'First Page',
             lastPageLabel: 'Last Page',
             nextPageLabel: 'Next Page',
@@ -136,13 +136,35 @@ function localeOption(key, locale) {
     }
 }
 
-function ariaLabel(key) {
+/**
+ * Find an ARIA label in the locale by key.  If options are passed it will replace all options:
+ * ```ts
+ * const ariaValue = "Page {page}, User {user}, Role {role}";
+ * const options = { page: 2, user: "John", role: "Admin" };
+ * const result = ariaLabel('yourLabel', { page: 2, user: "John", role: "Admin" })
+ * console.log(result); // Output: Page 2, User John, Role Admin
+ * ```
+ * @param {string} ariaKey key of the ARIA label to look up in locale.
+ * @param {any} options JSON options like { page: 2, user: "John", role: "Admin" }
+ * @returns the ARIA label with replaced values
+ */
+function ariaLabel(ariaKey, options) {
     const _locale = PrimeReact.locale;
 
     try {
-        return localeOptions(_locale)['aria'][key];
+        let ariaLabel = localeOptions(_locale)['aria'][ariaKey];
+
+        if (ariaLabel) {
+            for (const key in options) {
+                if (options.hasOwnProperty(key)) {
+                    ariaLabel = ariaLabel.replace(`{${key}}`, options[key]);
+                }
+            }
+        }
+
+        return ariaLabel;
     } catch (error) {
-        throw new Error(`The ${key} option is not found in the current locale('${_locale}').`);
+        throw new Error(`The ${ariaKey} option is not found in the current locale('${_locale}').`);
     }
 }
 
@@ -152,4 +174,4 @@ function localeOptions(locale) {
     return locales[_locale];
 }
 
-export { locale, addLocale, updateLocaleOption, updateLocaleOptions, localeOption, localeOptions, ariaLabel };
+export { addLocale, ariaLabel, locale, localeOption, localeOptions, updateLocaleOption, updateLocaleOptions };
diff --git a/components/lib/paginator/PageLinks.js b/components/lib/paginator/PageLinks.js
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { ariaLabel } from '../api/Api';
+import { ariaLabel, PrimeReactContext } from '../api/Api';
 import { Ripple } from '../ripple/Ripple';
 import { classNames, mergeProps, ObjectUtils } from '../utils/Utils';
 import { PageLinksBase } from './PaginatorBase';
-import { PrimeReactContext } from '../api/Api';
 
 export const PageLinks = React.memo((inProps) => {
     const context = React.useContext(PrimeReactContext);
@@ -47,7 +46,7 @@ export const PageLinks = React.memo((inProps) => {
                     onClick: (e) => onPageLinkClick(e, pageLink),
                     className,
                     disabled: props.disabled,
-                    'aria-label': ariaLabel('pageLabel', { page: pageLink + 1 })
+                    'aria-label': ariaLabel('pageLabel', { page: pageLink })
                 },
                 getPTOptions(pageLink, 'pageButton')
             );