♻️(frontend) remove redundant formatLongPressLabel helper

Use i18next interpolation directly in useShortcutFormatting

.github/workflows/docker-hub.yml

@@ -24,6 +24,12 @@ jobs:
       -
         name: Checkout repository
         uses: actions/checkout@v6
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
       -
         name: Docker meta
         id: meta
@@ -49,6 +55,7 @@ jobs:
         with:
           context: .
           target: backend-production
+          platforms: linux/amd64,linux/arm64
           build-args: DOCKER_USER=${{ env.DOCKER_USER }}:-1000
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
@@ -60,6 +67,12 @@ jobs:
       -
         name: Checkout repository
         uses: actions/checkout@v6
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
       -
         name: Docker meta
         id: meta
@@ -86,6 +99,7 @@ jobs:
           context: .
           file: ./src/frontend/Dockerfile
           target: frontend-production
+          platforms: linux/amd64,linux/arm64
           build-args: DOCKER_USER=${{ env.DOCKER_USER }}:-1000
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
@@ -97,6 +111,12 @@ jobs:
       -
         name: Checkout repository
         uses: actions/checkout@v6
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
       -
         name: Docker meta
         id: meta
@@ -123,6 +143,7 @@ jobs:
           context: .
           file: ./docker/dinum-frontend/Dockerfile
           target: frontend-production
+          platforms: linux/amd64,linux/arm64
           build-args: DOCKER_USER=${{ env.DOCKER_USER }}:-1000
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
@@ -134,6 +155,12 @@ jobs:
       -
         name: Checkout repository
         uses: actions/checkout@v6
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
       -
         name: Docker meta
         id: meta
@@ -162,6 +189,7 @@ jobs:
           context: ./src/summary
           file: ./src/summary/Dockerfile
           target: production
+          platforms: linux/amd64,linux/arm64
           build-args: DOCKER_USER=${{ env.DOCKER_USER }}:-1000
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
@@ -173,6 +201,12 @@ jobs:
       -
         name: Checkout repository
         uses: actions/checkout@v6
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
       -
         name: Docker meta
         id: meta
@@ -201,6 +235,7 @@ jobs:
           context: ./src/agents
           file: ./src/agents/Dockerfile
           target: production
+          platforms: linux/amd64,linux/arm64
           build-args: DOCKER_USER=${{ env.DOCKER_USER }}:-1000
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}

.github/workflows/meet.yml

@@ -7,11 +7,15 @@ on:
   pull_request:
     branches:
       - "*"
+permissions:
+  contents: read
 
 jobs:
   lint-git:
     runs-on: ubuntu-latest
     if: github.event_name == 'pull_request' # Makes sense only for pull requests
+    permissions:
+      contents: read
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
@@ -39,6 +43,8 @@ jobs:
     if: |
       contains(github.event.pull_request.labels.*.name, 'noChangeLog') == false &&
       github.event_name == 'pull_request'
+    permissions:
+        contents: read
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
@@ -49,6 +55,8 @@ jobs:
 
   lint-changelog:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
@@ -62,6 +70,8 @@ jobs:
 
   build-mails:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     defaults:
       run:
         working-directory: src/mail
@@ -102,6 +112,8 @@ jobs:
 
   lint-back:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     defaults:
       run:
         working-directory: src/backend
@@ -124,6 +136,8 @@ jobs:
 
   lint-agents:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     defaults:
       run:
         working-directory: src/agents
@@ -144,6 +158,8 @@ jobs:
 
   lint-summary:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     defaults:
       run:
         working-directory: src/summary
@@ -165,7 +181,8 @@ jobs:
   test-back:
     runs-on: ubuntu-latest
     needs: build-mails
-
+    permissions:
+      contents: read
     defaults:
       run:
         working-directory: src/backend
@@ -279,6 +296,8 @@ jobs:
 
   lint-front:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
@@ -294,6 +313,8 @@ jobs:
 
   lint-sdk:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     defaults:
       run:
         working-directory: src/sdk/library
@@ -312,6 +333,8 @@ jobs:
 
   build-sdk:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     needs: lint-sdk
     defaults:
       run:

CHANGELOG.md

@@ -8,13 +8,26 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Added
+
+- 👷(docker) add arm64 platform support for image builds
+
+### Changed
+
+- ♻️(frontend) replace custom reactions toolbar with react aria popover #985
+- 🔒️(frontend) uninstall curl from the frontend production image #987
+- 💄(frontend) add focus ring to reaction emoji buttons
+- ✨(frontend) introduce a shortcut settings tab #975
+- 🚚(frontend) rename "wellknown" directory to "well-known" #1009
+- 🌐(frontend) localize SR modifier labels #1010
+
 ## [1.8.0] - 2026-02-20
 
 ### Changed
 
 - 🔒️(agents) uninstall pip from the agents image
 - 🔒️(summary) switch to Alpine base image
