♿️(frontend) improve aria-label with accessible emoji description

replace raw emoji with descriptive label to enhance screen reader support
📝(docs) add changelog file to document project changes
2026-01-19 23:25:15 +01:00 · 2026-01-19 23:25:15 +01:00 · 2026-01-19 23:25:15 +01:00 · 2026-01-19 23:25:15 +01:00 · 2026-01-19 23:25:15 +01:00 · 2026-01-19 23:22:29 +01:00
36 changed files with 388 additions and 94 deletions
@@ -8,6 +8,20 @@ and this project adheres to

 ## [Unreleased]

+### Changed
+
+- ♿️(frontend) add accessible back button in side panel #881
+- ♿️(frontend) improve participants toggle a11y label #880
+- ♿️(frontend) make carousel image decorative #871
+- ♿️(frontend) reactions are now vocalized and configurable #849
+
+### Fixed
+
+- 🔒(backend) prevent automatic upgrade setuptools
+- ♿(frontend) improve contrast for selected options #863
+- ♿️(frontend) announce copy state in invite dialog #877
+
+## [1.3.0] - 2026-01-13

 ### Added

@@ -25,7 +39,7 @@ and this project adheres to

 ### Fixed

- 🐛(frontend) remove unexpected F2 tooltip when clicking video screen 
+- 🐛(frontend) remove unexpected F2 tooltip when clicking video screen
 - 🩹(frontend) icon font loading to avoid text/icon flickering

 ## [1.2.0] - 2026-01-05
@@ -4,7 +4,7 @@
 FROM python:3.13.5-alpine3.21 AS base

 # Upgrade pip to its latest release to speed up dependencies installation
-RUN python -m pip install --upgrade pip setuptools
+RUN python -m pip install --upgrade pip

 # Upgrade system packages to install security updates
 RUN apk update && \
@@ -1,6 +1,6 @@
 # Installation with docker compose

-We provide a sample configuration for running Meet using Docker Compose. Please note that this configuration is experimental, and the official way to deploy Meet in production is to use [k8s](../installation/k8s.md)
+We provide a sample configuration for running Meet using Docker Compose. Please note that this configuration is experimental, and the official way to deploy Meet in production is to use [k8s](../installation/kubernetes.md).

 ## Requirements

@@ -1,7 +1,7 @@

 [project]
 name = "agents"
