🐛(frontend) let panel shortcuts close panels opened from a menu

allow menu-invoked panels to be closed by panel shortcuts
fixup! ♿️(frontend) make participant pagination readable and keyboard reachable
2026-10-05 13:01:37 +00:00 · 2026-10-05 14:35:12 +02:00 · 2026-10-05 14:35:02 +02:00 · 2026-10-05 14:13:50 +02:00 · 2026-10-05 14:06:02 +02:00
21 changed files with 158 additions and 575 deletions
@@ -88,8 +88,6 @@ jobs:
    steps:
      - name: Checkout repository
        uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6.1.0
-        with:
-          persist-credentials: false

      - name: Create writable /data
        run: |
@@ -161,8 +159,6 @@ jobs:
    steps:
      - name: Checkout repository
        uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6.1.0
-        with:
-          persist-credentials: false

      - name: Install ffmpeg
        run: |
@@ -190,8 +186,6 @@ jobs:
    steps:
      - name: Checkout repository
        uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6.1.0
-        with:
-          persist-credentials: false

      - name: Install dependencies
        run: cd src/frontend/ && npm ci --ignore-scripts
@@ -202,27 +196,6 @@ jobs:
      - name: Check format
        run: cd src/frontend/ && npm run check

-  test-front:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6.1.0
-        with:
-          persist-credentials: false
-
-      - name: Install Node.js
-        uses: actions/setup-node@249970729cb0ef3589644e2896645e5dc5ba9c38 # v6.5.0
-        with:
-          node-version: "24"
-
-      - name: Install dependencies
-        run: cd src/frontend/ && npm ci --ignore-scripts
-
-      - name: Run tests
-        run: cd src/frontend/ && npm test
-
  lint-sdk:
    runs-on: ubuntu-latest
    permissions:
@@ -233,8 +206,6 @@ jobs:
    steps:
      - name: Checkout repository
        uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6.1.0
-        with:
-          persist-credentials: false

      - name: Install dependencies
        run: npm ci --ignore-scripts
@@ -256,8 +227,6 @@ jobs:
    steps:
      - name: Checkout repository
        uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6.1.0
-        with:
-          persist-credentials: false

      - name: Install dependencies
        run: npm ci --ignore-scripts
@@ -16,7 +16,7 @@ and this project adheres to
 - 🔧(summary) add setting to control Sentry traces sampling rate
 - ✨(frontend) let signed-out visitors start a meeting
 - ✨(backend) expose `allow_unregistered_rooms` in the frontend configuration
- ✅(frontend) add vitest so the frontend can carry unit tests
+- ♿️(frontend) make participant pagination readable and keyboard reachable #1775

 ### Changed

@@ -94,7 +94,7 @@ and this project adheres to

 ### Fixed

- 🐛(helm) probe liveness on __lbheartbeat__ and readiness on __heartbeat__
+- 🐛(helm) probe liveness on **lbheartbeat** and readiness on **heartbeat**
 - 🐛(helm) render periodSeconds and failureThreshold on probes
 - 🐛(backend) report the app release to Sentry instead of "NA"
 - 🐛(frontend) play the waiting room notification sound on every arrival
@@ -166,6 +166,7 @@ and this project adheres to
 ### Added

 - ✨(any) let any authenticated user manage the lobby on trusted rooms
+
 ### Changed

 - 📱(frontend) collapse mobile control bar items on narrow viewports
@@ -260,8 +260,7 @@ lint-pylint: ## lint back-end python sources with pylint only on changed files f
 test: ## run project tests; pass extra pytest args via ARGS, e.g. `make test ARGS="-vv"`
 	@args="$(ARGS) $(filter-out $@,$(MAKECMDGOALS))" && \
 	$(MAKE) test-back-parallel ARGS="$${args}" && \
-	$(MAKE) test-summary ARGS="$${args}" && \
-	$(MAKE) test-frontend
+	$(MAKE) test-summary ARGS="$${args}"
 .PHONY: test

 test-back: ## run back-end tests (pass extra pytest args via ARGS)