-- 🔒️(backend) uninstall pip in the production image 
+- 🔒️(backend) uninstall pip in the production image
 
 ### Fixed
 

docker/livekit/Dockerfile

@@ -1,4 +1,4 @@
-FROM livekit/livekit-server:v1.9.0
+FROM livekit/livekit-server:v1.9.4
 
 # We inject the nip.io certificate manually because the livekit chart doesn't support volume mounting
 COPY rootCA.pem /etc/ssl/certs/

docs/installation/scalingo.md

@@ -32,7 +32,7 @@ Set the following environment variables in your Scalingo app:
 ### Buildpack Configuration
 
 ```bash
-scalingo env-set BUILDBACK_URL="https://github.com/suitenumerique/buildpack#main"
+scalingo env-set BUILDPACK_URL="https://github.com/suitenumerique/buildpack#main"
 scalingo env-set LASUITE_APP_NAME="meet"
 scalingo env-set LASUITE_BACKEND_DIR="."
 scalingo env-set LASUITE_FRONTEND_DIR="src/frontend/"

src/frontend/Dockerfile

@@ -43,7 +43,8 @@ RUN apk update && apk upgrade libssl3 \
     libxml2>=2.12.7-r2 \
     libxslt>=1.1.39-r2 \
     libexpat>=2.7.2-r0 \
-    libpng>=1.6.53-r0
+    libpng>=1.6.53-r0 \
+    && apk del curl
 
 USER nginx
 

src/frontend/default.conf

@@ -5,9 +5,9 @@ server {
 
   root /usr/share/nginx/html;
 
-  location = /.wellknown/windows-app-web-link {
+  location = /.well-known/windows-app-web-link {
       default_type application/json;
-      alias /usr/share/nginx/html/.wellknown/windows-app-web-link;
+      alias /usr/share/nginx/html/.well-known/windows-app-web-link;
       add_header Content-Disposition "attachment; filename=windows-app-web-link";
   }
 

src/frontend/package.json

@@ -15,25 +15,25 @@
   "dependencies": {
     "@fontsource-variable/material-symbols-outlined": "5.2.34",
     "@fontsource/material-icons-outlined": "5.2.6",
-    "@livekit/components-react": "2.9.13",
-    "@livekit/components-styles": "1.1.6",
-    "@livekit/track-processors": "0.6.1",
-    "@pandacss/preset-panda": "0.54.0",
+    "@livekit/components-react": "2.9.19",
+    "@livekit/components-styles": "1.2.0",
+    "@livekit/track-processors": "0.7.0",
+    "@pandacss/preset-panda": "1.8.2",
     "@react-aria/toast": "3.0.10",
     "@react-types/overlays": "3.9.3",
     "@remixicon/react": "4.6.0",
-    "@tanstack/react-query": "5.81.5",
+    "@tanstack/react-query": "5.90.21",
     "@timephy/rnnoise-wasm": "1.0.0",
     "crisp-sdk-web": "1.0.27",
     "derive-valtio": "0.2.0",
     "hoofd": "1.7.3",
     "humanize-duration": "3.33.2",
-    "i18next": "25.8.4",
-    "i18next-browser-languagedetector": "8.2.0",
+    "i18next": "25.8.8",
+    "i18next-browser-languagedetector": "8.2.1",
     "i18next-parser": "9.3.0",
     "i18next-resources-to-backend": "1.2.1",
     "libphonenumber-js": "1.12.10",
-    "livekit-client": "2.15.7",
+    "livekit-client": "2.17.1",
     "posthog-js": "1.342.1",
     "react": "18.3.1",
     "react-aria-components": "1.10.1",
@@ -44,16 +44,16 @@
     "wouter": "3.9.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.54.0",
-    "@tanstack/eslint-plugin-query": "5.81.2",
-    "@tanstack/react-query-devtools": "5.81.5",
+    "@pandacss/dev": "1.8.2",
+    "@tanstack/eslint-plugin-query": "5.91.4",
+    "@tanstack/react-query-devtools": "5.91.3",
     "@types/humanize-duration": "3.27.4",
     "@types/node": "22.16.0",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@typescript-eslint/eslint-plugin": "8.35.1",
     "@typescript-eslint/parser": "8.35.1",
-    "@vitejs/plugin-react": "4.6.0",
+    "@vitejs/plugin-react": "5.1.4",
     "eslint": "8.57.0",
     "eslint-config-prettier": "10.1.5",
     "eslint-plugin-jsx-a11y": "6.10.2",
@@ -62,7 +62,7 @@
     "postcss": "8.5.6",
     "prettier": "3.8.1",
     "typescript": "5.8.3",
-    "vite": "7.0.8",
-    "vite-tsconfig-paths": "5.1.4"
+    "vite": "7.3.1",
+    "vite-tsconfig-paths": "6.1.1"
   }
 }

src/frontend/src/features/rooms/livekit/components/controls/ReactionsToggle.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { RiEmotionLine } from '@remixicon/react'
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef } from 'react'
 import { css } from '@/styled-system/css'
 import { useRoomContext } from '@livekit/components-react'
 import { ToggleButton, Button } from '@/primitives'
@@ -12,7 +12,12 @@ import {
 } from '@/features/rooms/livekit/components/ReactionPortal'
 import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { Toolbar as RACToolbar } from 'react-aria-components'
+import {
+  Popover as RACPopover,
+  Dialog,
+  DialogTrigger,
+} from 'react-aria-components'
+import { FocusScope } from '@react-aria/focus'
 import { Participant } from 'livekit-client'
 import useRateLimiter from '@/hooks/useRateLimiter'
 
@@ -40,11 +45,11 @@ export const ReactionsToggle = () => {
   const instanceIdRef = useRef(0)
   const room = useRoomContext()
 
-  const [isVisible, setIsVisible] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
 
   useRegisterKeyboardShortcut({
     id: 'reaction',
-    handler: () => setIsVisible((prev) => !prev),
+    handler: () => setIsOpen((prev) => !prev),
   })
 
   const sendReaction = async (emoji: string) => {
@@ -79,100 +84,76 @@ export const ReactionsToggle = () => {
     windowMs: 1000,
   })
 
-  // Custom animation implementation for the emoji toolbar
-  // Could not use a menu and its animation, because a menu would make the toolbar inaccessible by keyboard
-  // animation isn't perfect
-  const [isRendered, setIsRendered] = useState(isVisible)
-  const [opacity, setOpacity] = useState(isVisible ? 1 : 0)
-
-  useEffect(() => {
-    if (isVisible) {
-      // Show: first render, then animate in
-      setIsRendered(true)
-      // Need to delay setting opacity to ensure CSS transition works
-      // (using requestAnimationFrame to ensure DOM has updated)
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          setOpacity(1)
-        })
-      })
-    } else if (isRendered) {
-      // Hide: first animate out, then unrender
-      setOpacity(0)
-
-      // Wait for animation to complete before removing from DOM
-      const timer = setTimeout(() => {
-        setIsRendered(false)
-      }, 200) // Match this to your animation duration
-      return () => clearTimeout(timer)
-    }
-  }, [isVisible, isRendered])
-
   return (
     <>
-      <div
-        className={css({
-          position: 'relative',
-        })}
-      >
-        <ToggleButton
-          square
-          variant="primaryDark"
-          aria-label={t('button')}
-          tooltip={t('button')}
-          onPress={() => setIsVisible(!isVisible)}
-        >
-          <RiEmotionLine />
-        </ToggleButton>
-        {isRendered && (
-          <div
+      <div className={css({ position: 'relative' })}>
+        <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
+          <ToggleButton
+            square
+            variant="primaryDark"
+            aria-label={t('button')}
+            tooltip={t('button')}
+            isSelected={isOpen}
+            onChange={setIsOpen}
+          >
+            <RiEmotionLine />
+          </ToggleButton>
+          <RACPopover
+            placement="top"
+            offset={8}
+            isNonModal
+            shouldCloseOnInteractOutside={() => false}
             className={css({
-              position: 'absolute',
-              top: -63,
-              left: -162,
               borderRadius: '8px',
               padding: '0.35rem',
               backgroundColor: 'primaryDark.50',
-              opacity: opacity,
-              transition: 'opacity 0.2s ease',
+              '&[data-entering]': {
+                animation: 'fade 200ms ease',
+              },
+              '&[data-exiting]': {
+                animation: 'fade 200ms ease-in reverse',
+              },
             })}
-            onTransitionEnd={() => {
-              if (!isVisible) {
-                setIsRendered(false)
-              }
-            }}
           >
-            <RACToolbar
-              className={css({
-                display: 'flex',
-                gap: '0.5rem',
-              })}
-            >
-              {Object.values(Emoji).map((emoji, index) => (
-                <Button
-                  key={index}
-                  onPress={() => debouncedSendReaction(emoji)}
-                  aria-label={t('send', { emoji: getEmojiLabel(emoji, t) })}
-                  variant="primaryTextDark"
-                  size="sm"
-                  square
-                  data-attr={`send-reaction-${emoji}`}
+            <Dialog className={css({ outline: 'none' })}>
+              {/* eslint-disable-next-line jsx-a11y/no-autofocus -- FocusScope autoFocus is programmatic focus for overlays, not the HTML autofocus attribute */}
+              <FocusScope contain autoFocus restoreFocus>
+                <div
+                  role="toolbar"
+                  aria-orientation="horizontal"
+                  aria-label={t('button')}
+                  className={css({
+                    display: 'flex',
+                    gap: '0.5rem',
+                  })}
                 >
-                  <img
-                    src={`/assets/reactions/${emoji}.png`}
-                    alt=""
-                    className={css({
-                      minHeight: '28px',
-                      minWidth: '28px',
-                      pointerEvents: 'none',
-                      userSelect: 'none',
-                    })}
-                  />
-                </Button>
-              ))}
-            </RACToolbar>
-          </div>
-        )}
+                  {Object.values(Emoji).map((emoji, index) => (
+                    <Button
+                      key={index}
+                      onPress={() => debouncedSendReaction(emoji)}
+                      aria-label={t('send', { emoji: getEmojiLabel(emoji, t) })}
+                      variant="primaryTextDark"
+                      size="sm"
+                      square
+                      data-attr={`send-reaction-${emoji}`}
+                    >
+                      <img
+                        src={`/assets/reactions/${emoji}.png`}
+                        alt=""
+                        className={css({
+                          width: '28px',
+                          height: '28px',
+                          pointerEvents: 'none',
+                          userSelect: 'none',
+                        })}
+                      />
+                    </Button>
+                  ))}
+                </div>
+              </FocusScope>
+            </Dialog>
+          </RACPopover>
+        </DialogTrigger>
       </div>
       <ReactionPortals reactions={reactions} />
     </>

src/frontend/src/features/settings/components/SettingsDialogExtended.tsx

@@ -12,6 +12,7 @@ import {
   RiSpeakerLine,
   RiVideoOnLine,
   RiEyeLine,
+  RiKeyboardBoxLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
 import { NotificationsTab } from './tabs/NotificationsTab'
@@ -19,11 +20,12 @@ import { GeneralTab } from './tabs/GeneralTab'
 import { AudioTab } from './tabs/AudioTab'
 import { VideoTab } from './tabs/VideoTab'
 import { TranscriptionTab } from './tabs/TranscriptionTab'
+import { ShortcutTab } from './tabs/ShortcutTab'
 import { useRef } from 'react'
 import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
-import AccessibilityTab from './tabs/AccessibilityTab'
+import { AccessibilityTab } from './tabs/AccessibilityTab'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -107,6 +109,10 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
               {isWideScreen &&
                 t(`tabs.${SettingsDialogExtendedKey.NOTIFICATIONS}`)}
             </Tab>
+            <Tab icon highlight id={SettingsDialogExtendedKey.SHORTCUTS}>
+              <RiKeyboardBoxLine />
+              {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.SHORTCUTS}`)}
+            </Tab>
             {isAdminOrOwner && (
               <Tab icon highlight id={SettingsDialogExtendedKey.TRANSCRIPTION}>
                 <Icon type="symbols" name="speech_to_text" />
@@ -130,6 +136,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
           <VideoTab id={SettingsDialogExtendedKey.VIDEO} />
           <GeneralTab id={SettingsDialogExtendedKey.GENERAL} />
           <NotificationsTab id={SettingsDialogExtendedKey.NOTIFICATIONS} />
+          <ShortcutTab id={SettingsDialogExtendedKey.SHORTCUTS} />
           {/* Transcription tab won't be accessible if the tab is not active in the tab list */}
           <TranscriptionTab id={SettingsDialogExtendedKey.TRANSCRIPTION} />
           <AccessibilityTab id={SettingsDialogExtendedKey.ACCESSIBILITY} />

src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx

@@ -36,5 +36,3 @@ export const AccessibilityTab = ({ id }: AccessibilityTabProps) => {
     </TabPanel>
   )
 }
-
-export default AccessibilityTab

src/frontend/src/features/settings/components/tabs/ShortcutTab.tsx

@@ -0,0 +1,51 @@
+import { shortcutCatalog } from '@/features/shortcuts/catalog'
+import { ShortcutRow } from '@/features/shortcuts/components/ShortcutRow'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+import { TabPanel, type TabPanelProps } from '@/primitives/Tabs'
+import { H } from '@/primitives'
+
+const tableStyle = css({
+  width: '100%',
+  borderCollapse: 'collapse',
+  overflowY: 'auto',
+  '& th, & td': {
+    padding: '0.65rem 0',
+    textAlign: 'left',
+  },
+  '& tbody tr': {
+    borderBottom: '1px solid rgba(255,255,255,0.08)',
+  },
+})
+
+export const ShortcutTab = ({ id }: Pick<TabPanelProps, 'id'>) => {
+  const { t } = useTranslation(['settings', 'rooms'])
+
+  return (
+    <TabPanel
+      id={id}
+      padding="md"
+      flex
+      className={css({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.75rem',
+      })}
+    >
+      <H lvl={2}>{t('shortcuts.listLabel')}</H>
+      <table className={tableStyle}>
+        <thead className="sr-only">
+          <tr>
+            <th scope="col">{t('shortcuts.columnAction')}</th>
+            <th scope="col">{t('shortcuts.columnShortcut')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {shortcutCatalog.map((item) => (
+            <ShortcutRow key={item?.id} descriptor={item} />
+          ))}
+        </tbody>
+      </table>
+    </TabPanel>
+  )
+}

src/frontend/src/features/settings/type.ts

@@ -5,5 +5,6 @@ export enum SettingsDialogExtendedKey {
   GENERAL = 'general',
   NOTIFICATIONS = 'notifications',
   TRANSCRIPTION = 'transcription',
+  SHORTCUTS = 'shortcuts',
   ACCESSIBILITY = 'accessibility',
 }

src/frontend/src/features/shortcuts/components/ShortcutBadge.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { css, cx } from '@/styled-system/css'
+
+type ShortcutBadgeProps = {
+  visualLabel: string
+  srLabel?: string
+  className?: string
+}
+
+const badgeStyle = css({
+  fontFamily: 'monospace',
+  backgroundColor: 'rgba(255,255,255,0.12)',
+  paddingInline: '0.4rem',
+  paddingBlock: '0.2rem',
+  borderRadius: '6px',
+  whiteSpace: 'nowrap',
+  minWidth: '5.5rem',
+  textAlign: 'center',
+})
+
+export const ShortcutBadge: React.FC<ShortcutBadgeProps> = ({
+  visualLabel,
+  srLabel,
+  className,
+}) => {
+  return (
+    <>
+      <div className={cx(badgeStyle, className)} aria-hidden="true">
+        <span>{visualLabel}</span>
+      </div>
+      {srLabel && <span className="sr-only">{srLabel}</span>}
+    </>
+  )
+}

src/frontend/src/features/shortcuts/components/ShortcutRow.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { css } from '@/styled-system/css'
+import { text } from '@/primitives/Text'
+import { ShortcutDescriptor } from '../catalog'
+import { ShortcutBadge } from './ShortcutBadge'
+import { useShortcutFormatting } from '../hooks/useShortcutFormatting'
+import { useTranslation } from 'react-i18next'
+
+type ShortcutRowProps = {
+  descriptor: ShortcutDescriptor
+}
+
+const shortcutCellStyle = css({
+  textAlign: 'right',
+})
+
+export const ShortcutRow: React.FC<ShortcutRowProps> = ({ descriptor }) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'shortcutsPanel' })
+  const { formatVisual, formatForSR } = useShortcutFormatting()
+
+  const visualShortcut = formatVisual(
+    descriptor.shortcut,
+    descriptor.code,
+    descriptor.kind
+  )
+  const srShortcut = formatForSR(
+    descriptor.shortcut,
+    descriptor.code,
+    descriptor.kind
+  )
+
+  return (
+    <tr>
+      <td className={text({ variant: 'body' })}>
+        {t(`actions.${descriptor.id}`)}
+      </td>
+      <td className={shortcutCellStyle}>
+        <ShortcutBadge visualLabel={visualShortcut} srLabel={srShortcut} />
+      </td>
+    </tr>
+  )
+}

