YKI(Frontend): Make pagination displayed rows label more mobile friendly

Opetushallitus · Oct 26, 2023 · b4365a1 · b4365a1
1 parent fb9e894
commit b4365a1
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 17 deletions.
diff --git a/frontend/packages/yki/public/i18n/en-GB/common.json b/frontend/packages/yki/public/i18n/en-GB/common.json
@@ -17,7 +17,8 @@
           },
           "pagination": {
             "backButtonLabel": "Previous search results",
-            "displayedRowsLabel": "Showing {{from}}-{{to}} / {{count}} results",
+            "displayedRowsAriaLabel": "Showing {{from}}-{{to}} / {{count}} results",
+            "displayedRowsLabel": "{{from}}-{{to}} / {{count}}",
             "nextButtonLabel": "Next search results",
             "rowsPerPage": "Results per page"
           }

diff --git a/frontend/packages/yki/public/i18n/fi-FI/common.json b/frontend/packages/yki/public/i18n/fi-FI/common.json
@@ -17,7 +17,8 @@
           },
           "pagination": {
             "backButtonLabel": "Edelliset hakutulokset",
-            "displayedRowsLabel": "Näytetään {{from}}-{{to}} / {{count}} tulosta",
+            "displayedRowsAriaLabel": "Näytetään {{from}}-{{to}} / {{count}} tulosta",
+            "displayedRowsLabel": "{{from}}-{{to}} / {{count}}",
             "nextButtonLabel": "Seuraavat hakutulokset",
             "rowsPerPage": "Tulokset per sivu"
           }

diff --git a/frontend/packages/yki/public/i18n/sv-SE/common.json b/frontend/packages/yki/public/i18n/sv-SE/common.json
@@ -17,7 +17,8 @@
           },
           "pagination": {
             "backButtonLabel": "Tidigare sökresultat",
-            "displayedRowsLabel": "Visas {{from}}-{{to}} / {{count}} resultat",
+            "displayedRowsAriaLabel": "Visas {{from}}-{{to}} / {{count}} resultat",
+            "displayedRowsLabel": "{{from}}-{{to}} / {{count}}",
             "nextButtonLabel": "Följande sökresultat",
             "rowsPerPage": "Resultat per sida"
           }

diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListing.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListing.tsx
@@ -1,6 +1,4 @@
-import { LabelDisplayedRowsArgs } from '@mui/material/TablePagination';
 import { Box } from '@mui/system';
-import { TFunction } from 'i18next';
 import { useEffect, useRef } from 'react';
 import {
   CustomCircularProgress,
@@ -22,15 +20,35 @@ const getRowDetails = (examSession: ExamSession) => {
   return <PublicExamSessionListingRow examSession={examSession} />;
 };
 
-const getDisplayedRowsLabel = (
-  t: TFunction,
-  { from, to, count }: LabelDisplayedRowsArgs
-) => {
-  return t('component.table.pagination.displayedRowsLabel', {
-    from,
-    to,
-    count,
-  });
+const DisplayedRowsLabel = ({
+  from,
+  to,
+  count,
+}: {
+  from: number;
+  to: number;
+  count: number;
+}) => {
+  const translateCommon = useCommonTranslation();
+
+  return (
+    <p
+      aria-label={translateCommon(
+        'component.table.pagination.displayedRowsAriaLabel',
+        {
+          from,
+          to,
+          count,
+        }
+      )}
+    >
+      {translateCommon('component.table.pagination.displayedRowsLabel', {
+        from,
+        to,
+        count,
+      })}
+    </p>
+  );
 };
 
 export const PublicExamSessionsTable = ({
@@ -64,9 +82,9 @@ export const PublicExamSessionsTable = ({
       rowsPerPageLabel={translateCommon(
         'component.table.pagination.rowsPerPage'
       )}
-      labelDisplayedRows={(args) =>
-        getDisplayedRowsLabel(translateCommon, args)
-      }
+      labelDisplayedRows={({ from, to, count }) => (
+        <DisplayedRowsLabel from={from} to={to} count={count} />
+      )}
       backIconButtonProps={TableUtils.getPaginationBackButtonProps()}
       nextIconButtonProps={TableUtils.getPaginationNextButtonProps()}
       stickyHeader