Merge pull request #5764 from ilzamcmed/LPD-17368

LPD-17368 Accessibility issue in Pagination Picker
liferay · Feb 19, 2024 · 09ecafc · 09ecafc
2 parents 7dae7b1 + 74f3f21
commit 09ecafc
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/packages/clay-pagination-bar/src/PaginationBarWithBasicItems.tsx b/packages/clay-pagination-bar/src/PaginationBarWithBasicItems.tsx
@@ -105,6 +105,8 @@ interface IProps extends React.ComponentProps<typeof PaginationBar> {
 	 * Use this property for i18n.
 	 */
 	labels?: {
+		itemsPerPagePickerAriaLabel?: string;
+
 		paginationResults: string;
 
 		perPageItems: string;
@@ -148,6 +150,7 @@ interface IProps extends React.ComponentProps<typeof PaginationBar> {
 }
 
 const DEFAULT_LABELS = {
+	itemsPerPagePickerAriaLabel: 'Items Per Page',
 	paginationResults: 'Showing {0} to {1} of {2}',
 	perPageItems: '{0} items',
 	selectPerPageItems: '{0} items',
@@ -209,6 +212,8 @@ export const ClayPaginationBarWithBasicItems = ({
 		value: typeof active === 'undefined' ? activePage : active,
 	});
 
+	labels = {...DEFAULT_LABELS, ...labels};
+
 	if (!activeDelta) {
 		activeDelta = deltas[0]!.label;
 	}
@@ -230,6 +235,7 @@ export const ClayPaginationBarWithBasicItems = ({
 					<Picker
 						activeDelta={activeDelta}
 						aria-describedby={ariaDescribedby}
+						aria-label={labels.itemsPerPagePickerAriaLabel}
 						as={Trigger}
 						items={deltas}
 						labels={labels}

diff --git a/packages/clay-pagination-bar/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-pagination-bar/src/__tests__/__snapshots__/index.tsx.snap
@@ -13,6 +13,7 @@ exports[`ClayPaginationBar renders 1`] = `
         aria-describedby="clay-id-1"
         aria-expanded="false"
         aria-haspopup="listbox"
+        aria-label="Items Per Page"
         class="dropdown-toggle btn btn-unstyled"
         role="combobox"
         tabindex="0"