src/frontend/src/features/shortcuts/formatLabels.ts

@@ -0,0 +1,59 @@
+import { Shortcut } from './types'
+import { isMacintosh } from '@/utils/livekit'
+
+// Visible label for a shortcut (uses ⌘/Ctrl prefix when needed).
+export const formatShortcutLabel = (shortcut?: Shortcut) => {
+  if (!shortcut) return '—'
+  const key = shortcut.key?.toUpperCase()
+  if (!key) return '—'
+  const parts: string[] = []
+  if (shortcut.ctrlKey) parts.push(isMacintosh() ? '⌘' : 'Ctrl')
+  if (shortcut.altKey) parts.push(isMacintosh() ? '⌥' : 'Alt')
+  if (shortcut.shiftKey) parts.push('Shift')
+  parts.push(key)
+  return parts.join('+')
+}
+
+// SR-friendly label for a shortcut (reads "Control plus D").
+export const formatShortcutLabelForSR = (
+  shortcut: Shortcut | undefined,
+  {
+    controlLabel,
+    commandLabel,
+    altLabel,
+    optionLabel,
+    shiftLabel,
+    plusLabel,
+    noShortcutLabel,
+  }: {
+    controlLabel: string
+    commandLabel: string
+    altLabel: string
+    optionLabel: string
+    shiftLabel: string
+    plusLabel: string
+    noShortcutLabel: string
+  }
+) => {
+  if (!shortcut) return noShortcutLabel
+  const key = shortcut.key?.toUpperCase()
+  if (!key) return noShortcutLabel
+  const ctrlWord = isMacintosh() ? commandLabel : controlLabel
+  const altWord = isMacintosh() ? optionLabel : altLabel
+  const parts: string[] = []
+  if (shortcut.ctrlKey) parts.push(ctrlWord)
+  if (shortcut.altKey) parts.push(altWord)
+  if (shortcut.shiftKey) parts.push(shiftLabel)
+  parts.push(key)
+  return parts.join(` ${plusLabel} `)
+}
+
+// Extract displayable key name from KeyboardEvent.code (ex: KeyV -> V).
+export const getKeyLabelFromCode = (code?: string) => {
+  if (!code) return ''
+  if (code.startsWith('Key') && code.length === 4) return code.slice(3)
+  if (code.startsWith('Digit') && code.length === 6) return code.slice(5)
+  if (code === 'Space') return '␣'
+  if (code.startsWith('Arrow')) return code.slice(5) // Up, Down, Left, Right
+  return code
+}

