Transcription
نص مكتوبTranscript
Stable
src/dsm/components/transcription.tsxLa 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é | Type | Défaut | Description |
|---|---|---|---|
| title | ReactNode | — | Titre du contenu, affiché à côté du déclencheur. |
| children* | ReactNode | — | Texte de la transcription, affiché dans le panneau. |
| defaultOpen | boolean | false | Ouvre le panneau au premier affichage. |