🌐(frontend) internationalize pagination controls and add aria labels

Add internationalization support to pagination controls and include
aria labels for improved accessibility and screen reader support
across different languages.

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>
   )
 }

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": {

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": {

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": {

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": {