src/frontend/src/features/shortcuts/hooks/useShortcutFormatting.ts

@@ -0,0 +1,47 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Shortcut } from '../types'
+import {
+  formatShortcutLabel,
+  formatShortcutLabelForSR,
+  getKeyLabelFromCode,
+} from '../formatLabels'
+
+export const useShortcutFormatting = () => {
+  const { t } = useTranslation('rooms')
+
+  const formatVisual = useCallback(
+    (shortcut?: Shortcut, code?: string, kind?: string) => {
+      if (code && kind === 'longPress') {
+        const label = getKeyLabelFromCode(code)
+        return t('shortcutsPanel.visual.hold', { key: label || '?' })
+      }
+      return formatShortcutLabel(shortcut)
+    },
+    [t]
+  )
+
+  const formatForSR = useCallback(
+    (shortcut?: Shortcut, code?: string, kind?: string) => {
+      if (code && kind === 'longPress') {
+        const label = getKeyLabelFromCode(code)
+        return t('shortcutsPanel.sr.hold', { key: label || '?' })
+      }
+      return formatShortcutLabelForSR(shortcut, {
+        controlLabel: t('shortcutsPanel.sr.control'),
+        commandLabel: t('shortcutsPanel.sr.command'),
+        altLabel: t('shortcutsPanel.sr.alt'),
+        optionLabel: t('shortcutsPanel.sr.option'),
+        shiftLabel: t('shortcutsPanel.sr.shift'),
+        plusLabel: t('shortcutsPanel.sr.plus'),
+        noShortcutLabel: t('shortcutsPanel.sr.noShortcut'),
+      })
+    },
+    [t]
+  )
+
+  return {
+    formatVisual,
+    formatForSR,
+  }
+}