-version = "1.2.0"
+version = "1.3.0"
 requires-python = ">=3.12"
 dependencies = [
    "livekit-agents==1.3.10",
@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name = "meet"
-version = "1.2.0"
+version = "1.3.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
    "Development Status :: 5 - Production/Stable",
@@ -1,12 +1,12 @@
 {
  "name": "meet",
-  "version": "1.2.0",
+  "version": "1.3.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "meet",
-      "version": "1.2.0",
+      "version": "1.3.0",
      "dependencies": {
        "@fontsource-variable/material-symbols-outlined": "5.2.30",
        "@fontsource/material-icons-outlined": "5.2.6",
@@ -1,7 +1,7 @@
 {
  "name": "meet",
  "private": true,
-  "version": "1.2.0",
+  "version": "1.3.0",
  "type": "module",
  "scripts": {
    "dev": "panda codegen && vite",
@@ -192,7 +192,7 @@ export const IntroSlider = () => {
        <SlideContainer>
          {SLIDES.map((slide, index) => (
            <Slide visible={index == slideIndex} key={index}>
-              <Image src={slide.src} alt={t(`${slide.key}.imgAlt`)} />
+              <Image src={slide.src} alt="" role="presentation" />
              <TextAnimation visible={index == slideIndex}>
                <Heading>{t(`${slide.key}.title`)}</Heading>
                <Body>{t(`${slide.key}.body`)}</Body>
@@ -112,8 +112,8 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
                    square
                    size={'sm'}
                    onPress={copyRoomUrlToClipboard}
-                    aria-label={t('copyUrl')}
-                    tooltip={t('copyUrl')}
+                    aria-label={isRoomUrlCopied ? t('copied') : t('copyUrl')}
+                    tooltip={isRoomUrlCopied ? t('copied') : t('copyUrl')}
                  >
                    {isRoomUrlCopied ? (
                      <RiCheckLine aria-hidden="true" />
@@ -138,11 +138,12 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
                  {formatPinCode(roomData?.pin_code)}
                </Text>
              </div>
+
              <Button
                variant={isCopied ? 'success' : 'secondaryText'}
                size="sm"
                fullWidth
-                aria-label={t('copy')}
+                aria-label={isCopied ? t('copied') : t('copy')}
                style={{
                  justifyContent: 'start',
                }}
@@ -173,7 +174,7 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
            <Button
              variant={isCopied ? 'success' : 'tertiary'}
              fullWidth
-              aria-label={t('copy')}
+              aria-label={isCopied ? t('copied') : t('copy')}
              onPress={copyRoomToClipboard}
              data-attr="share-dialog-copy"
            >
@@ -5,6 +5,9 @@ import { css } from '@/styled-system/css'
 import { Participant } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
 import { Reaction } from '@/features/rooms/livekit/components/controls/ReactionsToggle'
+import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
+import { accessibilityStore } from '@/stores/accessibility'
+import { useSnapshot } from 'valtio'

 export const ANIMATION_DURATION = 3000
 export const ANIMATION_DISTANCE = 300
@@ -140,11 +143,53 @@ export function ReactionPortal({
  )
 }

-export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) =>
-  reactions.map((instance) => (
-    <ReactionPortal
-      key={instance.id}
-      emoji={instance.emoji}
-      participant={instance.participant}
-    />
-  ))
+export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
+  const { announceReactions } = useSnapshot(accessibilityStore)
+  const [announcement, setAnnouncement] = useState<string | null>(null)
+  const [lastAnnouncedId, setLastAnnouncedId] = useState<number | null>(null)
+
+  const latestReaction =
+    reactions.length > 0 ? reactions[reactions.length - 1] : undefined
+
+  useEffect(() => {
+    if (!announceReactions) {
+      setAnnouncement(null)
+      return
+    }
+    if (!latestReaction) return
+    const isNewReaction = latestReaction.id !== lastAnnouncedId
+    if (!isNewReaction) return
+
+    const emojiLabel = getEmojiLabel(latestReaction.emoji, t)
+    const participantName = latestReaction.participant?.isLocal
+      ? t('you')
+      : latestReaction.participant?.name?.trim() ||
+        t('someone', { defaultValue: 'Someone' })
+    setAnnouncement(t('announce', { name: participantName, emoji: emojiLabel }))
+    setLastAnnouncedId(latestReaction.id)
+
+    const timer = setTimeout(() => setAnnouncement(null), 1200)
+    return () => clearTimeout(timer)
+  }, [latestReaction, lastAnnouncedId, announceReactions, t])
+
+  return (
+    <>
+      {reactions.map((instance) => (
+        <ReactionPortal
+          key={instance.id}
+          emoji={instance.emoji}
+          participant={instance.participant}
+        />
+      ))}
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {announcement ?? ''}
+      </div>
+    </>
+  )
+}
@@ -13,6 +13,7 @@ import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
 import { Tools } from './Tools'
 import { Info } from './Info'
+import { HStack } from '@/styled-system/jsx'

 type StyledSidePanelProps = {
  title: string
@@ -23,6 +24,7 @@ type StyledSidePanelProps = {
  closeButtonTooltip: string
  isSubmenu: boolean
  onBack: () => void
+  backButtonLabel: string
 }

 const StyledSidePanel = ({
@@ -34,6 +36,7 @@ const StyledSidePanel = ({
  closeButtonTooltip,
  isSubmenu = false,
  onBack,
+  backButtonLabel,
 }: StyledSidePanelProps) => (
  <aside
    className={css({
@@ -63,31 +66,34 @@ const StyledSidePanel = ({
    aria-hidden={isClosed}
    aria-label={ariaLabel}
  >
-    <Heading
-      slot="title"
-      level={1}
-      className={text({ variant: 'h2' })}
-      style={{
-        paddingLeft: '1.5rem',
-        paddingTop: '1rem',
-        display: isClosed ? 'none' : 'flex',
-        justifyContent: 'start',
-        alignItems: 'center',
-      }}
-    >
+    <HStack alignItems="center">
      {isSubmenu && (
        <Button
          variant="secondaryText"
          size="sm"
          square
-          className={css({ marginRight: '0.5rem' })}
+          className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
+          aria-label={backButtonLabel}
          onPress={onBack}
        >
-          <RiArrowLeftLine size={20} />
+          <RiArrowLeftLine size={20} aria-hidden="true" />
        </Button>
      )}
-      {title}
-    </Heading>
+      <Heading
+        slot="title"
+        level={1}
+        className={text({ variant: 'h2' })}
+        style={{
+          paddingLeft: isSubmenu ? 0 : '1.5rem',
+          paddingTop: '1rem',
+          display: isClosed ? 'none' : 'flex',
+          justifyContent: 'start',
+          alignItems: 'center',
+        }}
+      >
+        {title}
+      </Heading>
+    </HStack>
    <Div
      position="absolute"
      top="5"
@@ -129,7 +135,6 @@ const Panel = ({ isOpen, keepAlive = false, children }: PanelProps) => (
    {keepAlive || isOpen ? children : null}
  </div>
 )
-
 export const SidePanel = () => {
  const {
    activePanelId,
@@ -158,6 +163,7 @@ export const SidePanel = () => {
      })}
      isClosed={!isSidePanelOpen}
      isSubmenu={isSubPanelOpen}
+      backButtonLabel={t('backToTools')}
      onBack={() => (layoutStore.activeSubPanelId = null)}
    >
      <Panel isOpen={isParticipantsOpen}>
@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
 import { css } from '@/styled-system/css'
 import { useParticipants } from '@livekit/components-react'
 import { useSidePanel } from '../../../hooks/useSidePanel'
@@ -19,6 +20,8 @@ export const ParticipantsToggle = ({
   */
  const participants = useParticipants()
  const numParticipants = participants?.length
+  const announcedCount =
+    numParticipants && numParticipants > 0 ? numParticipants : 1

  const { isParticipantsOpen, toggleParticipants } = useSidePanel()

@@ -31,21 +34,24 @@ export const ParticipantsToggle = ({
        display: 'inline-block',
      })}
    >
-      <ToggleButton
-        square
-        variant="primaryTextDark"
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
-        isSelected={isParticipantsOpen}
-        onPress={(e) => {
-          toggleParticipants()
-          onPress?.(e)
-        }}
-        data-attr={`controls-participants-${tooltipLabel}`}
-        {...props}
-      >
-        <RiGroupLine />
-      </ToggleButton>
+      <VisualOnlyTooltip tooltip={t(tooltipLabel)}>
+        <ToggleButton
+          square
+          variant="primaryTextDark"
+          aria-label={`${t(tooltipLabel)}. ${t('count', {
+            count: announcedCount,
+          })}.`}
+          isSelected={isParticipantsOpen}
+          onPress={(e) => {
+            toggleParticipants()
+            onPress?.(e)
+          }}
+          data-attr={`controls-participants-${tooltipLabel}`}
+          {...props}
+        >
+          <RiGroupLine />
+        </ToggleButton>
+      </VisualOnlyTooltip>
      <div
        className={css({
          position: 'absolute',
@@ -10,6 +10,7 @@ import {
  ANIMATION_DURATION,
  ReactionPortals,
 } from '@/features/rooms/livekit/components/ReactionPortal'
+import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
 import { Toolbar as RACToolbar } from 'react-aria-components'
 import { Participant } from 'livekit-client'
 import useRateLimiter from '@/hooks/useRateLimiter'
@@ -145,7 +146,7 @@ export const ReactionsToggle = () => {
                <Button
                  key={index}
                  onPress={() => debouncedSendReaction(emoji)}
-                  aria-label={t('send', { emoji })}
+                  aria-label={t('send', { emoji: getEmojiLabel(emoji, t) })}
                  variant="primaryTextDark"
                  size="sm"
                  square
@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next'
+
+export const getEmojiLabel = (
+  emoji: string,
+  t: ReturnType<typeof useTranslation>['t']
+) => {
+  const emojiLabels: Record<string, string> = {
+    'thumbs-up': t('emojis.thumbs-up', { defaultValue: 'thumbs up' }),
+    'thumbs-down': t('emojis.thumbs-down', { defaultValue: 'thumbs down' }),
+    'clapping-hands': t('emojis.clapping-hands', {
+      defaultValue: 'clapping hands',
+    }),
+    'red-heart': t('emojis.red-heart', { defaultValue: 'red heart' }),
+    'face-with-tears-of-joy': t('emojis.face-with-tears-of-joy', {
+      defaultValue: 'face with tears of joy',
+    }),
+    'face-with-open-mouth': t('emojis.face-with-open-mouth', {
+      defaultValue: 'surprised face',
+    }),
+    'party-popper': t('emojis.party-popper', { defaultValue: 'party popper' }),
+    'folded-hands': t('emojis.folded-hands', { defaultValue: 'folded hands' }),
+  }
+  return emojiLabels[emoji] ?? emoji
+}
@@ -11,6 +11,7 @@ import {
  RiSettings3Line,
  RiSpeakerLine,
  RiVideoOnLine,
+  RiEyeLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
 import { NotificationsTab } from './tabs/NotificationsTab'
@@ -22,6 +23,7 @@ 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'

 const tabsStyle = css({
  maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -112,6 +114,11 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
                  t(`tabs.${SettingsDialogExtendedKey.TRANSCRIPTION}`)}
              </Tab>
            )}
+            <Tab icon highlight id={SettingsDialogExtendedKey.ACCESSIBILITY}>
+              <RiEyeLine />
+              {isWideScreen &&
+                t(`tabs.${SettingsDialogExtendedKey.ACCESSIBILITY}`)}
+            </Tab>
          </TabList>
        </div>
        <div className={tabPanelContainerStyle}>
@@ -125,6 +132,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
          <NotificationsTab id={SettingsDialogExtendedKey.NOTIFICATIONS} />
          {/* Transcription tab won't be accessible if the tab is not active in the tab list */}
          <TranscriptionTab id={SettingsDialogExtendedKey.TRANSCRIPTION} />
+          <AccessibilityTab id={SettingsDialogExtendedKey.ACCESSIBILITY} />
        </div>
      </Tabs>
    </Dialog>
@@ -0,0 +1,40 @@
+import { Field, H } from '@/primitives'
+import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import { accessibilityStore } from '@/stores/accessibility'
+
+export type AccessibilityTabProps = Pick<TabPanelProps, 'id'>
+
+export const AccessibilityTab = ({ id }: AccessibilityTabProps) => {
+  const { t } = useTranslation('settings')
+  const snap = useSnapshot(accessibilityStore)
+
+  return (
+    <TabPanel padding={'md'} flex id={id}>
+      <H lvl={2}>{t('tabs.accessibility')}</H>
+      <ul
+        className={css({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+        })}
+      >
+        <li>
+          <Field
+            type="switch"
+            label={t('accessibility.announceReactions.label')}
+            isSelected={snap.announceReactions}
+            onChange={(value) => {
+              accessibilityStore.announceReactions = value
+            }}
+            wrapperProps={{ noMargin: true, fullWidth: true }}
+          />
+        </li>
+      </ul>
+    </TabPanel>
+  )
+}
+
+export default AccessibilityTab
@@ -5,4 +5,5 @@ export enum SettingsDialogExtendedKey {
  GENERAL = 'general',
  NOTIFICATIONS = 'notifications',
  TRANSCRIPTION = 'transcription',
+  ACCESSIBILITY = 'accessibility',
 }
@@ -44,18 +44,15 @@
    },
    "slide1": {
      "title": "Wechseln Sie zur Einfachheit. Testen Sie uns jetzt!",
-      "body": "Entdecken Sie eine intuitive und zugängliche Lösung, entwickelt für alle Mitarbeitenden im öffentlichen Dienst, ihre Partner und viele weitere.",
-      "imgAlt": "Illustration einer benutzerfreundlichen und barrierefreien Kollaborationsplattform"
+      "body": "Entdecken Sie eine intuitive und zugängliche Lösung, entwickelt für alle Mitarbeitenden im öffentlichen Dienst, ihre Partner und viele weitere."
    },
    "slide2": {
      "title": "Gruppenanrufe ohne Einschränkungen",
-      "body": "Unbegrenzte Meeting-Dauer mit flüssiger, hochwertiger Kommunikation – unabhängig von der Gruppengröße.",
-      "imgAlt": "Bild eines virtuellen Meetings mit mehreren nahtlos zusammenarbeitenden Teilnehmenden"
+      "body": "Unbegrenzte Meeting-Dauer mit flüssiger, hochwertiger Kommunikation – unabhängig von der Gruppengröße."
    },
    "slide3": {
      "title": "Verwandeln Sie Ihre Meetings mit KI",
-      "body": "Erhalten Sie präzise und verwertbare Transkripte zur Steigerung Ihrer Produktivität. Funktion in der Beta – jetzt testen!",
-      "imgAlt": "Illustration KI-gestützter Notizen in einem virtuellen Meeting"
+      "body": "Erhalten Sie präzise und verwertbare Transkripte zur Steigerung Ihrer Produktivität. Funktion in der Beta – jetzt testen!"
    }
  }
 }
@@ -192,7 +192,9 @@
    "leave": "Verlassen",
    "participants": {
      "open": "Alle ausblenden",
-      "closed": "Alle anzeigen"
+      "closed": "Alle anzeigen",
+      "count_one": "{{count}} Teilnehmer",
+      "count_other": "{{count}} Teilnehmer"
    },
    "tools": {
      "open": "Weitere Tools ausblenden",
@@ -206,7 +208,18 @@
    "reactions": {
      "button": "Reaktion senden",
      "send": "Reaktion {{emoji}} senden",
-      "you": "Sie"
+      "announce": "{{name}} : {{emoji}}",
+      "you": "Sie",
+      "emojis": {
+        "thumbs-up": "Daumen hoch",
+        "thumbs-down": "Daumen runter",
+        "clapping-hands": "Klatschende Hände",
+        "red-heart": "rotes Herz",
+        "face-with-tears-of-joy": "Gesicht mit Freudentränen",
+        "face-with-open-mouth": "überraschter Gesichtsausdruck",
+        "party-popper": "Party-Popper",
+        "folded-hands": "gefaltete Hände"
+      }
    }
  },
  "options": {
@@ -277,6 +290,7 @@
  },
  "sidePanel": {
    "ariaLabel": "Seitenleiste",
+    "backToTools": "Zurück zu den Meeting-Tools",
    "heading": {
      "participants": "Teilnehmer",
      "effects": "Effekte",
@@ -44,18 +44,15 @@
    },
    "slide1": {
      "title": "Make the switch to simplicity. Try us now!",
-      "body": "Discover an intuitive and accessible solution, designed for all public agents, their partners, and much more.",
-      "imgAlt": "Illustration of a user-friendly and accessible collaboration platform"
+      "body": "Discover an intuitive and accessible solution, designed for all public agents, their partners, and much more."
    },
    "slide2": {
      "title": "Host group calls without limits",
-      "body": "Unlimited time meetings, with smooth and high-quality communication, no matter the group size.",
-      "imgAlt": "Image of a virtual meeting with multiple participants collaborating seamlessly"
+      "body": "Unlimited time meetings, with smooth and high-quality communication, no matter the group size."
    },
    "slide3": {
      "title": "Transform your meetings with AI",
-      "body": "Get accurate and actionable transcripts to boost your productivity. Feature in beta—try it now!",
-      "imgAlt": "Illustration of AI-powered note-taking in a virtual meeting"
+      "body": "Get accurate and actionable transcripts to boost your productivity. Feature in beta—try it now!"
    }
  }
 }
@@ -192,7 +192,9 @@
    "leave": "Leave",
    "participants": {
      "open": "Hide everyone",
-      "closed": "See everyone"
+      "closed": "See everyone",
+      "count_one": "{{count}} participant",
+      "count_other": "{{count}} participants"
    },
    "tools": {
      "open": "Hide more tools",
@@ -206,7 +208,18 @@
    "reactions": {
      "button": "Send reaction",
      "send": "Send reaction {{emoji}}",
-      "you": "you"
+      "announce": "{{name}} : {{emoji}}",
+      "you": "you",
+      "emojis": {
+        "thumbs-up": "thumbs up",
+        "thumbs-down": "thumbs down",
+        "clapping-hands": "clapping hands",
+        "red-heart": "red heart",
+        "face-with-tears-of-joy": "face with tears of joy",
+        "face-with-open-mouth": "surprised face",
+        "party-popper": "party popper",
+        "folded-hands": "folded hands"
+      }
    }
  },
  "options": {
@@ -277,6 +290,7 @@
  },
  "sidePanel": {
    "ariaLabel": "Sidepanel",
+    "backToTools": "Back to meeting tools",
    "heading": {
      "participants": "Participants",
      "effects": "Backgrounds and Effects",
@@ -108,12 +108,18 @@
    "label": "Language"
  },
  "settingsButtonLabel": "Settings",
+  "accessibility": {
+    "announceReactions": {
+      "label": "Announce reactions aloud"
+    }
+  },
  "tabs": {
    "account": "Profile",
    "audio": "Audio",
    "video": "Video",
    "general": "General",
    "notifications": "Notifications",
+    "accessibility": "Accessibility",
    "transcription": "Transcription"
  }
 }
@@ -44,18 +44,15 @@
    },
    "slide1": {
      "title": "Passez à la simplicité. Essayez-nous dès maintenant !",
-      "body": "Découvrez une solution intuitive et accessible, conçue pour tous les agents publics et leurs partenaires, et bien plus encore.",
-      "imgAlt": "Illustration d'une plateforme de collaboration simple et accessible"
+      "body": "Découvrez une solution intuitive et accessible, conçue pour tous les agents publics et leurs partenaires, et bien plus encore."
    },
    "slide2": {
      "title": "Organisez des appels de groupe sans limite",
-      "body": "Réunions sans limite de temps, avec une communication fluide et de haute qualité, quel que soit le nombre.",
-      "imgAlt": "Image d'une réunion virtuelle avec plusieurs participants collaborant efficacement"
+      "body": "Réunions sans limite de temps, avec une communication fluide et de haute qualité, quel que soit le nombre."
    },
    "slide3": {
      "title": "Transformez vos réunions avec l'IA",
-      "body": "Obtenez des transcriptions précises et actionnables, pour booster votre productivité. Fonctionnalité en beta, essayez-la maintenant !",
-      "imgAlt": "Illustration de prise de notes assistée par l'IA dans une réunion virtuelle"
+      "body": "Obtenez des transcriptions précises et actionnables, pour booster votre productivité. Fonctionnalité en beta, essayez-la maintenant !"
    }
  }
 }
@@ -192,7 +192,9 @@
    "leave": "Quitter",
    "participants": {
      "open": "Masquer les participants",
-      "closed": "Afficher les participants"
+      "closed": "Afficher les participants",
+      "count_one": "{{count}} participant",
+      "count_other": "{{count}} participants"
    },
    "tools": {
      "open": "Masquer les outils de réunion",
@@ -206,7 +208,18 @@
    "reactions": {
      "button": "Envoyer une réaction",
      "send": "Envoyer la réaction {{emoji}}",
-      "you": "vous"
+      "announce": "{{name}} : {{emoji}}",
+      "you": "vous",
+      "emojis": {
+        "thumbs-up": "pouce levé",
+        "thumbs-down": "pouce baissé",
+        "clapping-hands": "applaudissements",
+        "red-heart": "cœur",
+        "face-with-tears-of-joy": "visage qui rit",
+        "face-with-open-mouth": "visage étonné",
+        "party-popper": "confettis",
+        "folded-hands": "mains jointes"
+      }
    }
  },
  "options": {
@@ -277,6 +290,7 @@
  },
  "sidePanel": {
    "ariaLabel": "Panneau latéral",
+    "backToTools": "Retour aux outils de réunion",
    "heading": {
      "participants": "Participants",
      "effects": "Arrière-plans et effets",
@@ -108,12 +108,18 @@
    "label": "Langue de l'application"
  },
  "settingsButtonLabel": "Paramètres",
+  "accessibility": {
+    "announceReactions": {
+      "label": "Vocaliser les réactions"
+    }
+  },
  "tabs": {
    "account": "Profil",
    "audio": "Audio",
    "video": "Vidéo",
    "general": "Général",
    "notifications": "Notifications",
+    "accessibility": "Accessibilité",
    "transcription": "Transcription"
  }
 }
@@ -44,18 +44,15 @@
    },
    "slide1": {
      "title": "Stap over op eenvoud. Probeer ons nu!",
-      "body": "Ontdek een intuïtieve en toegankelijke oplossing, ontworpen voor alle openbare partijen, hun partners en nog veel meer.",
-      "imgAlt": "Illustratie van een gebruiksvriendelijk en toegankelijk samenwerkingsplatform"
+      "body": "Ontdek een intuïtieve en toegankelijke oplossing, ontworpen voor alle openbare partijen, hun partners en nog veel meer."
    },
    "slide2": {
      "title": "Houdt groepsgesprekken zonder limieten",
-      "body": "Vergaderingen van onbeperkte lengte, met soepele en hoogwaardige communicatie, ongeacht de groepsgrootte.",
-      "imgAlt": "Afbeelding van een virtuele ontmoeting met meerdere deelnemers die naadloos samenwerken"
+      "body": "Vergaderingen van onbeperkte lengte, met soepele en hoogwaardige communicatie, ongeacht de groepsgrootte."
    },
    "slide3": {
      "title": "Transformeer uw vergaderingen met AI",
-      "body": "Krijg nauwkeurige en bruikbare transcripties om uw productiviteit te stimuleren. Deze mogelijkheid is in bèta, probeer het nu!",
-      "imgAlt": "Illustratie van AI-aangedreven notitie in een virtuele vergadering"
+      "body": "Krijg nauwkeurige en bruikbare transcripties om uw productiviteit te stimuleren. Deze mogelijkheid is in bèta, probeer het nu!"
    }
  }
 }
@@ -192,7 +192,9 @@
    "leave": "Vertrekken",
    "participants": {
      "open": "Verberg iedereen",
-      "closed": "Toon iedereen"
+      "closed": "Toon iedereen",
+      "count_one": "{{count}} deelnemer",
+      "count_other": "{{count}} deelnemers"
    },
    "tools": {
      "open": "Meer tools verbergen",
@@ -206,7 +208,18 @@
    "reactions": {
      "button": "Stuur reactie",
      "send": "Stuur reactie {{emoji}}",
-      "you": "U"
+      "announce": "{{name}} : {{emoji}}",
+      "you": "U",
+      "emojis": {
+        "thumbs-up": "duim omhoog",
+        "thumbs-down": "duim omlaag",
+        "clapping-hands": "applaudisserende handen",
+        "red-heart": "rood hart",
+        "face-with-tears-of-joy": "gezicht met tranen van vreugde",
+        "face-with-open-mouth": "verrast gezicht",
+        "party-popper": "feestknaller",
+        "folded-hands": "gevouwen handen"
+      }
    }
  },
  "options": {
@@ -277,6 +290,7 @@
  },
  "sidePanel": {
    "ariaLabel": "Zijbalk",
+    "backToTools": "Terug naar vergadertools",
    "heading": {
      "participants": "Deelnemers",
      "effects": "Effecten",
@@ -112,7 +112,8 @@ export const buttonRecipe = cva({
        },
        transition: 'box-shadow 0.2s ease-in-out',
        '&[data-selected]': {
-          boxShadow: 'token(colors.primary.400) 0px 0px 0px 3px inset',
+          boxShadow:
+            '0 0 0 3px token(colors.primary.600) inset, 0 0 0 5px white inset',
        },
        '&[data-disabled]': {
          backgroundColor: 'greyscale.100',
@@ -0,0 +1,76 @@
+import { proxy, subscribe } from 'valtio'
+import { STORAGE_KEYS } from '@/utils/storageKeys'
+import { deserializeToProxyMap } from '@/utils/valtio'
+
+type AccessibilityState = {
+  announceReactions: boolean
+}
+
+const DEFAULT_STATE: AccessibilityState = {
+  announceReactions: false,
+}
+
+function getAccessibilityState(): AccessibilityState {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEYS.ACCESSIBILITY)
+    if (stored) {
+      const parsed = JSON.parse(stored)
+      return {
+        ...DEFAULT_STATE,
+        ...parsed,
+        announceReactions:
+          typeof parsed.announceReactions === 'boolean'
+            ? parsed.announceReactions
+            : DEFAULT_STATE.announceReactions,
+      }
+    }
+
+    // Legacy migration: if the setting was previously stored in notifications
+    const legacy = localStorage.getItem(STORAGE_KEYS.NOTIFICATIONS)
+    if (legacy) {
+      try {
+        const parsedLegacy = JSON.parse(legacy, deserializeToProxyMap)
+        if (typeof parsedLegacy?.announceReactions === 'boolean') {
+          const migratedState: AccessibilityState = {
+            ...DEFAULT_STATE,
+            ...parsedLegacy,
+            announceReactions: parsedLegacy.announceReactions,
+          }
+
+          try {
+            localStorage.setItem(
+              STORAGE_KEYS.ACCESSIBILITY,
+              JSON.stringify(migratedState)
+            )
+            localStorage.removeItem(STORAGE_KEYS.NOTIFICATIONS)
+          } catch {
+            // ignore persistence issues during migration
+          }
+
+          return migratedState
+        }
+      } catch {
+        // ignore legacy parsing issues
+      }
+    }
+
+    return DEFAULT_STATE
+  } catch (error: unknown) {
+    console.error(
+      '[AccessibilityStore] Failed to parse stored settings:',
+      error
+    )
+    return DEFAULT_STATE
+  }
+}
+
+export const accessibilityStore = proxy<AccessibilityState>(
+  getAccessibilityState()
+)
+
+subscribe(accessibilityStore, () => {
+  localStorage.setItem(
+    STORAGE_KEYS.ACCESSIBILITY,
+    JSON.stringify(accessibilityStore)
+  )
+})
@@ -0,0 +1,14 @@
+import { css } from '@/styled-system/css'
+
+// Reusable visually hidden style for screen-reader-only content
+export const srOnly = css({
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+})
@@ -4,4 +4,5 @@
 export const STORAGE_KEYS = {
  NOTIFICATIONS: 'app_notification_settings',
  USER_PREFERENCES: 'app_user_preferences',
+  ACCESSIBILITY: 'app_accessibility_settings',
 } as const
@@ -1,12 +1,12 @@
 {
  "name": "mail_mjml",
-  "version": "1.2.0",
+  "version": "1.3.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "mail_mjml",
-      "version": "1.2.0",
+      "version": "1.3.0",
      "license": "MIT",
      "dependencies": {
        "@html-to/text-cli": "0.5.4",
@@ -1,6 +1,6 @@
 {
  "name": "mail_mjml",
-  "version": "1.2.0",
+  "version": "1.3.0",
  "description": "An util to generate html and text django's templates from mjml templates",
  "type": "module",
  "dependencies": {
@@ -1,12 +1,12 @@
 {
  "name": "sdk",
-  "version": "1.2.0",
+  "version": "1.3.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sdk",
-      "version": "1.2.0",
+      "version": "1.3.0",
      "license": "ISC",
      "workspaces": [
        "./library",
@@ -1,6 +1,6 @@
 {
  "name": "sdk",
-  "version": "1.2.0",
+  "version": "1.3.0",
  "author": "",
  "license": "ISC",
  "description": "",
@@ -1,7 +1,7 @@

 [project]
 name = "summary"
-version = "1.2.0"
+version = "1.3.0"
 dependencies = [
    "fastapi[standard]>=0.105.0",
    "uvicorn>=0.24.0",
Author	SHA1	Message	Date
Cyril	a7da853af7	♿️(frontend) improve aria-label with accessible emoji description replace raw emoji with descriptive label to enhance screen reader support	2026-01-19 23:25:15 +01:00
Cyril	5d39629297	📝(docs) add changelog file to document project changes helps track notable changes and improvements over time	2026-01-19 23:25:15 +01:00
Cyril	5351ebb4bb	💄(frontend) add globally available sr-only utility class provides reusable hidden style for screen reader-only content	2026-01-19 23:25:15 +01:00
Cyril	d05186b5b3	📝(frontend) update a11y store labels and link for clarity improves naming and navigation for better user understanding of options	2026-01-19 23:25:15 +01:00
Cyril	f497cb8dae	✨(frontend) create a11y store to manage user option toggles sets up state handling for enabling or disabling a11y preferences	2026-01-19 23:25:15 +01:00
Cyril	3f83d5cef2	✨(frontend) add placeholder for accessibility menu in settings panel prepares UI for future accessibility options without implementing logic yet	2026-01-19 23:22:29 +01:00
Cyril	6a19c8ece8	✨(frontend) getEmojiLabel util for accessible emoji labeling across app centralizes emoji label logic to ensure consistency and reuse in UI components	2026-01-19 23:22:29 +01:00
Cyril	d42deffbd4	♿️(frontend) add screen reader announcements for reactions interactions ensures users get feedback when adding reactions via assistive tech	2026-01-19 23:22:28 +01:00
Cyril	c7e3194331	♿️(frontend) announce copy state in invite dialog improves screen reader feedback after copying the link	2026-01-19 22:55:47 +01:00
Cyril	902b005f32	♿️(frontend) improve contrast for selected options add dark inner border to enhance visibility and accessibility	2026-01-19 22:28:46 +01:00
Cyril	51d22783b2	♿️(frontend) make carousel image decorative avoid screen reader announcing redundant visual content	2026-01-19 18:29:25 +01:00
blipp	76f80a0f2f	Fix k8s link in Docker Compose installation guide	2026-01-19 18:29:25 +01:00
Cyril	82eb930200	📝(docs) update changelog document the latest change in the project history	2026-01-19 18:29:25 +01:00
Cyril	eeeb950e08	♿️(frontend) improve participants toggle a11y label avoid screen reader duplication by using visual-only tooltip	2026-01-19 18:29:19 +01:00
Cyril	cb77688572	♿️(frontend) add accessible back button in side panel label the back button and separate it from the heading for a11y	2026-01-19 15:14:25 +01:00
lebaudantoine	f9524b2f0a	🔒️(backend) prevent automatic upgrade setuptools The latest `setuptools` version pulls in a `jaraco.context` version that triggers a Trivy scan failure. `jaraco.context` has a path traversal vulnerability. This fix is inspired by suitenumerique/people, specifically Marie’s PR #1010.	2026-01-19 14:16:00 +01:00
lebaudantoine	a50aabeaf8	🔖(minor) bump release to 1.3.0	2026-01-13 15:44:23 +01:00
lebaudantoine	594bd5a692	🚸(frontend) hide back button when a user is ejected by an admin Avoid showing a back button when a user is kicked out of a meeting by an admin, to prevent them from repeatedly rejoining the room.	2026-01-13 15:28:39 +01:00