@@ -279,10 +278,6 @@ test-summary: ## run summary tests (pass extra pytest args via ARGS)
 	bin/pytest-summary $${args}
 .PHONY: test-summary

-test-frontend: ## run the frontend unit tests
-	cd $(PATH_FRONT) && npm test
-.PHONY: test-frontend
-
 makemigrations:  ## run django makemigrations for the Meet project.
 	@echo "$(BOLD)Running makemigrations$(RESET)"
 	@$(COMPOSE) up -d postgresql
@@ -64,8 +64,7 @@
        "typescript-eslint": "8.60.1",
        "vite": "8.0.14",
        "vite-plugin-static-copy": "4.1.1",
-        "vite-plugin-svgr": "5.2.0",
-        "vitest": "5.0.2"
+        "vite-plugin-svgr": "5.2.0"
      }
    },
    "node_modules/@adobe/react-spectrum": {
@@ -943,9 +942,9 @@
      }
    },
    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
-      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
      "dev": true,
      "license": "MIT"
    },
@@ -2507,24 +2506,6 @@
        "tslib": "^2.4.0"
      }
    },
-    "node_modules/@types/chai": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
-      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/deep-eql": "*",
-        "assertion-error": "^2.0.1"
-      }
-    },
-    "node_modules/@types/deep-eql": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
-      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/@types/dom-mediacapture-record": {
      "version": "1.0.22",
      "resolved": "https://registry.npmjs.org/@types/dom-mediacapture-record/-/dom-mediacapture-record-1.0.22.tgz",
@@ -2805,64 +2786,6 @@
        }
      }
    },
-    "node_modules/@vitest/mocker": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-5.0.2.tgz",
-      "integrity": "sha512-Z5FS00Q1SJHkB35xATsmWGdQ5WA1/0MV3CDjqyv7GavHv1OfOj145MNfHOlHk7QLes21dKFDHr8EO2zvL+9WGA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/trace-mapping": "0.3.31",
-        "@vitest/spy": "5.0.2",
-        "estree-walker": "^3.0.3",
-        "magic-string": "^1.2.3"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      },
-      "peerDependencies": {
-        "msw": "^2.4.9",
-        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "msw": {
-          "optional": true
-        },
-        "vite": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vitest/mocker/node_modules/estree-walker": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0"
-      }
-    },
-    "node_modules/@vitest/mocker/node_modules/magic-string": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.4.2.tgz",
-      "integrity": "sha512-vG+rjFRj1PqdIBozIxAGMjPlOhaVe+GXpbttY/iSK7rGcJRMlwNJO7dcUwmUqkymsFLJiNGI06t4D7Fr7yRC9g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.6.0"
-      }
-    },
-    "node_modules/@vitest/spy": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-5.0.2.tgz",
-      "integrity": "sha512-Ijc7T1nT9efNb5LxvjaBrEqw3f/QwUv5EE0nKqZxgqsaV/FxAAZ8baGylA8X/Z2oS4Lp+K74Jr6dTJsDKxJDeg==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
    "node_modules/@vue/compiler-core": {
      "version": "3.5.25",
      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.25.tgz",
@@ -3228,16 +3151,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/assertion-error": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
-      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      }
-    },
    "node_modules/ast-types-flow": {
      "version": "0.0.8",
      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -4217,16 +4130,6 @@
      ],
      "license": "CC-BY-4.0"
    },
-    "node_modules/chai": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
-      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
    "node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -5127,13 +5030,6 @@
        "node": ">= 0.4"
      }
    },
-    "node_modules/es-module-lexer": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.2.tgz",
-      "integrity": "sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/es-object-atoms": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -5636,16 +5532,6 @@
        "node": ">=18.0.0"
      }
    },
-    "node_modules/expect-type": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
-      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
    "node_modules/express": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
@@ -8761,20 +8647,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/obug": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/obug/-/obug-2.2.1.tgz",
-      "integrity": "sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==",
-      "dev": true,
-      "funding": [
-        "https://github.com/sponsors/sxzz",
-        "https://opencollective.com/debug"
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.20.0"
-      }
-    },
    "node_modules/on-finished": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -10348,13 +10220,6 @@
        "node": ">= 0.8"
      }
    },
