YKI(Frontend): Show complete text on desktop and limited text on mobile.

Opetushallitus · Oct 26, 2023 · 3b16908 · 3b16908
1 parent 42bf0a5
commit 3b16908
Showing 1 changed file with 25 additions and 18 deletions.
diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListing.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListing.tsx
@@ -31,25 +31,32 @@ const DisplayedRowsLabel = ({
   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>
+  const { isPhone } = useWindowProperties();
+  const fullLabelText = translateCommon(
+    'component.table.pagination.displayedRowsAriaLabel',
+    {
+      from,
+      to,
+      count,
+    }
   );
+
+  if (isPhone) {
+    return (
+      <>
+        <p className="display-none">{fullLabelText}</p>
+        <p aria-hidden="true">
+          {translateCommon('component.table.pagination.displayedRowsLabel', {
+            from,
+            to,
+            count,
+          })}
+        </p>
+      </>
+    );
+  } else {
+    return fullLabelText;
+  }
 };
 
 export const PublicExamSessionsTable = ({