src/frontend/src/locales/de/rooms.json

@@ -595,6 +595,41 @@
     "muteParticipant": "{{name}} stummschalten",
     "fullScreen": "Vollbild"
   },
+  "shortcutsPanel": {
+    "title": "Tastenkombinationen",
+    "categories": {
+      "navigation": "Navigation",
+      "media": "Medien",
+      "interaction": "Interaktion"
+    },
+    "actions": {
+      "open-shortcuts": "Tastenkürzel-Hilfe öffnen",
+      "focus-toolbar": "Fokus auf die untere Symbolleiste",
+      "toggle-microphone": "Mikrofon umschalten",
+      "toggle-camera": "Kamera umschalten",
+      "push-to-talk": "Push-to-talk (gedrückt halten zum Einschalten)",
+      "reaction": "Reaktionspanel",
+      "fullscreen": "Vollbild umschalten",
+      "recording": "Aufnahmepanel umschalten",
+      "raise-hand": "Hand heben oder senken",
+      "toggle-chat": "Chat anzeigen/ausblenden",
+      "toggle-participants": "Teilnehmer anzeigen/ausblenden",
+      "open-shortcuts-settings": "Tastenkürzel-Einstellungen öffnen"
+    },
+    "sr": {
+      "control": "Steuerung",
+      "command": "Befehl",
+      "alt": "Alt",
+      "option": "Option",
+      "shift": "Umschalt",
+      "plus": "plus",
+      "hold": "Halte {{key}} gedrückt",
+      "noShortcut": "Kein Tastenkürzel"
+    },
+    "visual": {
+      "hold": "Halte {{key}} gedrückt"
+    }
+  },
   "fullScreenWarning": {
     "message": "Um eine Endlosschleife zu vermeiden, teile nicht deinen gesamten Bildschirm. Teile stattdessen einen Tab oder ein anderes Fenster.",
     "stop": "Präsentation beenden",

src/frontend/src/locales/de/settings.json

@@ -100,6 +100,11 @@
       }
     }
   },