-    "node_modules/std-env": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.3.0.tgz",
-      "integrity": "sha512-OtU/EgQ1kIm5KwqQpBC6ZEMXrZRui11w8zgfTWp8cdO9B8OaPsbA8bTHO2P+HNo1VlUTGMVBwPhydu6poeXiag==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/stop-iteration-iterator": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -10661,26 +10526,6 @@
        "xtend": "~4.0.1"
      }
    },
-    "node_modules/tinybench": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-6.2.0.tgz",
-      "integrity": "sha512-78U2TlB2CnVenajOFzf3BKSm0J6oz5L0NV7g32LCPccvYc0lbWvys4d3uUUCS2B1N8PAf2+aekR8i1KbC3HO7Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/tinyexec": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.1.tgz",
-      "integrity": "sha512-GCvB3aoys96IuDFBMcTB46JOR6mdMtAToqwiW8JlWhsoh1mhHi/xn9ss/Dg7N555GiJyEt2qzoG/NHCwM6h1EA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
    "node_modules/tinyglobby": {
      "version": "0.2.17",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -11765,112 +11610,6 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
-    "node_modules/vitest": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-5.0.2.tgz",
-      "integrity": "sha512-7MQrx9pDv5aHiUcovIb/70Ys3tgtkUVgCtledvKdCmEO+/1Dicq5ZqoSxOW034m03oqC+oHOKui2dM6qtMLoJg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/chai": "^5.2.2",
-        "@vitest/mocker": "5.0.2",
-        "chai": "^6.2.2",
-        "es-module-lexer": "^2.3.2",
-        "expect-type": "^1.4.0",
-        "magic-string": "^1.2.3",
-        "obug": "^2.1.4",
-        "picomatch": "^4.0.7",
-        "std-env": "^4.2.0",
-        "tinybench": "^6.1.4",
-        "tinyexec": "^1.3.0",
-        "tinyglobby": "^0.2.17",
-        "why-is-node-running": "^3.2.1"
-      },
-      "bin": {
-        "vitest": "vitest.mjs"
-      },
-      "engines": {
-        "node": "^22.12.0 || ^24.0.0 || >=26.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      },
-      "peerDependencies": {
-        "@edge-runtime/vm": "*",
-        "@opentelemetry/api": "^1.9.0",
-        "@types/node": "^22.0.0 || >=24.0.0",
-        "@vitest/browser-playwright": "5.0.2",
-        "@vitest/browser-preview": "5.0.2",
-        "@vitest/browser-webdriverio": "^5.0.0-beta.5 || >=5.0.0",
-        "@vitest/coverage-istanbul": "5.0.2",
-        "@vitest/coverage-v8": "5.0.2",
-        "@vitest/ui": "5.0.2",
-        "happy-dom": "*",
-        "jsdom": "*",
-        "vite": "^6.4.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@edge-runtime/vm": {
-          "optional": true
-        },
-        "@opentelemetry/api": {
-          "optional": true
-        },
-        "@types/node": {
-          "optional": true
-        },
-        "@vitest/browser-playwright": {
-          "optional": true
-        },
-        "@vitest/browser-preview": {
-          "optional": true
-        },
-        "@vitest/browser-webdriverio": {
-          "optional": true
-        },
-        "@vitest/coverage-istanbul": {
-          "optional": true
-        },
-        "@vitest/coverage-v8": {
-          "optional": true
-        },
-        "@vitest/ui": {
-          "optional": true
-        },
-        "happy-dom": {
-          "optional": true
-        },
-        "jsdom": {
-          "optional": true
-        },
-        "vite": {
-          "optional": false
-        }
-      }
-    },
-    "node_modules/vitest/node_modules/magic-string": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.4.2.tgz",
-      "integrity": "sha512-vG+rjFRj1PqdIBozIxAGMjPlOhaVe+GXpbttY/iSK7rGcJRMlwNJO7dcUwmUqkymsFLJiNGI06t4D7Fr7yRC9g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.6.0"
-      }
-    },
-    "node_modules/vitest/node_modules/picomatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
-      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
    "node_modules/walk-sync": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-2.2.0.tgz",
