fixup! ♿️(frontend) make carousel image decorative

♿️(frontend) make carousel image decorative
avoid screen reader announcing redundant visual content
2026-01-19 16:10:47 +01:00 · 2026-01-19 16:10:47 +01:00 · 2026-01-19 15:55:54 +01:00 · 2026-01-19 15:48:58 +01:00 · 2026-01-19 15:48:58 +01:00 · 2026-01-19 15:47:58 +01:00
12 changed files with 49 additions and 46 deletions
@@ -11,12 +11,13 @@ and this project adheres to
 ### Changed

 - ♿️(frontend) add accessible back button in side panel #881
+- ♿️(frontend) improve participants toggle a11y label #880
+- ♿️(frontend) make carousel image decorative #871

 ### Fixed

 - 🔒(backend) prevent automatic upgrade setuptools

-
 ## [1.3.0] - 2026-01-13

 ### Added
@@ -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

@@ -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>
@@ -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',
@@ -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",
@@ -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",
@@ -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",
@@ -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",
Author	SHA1	Message	Date
lebaudantoine	8e83e08278	fixup! ♿️(frontend) make carousel image decorative	2026-01-19 16:10:47 +01:00
Cyril	9fb8e7e5cf	♿️(frontend) make carousel image decorative avoid screen reader announcing redundant visual content	2026-01-19 16:10:47 +01:00
blipp	44739ce984	Fix k8s link in Docker Compose installation guide	2026-01-19 15:55:54 +01:00
lebaudantoine	df459de42e	fixup! ♿️(frontend) improve participants toggle a11y label	2026-01-19 15:48:58 +01:00
Cyril	f2cadeea39	📝(docs) update changelog document the latest change in the project history	2026-01-19 15:48:58 +01:00
Cyril	cf9a41c335	♿️(frontend) improve participants toggle a11y label avoid screen reader duplication by using visual-only tooltip	2026-01-19 15:47:58 +01:00