+  "shortcuts": {
+    "listLabel": "Tastenkürzel",
+    "columnAction": "Aktion",
+    "columnShortcut": "Tastenkürzel"
+  },
   "dialog": {
     "heading": "Einstellungen"
   },
@@ -120,6 +125,7 @@
     "general": "Allgemein",
     "notifications": "Benachrichtigungen",
     "accessibility": "Barrierefreiheit",
-    "transcription": "Transkription"
+    "transcription": "Transkription",
+    "shortcuts": "Tastenkürzel"
   }
 }

src/frontend/src/locales/en/rooms.json

@@ -595,6 +595,41 @@
     "muteParticipant": "Mute {{name}}",
     "fullScreen": "Full screen"
   },
+  "shortcutsPanel": {
+    "title": "Keyboard shortcuts",
+    "categories": {
+      "navigation": "Navigation",
+      "media": "Media",
+      "interaction": "Interaction"
+    },
+    "actions": {
+      "open-shortcuts": "Open shortcuts help",
+      "focus-toolbar": "Focus bottom toolbar",
+      "toggle-microphone": "Toggle microphone",
+      "toggle-camera": "Toggle camera",
+      "push-to-talk": "Push-to-talk (hold to unmute)",
+      "reaction": "Emoji reaction panel",
+      "fullscreen": "Toggle fullscreen",
+      "recording": "Toggle recording panel",
+      "raise-hand": "Raise or lower hand",
+      "toggle-chat": "Toggle chat",
+      "toggle-participants": "Toggle participants",
+      "open-shortcuts-settings": "Open shortcuts settings"
+    },
+    "sr": {
+      "control": "Control",
+      "command": "Command",
+      "alt": "Alt",
+      "option": "Option",
+      "shift": "Shift",
+      "plus": "plus",
+      "hold": "Hold {{key}}",
+      "noShortcut": "No shortcut"
+    },
+    "visual": {
+      "hold": "Hold {{key}}"
+    }
+  },
   "fullScreenWarning": {
     "message": "To avoid infinite loop display, do not share your entire screen. Instead, share a tab or another window.",
     "stop": "Stop presenting",

src/frontend/src/locales/en/settings.json

@@ -100,6 +100,11 @@
       }
     }
   },