@@ -12055,19 +11794,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/why-is-node-running": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-3.2.2.tgz",
-      "integrity": "sha512-NKUzAelcoCXhXL4dJzKIwXeR8iEVqsA0Lq6Vnd0UXvgaKbzVo4ZTHROF2Jidrv+SgxOQ03fMinnNhzZATxOD3A==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "why-is-node-running": "cli.js"
-      },
-      "engines": {
-        "node": ">=20.11"
-      }
-    },
    "node_modules/word-wrap": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -7,7 +7,6 @@
    "dev": "panda codegen && vite",
    "build": "panda codegen && tsc -b && vite build",
    "build:debug": "VITE_ANALYZE=true npm run build -- --debug",
-    "test": "panda codegen && vitest run",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "eslint . --fix",
    "preview": "vite preview",
@@ -72,7 +71,6 @@
    "typescript-eslint": "8.60.1",
    "vite": "8.0.14",
    "vite-plugin-static-copy": "4.1.1",
-    "vite-plugin-svgr": "5.2.0",
-    "vitest": "5.0.2"
+    "vite-plugin-svgr": "5.2.0"
  }
 }
@@ -7,7 +7,6 @@ import {
  useSwipe,
 } from '@livekit/components-react'
 import { mergeProps } from '@/utils/mergeProps'
-import { PaginationIndicator } from './PaginationIndicator'
 import { useGridLayout } from '../hooks/useGridLayout'
 import { PaginationControl } from './PaginationControl'
 import { useSpeakerPromotionTrigger } from '../hooks/useSpeakerPromotionTrigger'
@@ -62,13 +61,7 @@ export function GridLayout({ tracks, ...props }: GridLayoutProps) {
    >
      <TrackLoop tracks={pagination.tracks}>{props.children}</TrackLoop>
      {tracks.length > layout.maxTiles && (
-        <>
-          <PaginationIndicator
-            totalPageCount={pagination.totalPageCount}
-            currentPage={pagination.currentPage}
-          />
-          <PaginationControl pagesContainer={gridEl} {...pagination} />
-        </>
+        <PaginationControl {...pagination} focusShortcut />
      )}
    </div>
  )
@@ -1,99 +1,147 @@
-import * as React from 'react'
-import { createInteractingObservable } from '@livekit/components-core'
 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'
+import { css, cva, type RecipeVariantProps } from '@/styled-system/css'
+import { useCallback, useRef } from 'react'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'

-export interface PaginationControlProps {
+const paginationToolbar = cva({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.125rem',
+    backgroundColor: 'primaryDark.50',
+    borderRadius: '2rem',
+    border: '1px solid',
+    borderColor: 'primaryDark.200',
+    padding: '0.375rem',
+  },
+  variants: {
+    placement: {
+      overlay: {
+        position: 'absolute',
+        bottom: '1rem',
+        left: '50%',
+        zIndex: 2,
+        transform: 'translateX(-50%)',
+        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.45)',
+      },
+      inline: {
+        alignSelf: 'center',
+        flexShrink: 0,
+        marginTop: '1rem',
+      },
+    },
+  },
+  defaultVariants: {
+    placement: 'overlay',
+  },
+})
+
+export type PaginationControlProps = RecipeVariantProps<
+  typeof paginationToolbar
+> & {
  totalPageCount: number
  nextPage: () => void
  prevPage: () => void
  currentPage: number
-  pagesContainer?: React.RefObject<HTMLElement>
+  // The shortcut listens on the main window only, so a single instance may own it.
+  focusShortcut?: boolean
 }

