feat: live region for pagination limit

Author: glad-adyen

src/components/internal/Pagination/Pagination.tsx

@@ -51,6 +51,9 @@ export default function Pagination({ next, hasNext, hasPrev, prev, limit, limitO
                         />
                     </div>
                 )}
+                <div className="adyen-pe-visually-hidden" aria-atomic="true" aria-live={limit ? 'polite' : 'off'}>
+                    {limit && i18n.get('pagination.showing.notice', { values: { limit } })}
+                </div>
             </div>
 
             <div className="adyen-pe-pagination__controls">

src/translations/en-US.instructions.json

@@ -185,6 +185,7 @@
     "inputError.veryLargeFile": "Will be displayed as input validation error message if at least one uploaded file is of a size larger than the maximum allowed file size.",
     "noReportsFound": "Will be displayed if there is no reports data available for the given search criteria.",
     "pagination.showing": "Will be displayed to inform the user of the maximum number of records that can be shown for each page. The %{limit} placeholder should be taken to be a number.",
+    "pagination.showing.notice": "Will be announced to inform the user of the maximum number of records that can be shown for each page. The %{limit} placeholder should be taken to be a number.",
     "payoutsNotice": "The preparation of payout information happens at midnight (12:00 AM) in UTC timezone. Payout, in this context, refers to a user's money that gets paid into their designated bank account. UTC here refers to the Coordinated Universal Time, which is the reference origin (0) for other timezones.",
     "refundActionErrorSubtitle": "Will be displayed as subtitle if there is an error on refund action.",
     "refundActionErrorTitle": "Will be displayed as a title if there is an error on refund action.",

src/translations/en-US.json

@@ -653,6 +653,7 @@
     "pagination.nextPage": "Next page",
     "pagination.previousPage": "Previous page",
     "pagination.showing": "Showing %{limit}",
+    "pagination.showing.notice": "Showing %{limit} records per page",
     "partial": "Partial",
     "paymentId": "Payment ID",
     "paymentMethod": "Payment method",