From 4e75a17916d3f1205d94b855b4b14293680df43d Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 4 Sep 2025 22:18:38 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90(frontend)=20internationalize=20pag?=
 =?UTF-8?q?ination=20controls=20and=20add=20aria=20labels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add internationalization support to pagination controls and include
aria labels for improved accessibility and screen reader support
across different languages.
---
 .../components/controls/PaginationControl.tsx | 58 ++++++++++++++++---
 src/frontend/src/locales/de/rooms.json        |  5 ++
 src/frontend/src/locales/en/rooms.json        |  5 ++
 src/frontend/src/locales/fr/rooms.json        |  5 ++
 src/frontend/src/locales/nl/rooms.json        |  5 ++
 5 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/PaginationControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/PaginationControl.tsx
index 679d8428..8a51dee8 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/PaginationControl.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/PaginationControl.tsx
@@ -2,6 +2,10 @@ import * as React from 'react'
 import { createInteractingObservable } from '@livekit/components-core'
 import { usePagination } from '@livekit/components-react'
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
+import { Button } from '@/primitives'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { css } from '@/styled-system/css'
 
 export interface PaginationControlProps
   extends Pick<
@@ -20,8 +24,10 @@ export function PaginationControl({
   currentPage,
   pagesContainer: connectedElement,
 }: PaginationControlProps) {
-  const [interactive, setInteractive] = React.useState(false)
-  React.useEffect(() => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'pagination' })
+  const [interactive, setInteractive] = useState(false)
+
+  useEffect(() => {
     let subscription:
       | ReturnType<ReturnType<typeof createInteractingObservable>['subscribe']>
       | undefined
@@ -40,16 +46,52 @@ export function PaginationControl({
 
   return (
     <div
-      className="lk-pagination-control"
+      className={css({
+        position: 'absolute',
+        bottom: '1rem',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        alignItems: 'stretch',
+        backgroundColor: 'var(--lk-control-bg)',
+        borderRadius: 'var(--lk-border-radius)',
+        transition: 'opacity ease-in-out .15s',
+        display: 'none',
+        border: '1px solid',
+        borderColor: 'primaryDark.100',
+        overflow: 'hidden',
+      })}
+      style={{
+        display: interactive ? 'flex' : 'none',
+      }}
       data-lk-user-interaction={interactive}
     >
-      <button className="lk-button" onClick={prevPage}>
+      <Button
+        onPress={prevPage}
+        size="xs"
+        variant="quaternaryText"
+        aria-label={t('previous')}
+      >
         <RiArrowLeftSLine />
-      </button>
-      <span className="lk-pagination-count">{`${currentPage} of ${totalPageCount}`}</span>
-      <button className="lk-button" onClick={nextPage}>
+      </Button>
+      <span
+        aria-live="polite"
+        className={css({
+          padding: '0.25rem 0.5rem',
+        })}
+      >
+        {t('count', {
+          currentPage,
+          totalPageCount,
+        })}
+      </span>
+      <Button
+        onPress={nextPage}
+        size="xs"
+        variant="quaternaryText"
+        aria-label={t('next')}
+      >
         <RiArrowRightSLine />
-      </button>
+      </Button>
     </div>
   )
 }
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index f3c4079b..6075f2f5 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -90,6 +90,11 @@
       "pinCode": "Code:"
     }
   },
+  "pagination": {
+    "count": "{{currentPage}} von {{totalPageCount}}",
+    "next": "nächste Seite",
+    "previous": "vorherige Seite"
+  },
   "mediaErrorDialog": {
     "DeviceInUse": {
       "title": {
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 82641b53..45aaefe4 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -90,6 +90,11 @@
       "pinCode": "Code:"
     }
   },
+  "pagination": {
+    "count": "{{currentPage}} of {{totalPageCount}}",
+    "next": "next page",
+    "previous": "previous page"
+  },
   "mediaErrorDialog": {
     "DeviceInUse": {
       "title": {
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 7db0cb37..46052bcc 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -90,6 +90,11 @@
       "pinCode": "Code :"
     }
   },
+  "pagination": {
+    "count": "{{currentPage}} sur {{totalPageCount}}",
+    "next": "page suivante",
+    "previous": "page précédente"
+  },
   "mediaErrorDialog": {
     "DeviceInUse": {
       "title": {
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index db7edbeb..7e76660a 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -90,6 +90,11 @@
       "pinCode": "Code:"
     }
   },
+  "pagination": {
+    "count": "{{currentPage}} van {{totalPageCount}}",
+    "next": "volgende pagina",
+    "previous": "vorige pagina"
+  },
   "mediaErrorDialog": {
     "DeviceInUse": {
       "title": {