+const arrowButtonClass = css({
+  _disabled: {
+    cursor: 'default',
+    backgroundColor: 'transparent !important',
+    '& svg': {
+      opacity: 0.35,
+    },
+    _focusVisible: {
+      outline: '2px solid',
+      outlineColor: 'focusRing',
+      outlineOffset: '2px',
+    },
+  },
+})
+
 export function PaginationControl({
  totalPageCount,
  nextPage,
  prevPage,
  currentPage,
-  pagesContainer: connectedElement,
+  placement,
+  focusShortcut = false,
 }: PaginationControlProps) {
  const { t } = useTranslation('rooms', { keyPrefix: 'pagination' })
-  const [interactive, setInteractive] = useState(false)
+  const prevButtonRef = useRef<HTMLButtonElement>(null)
+  const nextButtonRef = useRef<HTMLButtonElement>(null)
+  const isSinglePage = totalPageCount <= 1
+  const isFirstPage = currentPage <= 1
+  const isLastPage = currentPage >= totalPageCount

-  useEffect(() => {
-    let subscription:
-      | ReturnType<ReturnType<typeof createInteractingObservable>['subscribe']>
-      | undefined
-    if (connectedElement) {
-      subscription = createInteractingObservable(
-        connectedElement.current,
-        2000
-      ).subscribe(setInteractive)
-    }
-    return () => {
-      if (subscription) {
-        subscription.unsubscribe()
-      }
-    }
-  }, [connectedElement])
+  const focusPagination = useCallback(() => {
+    const target = isLastPage ? prevButtonRef.current : nextButtonRef.current
+    target?.focus()
+  }, [isLastPage])

-  if (totalPageCount <= 1) return null
+  useRegisterKeyboardShortcut({
+    id: focusShortcut ? 'focus-pagination' : undefined,
+    handler: focusPagination,
+    isDisabled: isSinglePage,
+    unregisterOnUnmount: true,
+  })
+
+  if (isSinglePage) return null
+
+  const pageCount = t('count', { currentPage, totalPageCount })

  return (
-    <nav
-      aria-label={t('label')}
-      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}
+    <div
+      role="group"
+      aria-label={`${t('label')}, ${pageCount}`}
+      className={paginationToolbar({ placement })}
    >
      <Button
-        isDisabled={currentPage == 1}
-        onPress={prevPage}
-        size="xs"
-        variant="quaternaryText"
+        ref={prevButtonRef}
+        aria-disabled={isFirstPage}
+        onPress={isFirstPage ? undefined : prevPage}
+        size="sm"
+        square
+        variant="primaryTextDark"
+        className={arrowButtonClass}
        aria-label={t('previous')}
+        tooltip={t('previous')}
      >
-        <RiArrowLeftSLine />
+        <RiArrowLeftSLine size={20} />
      </Button>
      <span
        role="status"
        className={css({
-          padding: '0.25rem 0.5rem',
+          color: 'white',
+          fontSize: '0.8125rem',
+          fontWeight: 500,
+          minWidth: '3.5rem',
+          textAlign: 'center',
+          userSelect: 'none',
+          padding: '0 0.35rem',
+          whiteSpace: 'nowrap',
        })}
      >
-        {t('count', {
-          currentPage,
-          totalPageCount,
-        })}
+        {pageCount}
      </span>
      <Button
-        isDisabled={currentPage == totalPageCount}
-        onPress={nextPage}
-        size="xs"
-        variant="quaternaryText"
+        ref={nextButtonRef}
+        aria-disabled={isLastPage}
+        onPress={isLastPage ? undefined : nextPage}
+        size="sm"
+        square
+        variant="primaryTextDark"
+        className={arrowButtonClass}
        aria-label={t('next')}
+        tooltip={t('next')}
      >
-        <RiArrowRightSLine />
+        <RiArrowRightSLine size={20} />
      </Button>
-    </nav>
+    </div>
  )
 }