+  "shortcuts": {
+    "listLabel": "Keyboard shortcuts",
+    "columnAction": "Action",
+    "columnShortcut": "Shortcut"
+  },
   "dialog": {
     "heading": "Settings"
   },
@@ -120,6 +125,7 @@
     "general": "General",
     "notifications": "Notifications",
     "accessibility": "Accessibility",
-    "transcription": "Transcription"
+    "transcription": "Transcription",
+    "shortcuts": "Shortcuts"
   }
 }

src/frontend/src/locales/fr/rooms.json

@@ -595,6 +595,41 @@
     "muteParticipant": "Couper le micro de {{name}}",
     "fullScreen": "Plein écran"
   },
+  "shortcutsPanel": {
+    "title": "Raccourcis clavier",
+    "categories": {
+      "navigation": "Navigation",
+      "media": "Média",
+      "interaction": "Interaction"
+    },
+    "actions": {
+      "open-shortcuts": "Ouvrir l’aide des raccourcis",
+      "focus-toolbar": "Mettre le focus sur la barre d’outils du bas",
+      "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)",
+      "reaction": "Panneau des réactions",
+      "fullscreen": "Basculer en plein écran",
+      "recording": "Basculer le panneau d’enregistrement",
+      "raise-hand": "Lever ou baisser la main",
+      "toggle-chat": "Afficher/Masquer le chat",
+      "toggle-participants": "Afficher/Masquer les participants",
+      "open-shortcuts-settings": "Ouvrir les réglages des raccourcis"
+    },
+    "sr": {
+      "control": "Contrôle",
+      "command": "Commande",
+      "alt": "Alt",
+      "option": "Option",
+      "shift": "Majuscule",
+      "plus": "plus",
+      "hold": "Maintenir {{key}}",
+      "noShortcut": "Aucun raccourci"
+    },
+    "visual": {
+      "hold": "Maintenir {{key}}"
+    }
+  },
   "fullScreenWarning": {
     "message": "Pour éviter l'affichage en boucle infinie, ne partagez pas l'intégralité de votre écran. Partagez plutôt un onglet ou une autre fenêtre.",
     "stop": "Arrêter la présentation",

src/frontend/src/locales/fr/settings.json

@@ -100,6 +100,11 @@
       }
     }
   },
