Contenu

Transcription

نص مكتوبTranscript

Stablesrc/dsm/components/transcription.tsx
La transcription affiche, sous forme repliable, le texte intégral d'un contenu audio ou vidéo — webinaire, allocution, capsule explicative — pour en garantir l'accessibilité et la consultation hors ligne.

Import

import { Transcription } from "@/dsm/components/transcription";

Exemples

Par défaut

Sans titre, le déclencheur occupe toute la largeur.

LTR

Avec titre

Titre du contenu affiché à côté du déclencheur.

LTR

Capsule 3 — Le paiement en ligne

Webinaire en ligne

Cas réel : transcription d'une session d'information sur watiqa.ma.

LTR

Webinaire · 9 septembre 2026

Session d'information — Déclaration fiscale des auto-entrepreneurs

Transcription intégrale

Usage

Quand l'utiliser

  • Placez systématiquement une transcription sous tout contenu audio ou vidéo informatif.
  • Utilisez `title` lorsque plusieurs transcriptions apparaissent sur la même page (playlist, série de capsules).

Quand ne pas l'utiliser

  • N'utilisez pas ce composant pour un long article : c'est le rôle du contenu principal en `dsm-prose`.
  • Ne remplacez pas les sous-titres synchronisés d'une vidéo par ce seul composant : les deux sont complémentaires.

Accessibilité & langues

Accessibilité

  • Le déclencheur alterne un texte visible entre « Afficher la transcription » et « Masquer la transcription », jamais seulement une icône.
  • Le contenu du panneau est un texte HTML classique (`dsm-prose`), entièrement navigable au clavier et par lecteur d'écran.

RTL & multilingue

  • Le chevron pivote verticalement, donc de façon identique dans les deux sens de lecture.

Propriétés

Transcription
PropriétéTypeDéfautDescription
titleReactNode—Titre du contenu, affiché à côté du déclencheur.
children*ReactNode—Texte de la transcription, affiché dans le panneau.
defaultOpenbooleanfalseOuvre le panneau au premier affichage.

Composants liés