@@ -1,30 +0,0 @@
-import * as React from 'react'
-
-export interface PaginationIndicatorProps {
-  totalPageCount: number
-  currentPage: number
-}
-
-export const PaginationIndicator: (
-  props: PaginationIndicatorProps & React.RefAttributes<HTMLDivElement>
-) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
-  HTMLDivElement,
-  PaginationIndicatorProps
->(function PaginationIndicator(
-  { totalPageCount, currentPage }: PaginationIndicatorProps,
-  ref
-) {
-  const bubbles = new Array(totalPageCount).fill('').map((_, index) => {
-    if (index + 1 === currentPage) {
-      return <span data-lk-active key={index} />
-    } else {
-      return <span key={index} />
-    }
-  })
-
-  return (
-    <div ref={ref} className="lk-pagination-indicator" aria-hidden="true">
-      {bubbles}
-    </div>
-  )
-})
@@ -1,96 +0,0 @@
-import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { styled } from '@/styled-system/jsx'
-
-interface PipPaginationProps {
-  totalPageCount: number
-  currentPage: number
-  nextPage: () => void
-  prevPage: () => void
-}
-
-export const PipPagination = ({
-  totalPageCount,
-  currentPage,
-  nextPage,
-  prevPage,
-}: PipPaginationProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'pagination' })
-
-  if (totalPageCount <= 1) return null
-
-  return (
-    <Nav aria-label={t('label')}>
-      <ArrowButton
-        type="button"
-        onClick={prevPage}
-        disabled={currentPage === 1}
-        aria-label={t('previous')}
-      >
-        <RiArrowLeftSLine size={18} />
-      </ArrowButton>
-      <Counter role="status">
-        {t('count', { currentPage, totalPageCount })}
-      </Counter>
-      <ArrowButton
-        type="button"
-        onClick={nextPage}
-        disabled={currentPage === totalPageCount}
-        aria-label={t('next')}
-      >
-        <RiArrowRightSLine size={18} />
-      </ArrowButton>
-    </Nav>
-  )
-}
-
-const Nav = styled('nav', {
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: '0.25rem',
-    marginTop: '1rem',
-    flexShrink: 0,
-  },
-})
-
-const ArrowButton = styled('button', {
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '1.75rem',
-    height: '1.75rem',
-    borderRadius: '4px',
-    border: 'none',
-    cursor: 'pointer',
-    color: 'white',
-    backgroundColor: 'primaryDark.100',
-    transition: 'opacity 0.15s, background-color 0.15s',
-    '&:hover:not(:disabled)': {
-      backgroundColor: 'primaryDark.75',
-    },
-    '&:focus-visible': {
-      outline: '2px solid',
-      outlineColor: 'white',
-      outlineOffset: '2px',
-    },
-    '&:disabled': {
-      opacity: 0.3,
-      cursor: 'default',
-    },
-  },
-})
-
-const Counter = styled('span', {
-  base: {
-    fontSize: '0.75rem',
-    color: 'white',
-    opacity: 0.8,
-    whiteSpace: 'nowrap',
-    padding: '0 0.25rem',
-    minWidth: '3rem',
-    textAlign: 'center',
-  },
-})
@@ -4,7 +4,7 @@ import { RoomEvent, Track } from 'livekit-client'
 import { styled } from '@/styled-system/jsx'
 import { PipFocusLayout } from './PipFocusLayout'
 import { PipGridLayout } from './PipGridLayout'
-import { PipPagination } from './PipPagination'
+import { PaginationControl } from '@/features/layout/components/PaginationControl'
 import { PipScreenShareLayout } from './PipScreenShareLayout'
 import { StageFrame } from './StageFrame'
 import { MAX_PIP_TILES } from '../../utils/pipGrid'
@@ -120,12 +120,7 @@ const PaginatedStage = ({
 }) => (
  <StageWrapper>
    <StageFrame>{children}</StageFrame>
-    <PipPagination
-      totalPageCount={pagination.totalPageCount}
-      currentPage={pagination.currentPage}
-      nextPage={pagination.nextPage}
-      prevPage={pagination.prevPage}
-    />
+    <PaginationControl {...pagination} placement="inline" />
  </StageWrapper>
 )