+  "shortcuts": {
+    "listLabel": "Liste des raccourcis clavier",
+    "columnAction": "Action",
+    "columnShortcut": "Raccourci"
+  },
   "dialog": {
     "heading": "Paramètres"
   },
@@ -120,6 +125,7 @@
     "general": "Général",
     "notifications": "Notifications",
     "accessibility": "Accessibilité",
-    "transcription": "Transcription"
+    "transcription": "Transcription",
+    "shortcuts": "Raccourcis"
   }
 }

src/frontend/src/locales/nl/rooms.json

@@ -595,6 +595,41 @@
     "muteParticipant": "Demp {{name}}",
     "fullScreen": "Volledig scherm"
   },
+  "shortcutsPanel": {
+    "title": "Sneltoetsen",
+    "categories": {
+      "navigation": "Navigatie",
+      "media": "Media",
+      "interaction": "Interactie"
+    },
+    "actions": {
+      "open-shortcuts": "Sneltoetsenhulp openen",
+      "focus-toolbar": "Focus op de onderste werkbalk",
+      "toggle-microphone": "Microfoon aan/uit",
+      "toggle-camera": "Camera aan/uit",
+      "push-to-talk": "Push-to-talk (ingedrukt houden om te activeren)",
+      "reaction": "Reactiepaneel",
+      "fullscreen": "Volledig scherm wisselen",
+      "recording": "Opnamepaneel wisselen",
+      "raise-hand": "Hand opsteken of laten zakken",
+      "toggle-chat": "Chat tonen/verbergen",
+      "toggle-participants": "Deelnemers tonen/verbergen",
+      "open-shortcuts-settings": "Sneltoets-instellingen openen"
+    },
+    "sr": {
+      "control": "Control",
+      "command": "Command",
+      "alt": "Alt",
+      "option": "Option",
+      "shift": "Shift",
+      "plus": "plus",
+      "hold": "Houd {{key}} ingedrukt",
+      "noShortcut": "Geen sneltoets"
+    },
+    "visual": {
+      "hold": "Houd {{key}} ingedrukt"
+    }
+  },
   "fullScreenWarning": {
     "message": "Om niet oneindige uw scherm in zichzelf te delen, kunt u beter niet het hele scherm delen. Deel in plaats daarvan een tab of een ander venster.",
     "stop": "Stop met presenteren",

src/frontend/src/locales/nl/settings.json

@@ -100,6 +100,11 @@
       }
     }
   },
+  "shortcuts": {
+    "listLabel": "Sneltoetsen",
+    "columnAction": "Actie",
+    "columnShortcut": "Sneltoets"
+  },
   "dialog": {
     "heading": "Instellingen"
   },
@@ -114,6 +119,7 @@
     "video": "Video",
     "general": "Algemeen",
     "notifications": "Meldingen",
-    "transcription": "Transcriptie"
+    "transcription": "Transcriptie",
+    "shortcuts": "Sneltoetsen"
   }
 }

src/frontend/src/primitives/buttonRecipe.ts

@@ -199,6 +199,11 @@ export const buttonRecipe = cva({
           backgroundColor: 'primaryDark.700',
           color: 'primaryDark.100',
         },
+        '&[data-focus-visible]': {
+          outline: '2px solid',
+          outlineColor: 'focusRing',
+          outlineOffset: '2px',
+        },
       },
       quaternaryText: {
         backgroundColor: 'transparent',

src/mail/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "dependencies": {
     "@html-to/text-cli": "0.5.4",
-    "mjml": "4.15.3"
+    "mjml": "4.18.0"
   },
   "private": true,
   "scripts": {
@@ -14,7 +14,7 @@
     "build": "npm run build-mjml-to-html && npm run build-html-to-plain-text"
   },
   "volta": {
-    "node": "22.17.0"
+    "node": "24.13.1"
   },
   "repository": "https://github.com/suitenumerique/meet",
   "author": "DINUM",

src/summary/Dockerfile

@@ -25,6 +25,8 @@ FROM base AS production
 
 WORKDIR /app
 
+COPY --from=builder /usr/local /usr/local
+
 # Remove pip to reduce attack surface in production
 RUN pip uninstall -y pip
 
@@ -32,7 +34,6 @@ RUN pip uninstall -y pip
 ARG DOCKER_USER
 USER ${DOCKER_USER}
 
-COPY --from=builder /usr/local /usr/local
 COPY ./summary /app/summary
 
 CMD ["uvicorn", "summary.main:app", "--proxy-headers", "--host", "0.0.0.0", "--port", "8000"]