@@ -31,35 +31,20 @@ export const useSidePanel = () => {
  const isSidePanelOpen = !!activePanelId
  const isSubPanelOpen = !!activeSubPanelId

-  const toggleAdmin = () => {
-    layoutStore.activePanelId = isAdminOpen ? null : PanelId.ADMIN
-    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+  // Reads the live store, not the render snapshot: shortcut handlers outlive
+  // toggles that unmount (e.g. inside a closed overflow menu).
+  const togglePanel = (panelId: PanelId) => {
+    layoutStore.activePanelId =
+      layoutStore.activePanelId === panelId ? null : panelId
+    if (layoutStore.activeSubPanelId) layoutStore.activeSubPanelId = null
  }

-  const toggleParticipants = () => {
-    layoutStore.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS
-    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
-  }
-
-  const toggleChat = () => {
-    layoutStore.activePanelId = isChatOpen ? null : PanelId.CHAT
-    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
-  }
-
-  const toggleEffects = () => {
-    layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
-    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
-  }
-
-  const toggleTools = () => {
-    layoutStore.activePanelId = isToolsOpen ? null : PanelId.TOOLS
-    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
-  }
-
-  const toggleInfo = () => {
-    layoutStore.activePanelId = isInfoOpen ? null : PanelId.INFO
-    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
-  }
+  const toggleAdmin = () => togglePanel(PanelId.ADMIN)
+  const toggleParticipants = () => togglePanel(PanelId.PARTICIPANTS)
+  const toggleChat = () => togglePanel(PanelId.CHAT)
+  const toggleEffects = () => togglePanel(PanelId.EFFECTS)
+  const toggleTools = () => togglePanel(PanelId.TOOLS)
+  const toggleInfo = () => togglePanel(PanelId.INFO)

  const openTranscript = () => {
    layoutStore.activeSubPanelId = SubPanelId.TRANSCRIPT
@@ -1,14 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { normalizeRoomId } from './isRoomValid'
-
-describe('normalizeRoomId', () => {
-  it('lowercases and re-inserts the hyphens of a ten-letter id', () => {
-    expect(normalizeRoomId('ABCDEFGHIJ')).toBe('abc-defg-hij')
-    expect(normalizeRoomId('abc-defghij')).toBe('abc-defg-hij')
-  })
-
-  it('returns any other input unchanged', () => {
-    expect(normalizeRoomId('abc-def')).toBe('abc-def')
-    expect(normalizeRoomId('Not-A-Room')).toBe('Not-A-Room')
-  })
-})
@@ -7,6 +7,7 @@ export type ShortcutCategory = 'navigation' | 'media' | 'interaction'
 export type ShortcutId =
  | 'open-shortcuts'
  | 'focus-toolbar'
+  | 'focus-pagination'
  | 'toggle-microphone'
  | 'toggle-camera'
  | 'push-to-talk'
@@ -44,6 +45,11 @@ export const shortcutCatalog: ShortcutDescriptor[] = [
    category: 'navigation',
    shortcut: { key: 'F2' },
  },
+  {
+    id: 'focus-pagination',
+    category: 'navigation',
+    shortcut: { key: 'G', ctrlKey: true, shiftKey: true },
+  },
  {
    id: 'toggle-microphone',
    category: 'media',
@@ -7,12 +7,16 @@ export type useRegisterKeyboardShortcutProps = {
  id?: ShortcutId
  handler: () => Promise<void | boolean | undefined> | void
  isDisabled?: boolean
+  // Opt-in: controls rendered inside menus unmount when the menu closes, and
+  // their shortcuts must keep working.
+  unregisterOnUnmount?: boolean
 }

 export const useRegisterKeyboardShortcut = ({
  id,
  handler,
  isDisabled = false,
+  unregisterOnUnmount = false,
 }: useRegisterKeyboardShortcutProps) => {
  useEffect(() => {
    if (!id) return
@@ -21,8 +25,14 @@ export const useRegisterKeyboardShortcut = ({
    const formattedKey = formatShortcutKey(descriptor.shortcut)
    if (isDisabled) {
      keyboardShortcutsStore.shortcuts.delete(formattedKey)
-    } else {
-      keyboardShortcutsStore.shortcuts.set(formattedKey, handler)
+      return
    }
-  }, [handler, id, isDisabled])
+    keyboardShortcutsStore.shortcuts.set(formattedKey, handler)
+    if (!unregisterOnUnmount) return
+    return () => {
+      if (keyboardShortcutsStore.shortcuts.get(formattedKey) === handler) {
+        keyboardShortcutsStore.shortcuts.delete(formattedKey)
+      }
+    }
+  }, [handler, id, isDisabled, unregisterOnUnmount])
 }
@@ -784,6 +784,7 @@
    "actions": {
      "open-shortcuts": "Tastenkürzel-Hilfe öffnen",
      "focus-toolbar": "Fokus auf die untere Symbolleiste",
+      "focus-pagination": "Fokus auf die Teilnehmerseiten",
      "toggle-microphone": "Mikrofon umschalten",
      "toggle-camera": "Kamera umschalten",
      "push-to-talk": "Push-to-talk",
@@ -784,6 +784,7 @@
    "actions": {
      "open-shortcuts": "Open shortcuts help",
      "focus-toolbar": "Focus bottom toolbar",
+      "focus-pagination": "Focus participant pagination",
      "toggle-microphone": "Toggle microphone",
      "toggle-camera": "Toggle camera",
      "push-to-talk": "Push-to-talk (hold to unmute)",
@@ -783,6 +783,7 @@
    "actions": {
      "open-shortcuts": "Abrir la ayuda de atajos",
      "focus-toolbar": "Poner el foco en la barra de herramientas inferior",
+      "focus-pagination": "Poner el foco en la paginación de participantes",
      "toggle-microphone": "Activar o desactivar el micrófono",
      "toggle-camera": "Activar o desactivar la cámara",
      "push-to-talk": "Pulsar para hablar (mantener para reactivar)",
@@ -784,6 +784,7 @@
    "actions": {
      "open-shortcuts": "Ouvrir l’aide des raccourcis",
      "focus-toolbar": "Mettre le focus sur la barre d’outils du bas",
+      "focus-pagination": "Mettre le focus sur la pagination des participants",
      "toggle-microphone": "Activer ou désactiver le micro",
      "toggle-camera": "Activer ou désactiver la caméra",
      "push-to-talk": "Appuyer pour parler (maintenir pour réactiver)",
@@ -784,6 +784,7 @@
    "actions": {
      "open-shortcuts": "Sneltoetsenhulp openen",
      "focus-toolbar": "Focus op de onderste werkbalk",
+      "focus-pagination": "Focus op de paginering van deelnemers",
      "toggle-microphone": "Microfoon aan/uit",
      "toggle-camera": "Camera aan/uit",
      "push-to-talk": "Push-to-talk (ingedrukt houden om te activeren)",
@@ -10,5 +10,5 @@
    "noEmit": true,
    "types": ["node"]
  },
-  "include": ["vite.config.ts", "vitest.config.ts"]
+  "include": ["vite.config.ts"]
 }
@@ -1,8 +0,0 @@
-import { defineConfig } from 'vitest/config'
-
-// Kept apart from vite.config.ts so the tests load none of the build plugins.
-export default defineConfig({
-  resolve: {
-    tsconfigPaths: true,
-  },
-})
Author	SHA1	Message	Date
Ovgodd	17d2c49a00	🐛(frontend) let panel shortcuts close panels opened from a menu allow menu-invoked panels to be closed by panel shortcuts	2026-10-05 14:35:12 +02:00
Ovgodd	6a3c83ed41	fixup! ♿️(frontend) make participant pagination readable and keyboard reachable	2026-10-05 14:35:02 +02:00
Ovgodd	b362f08de1	fixup! ♿️(frontend) make participant pagination readable and keyboard reachable	2026-10-05 14:13:50 +02:00
Ovgodd	6a04d557d7	♿️(frontend) make participant pagination readable and keyboard reachable Improves PaginationControl: clearer structure, keyboard nav, a11y improved. The main room and the picture-in-picture window share this control. Ctrl+Shift+G focuses the pagination.	2026-10-05 14:06:02 +02:00