LegbaMicButton

Ce que ça fait

Bouton bascule accessible (<legba-mic-button>) pour le microphone local : un vrai <button> avec aria-pressed, un état pending (désactivé, spinner respectant prefers-reduced-motion) et un état errorMessage (message exposé via role="alert", bouton toujours utilisable pour réessayer). Entièrement contrôlé : un clic (ou Entrée/Espace, geste natif du <button>) ne mute jamais active lui-même — il émet legba-toggle avec l’état proposé, à l’appelant de rappeler active = ....

Signature

class LegbaMicButton extends LegbaElement {
  active: boolean;        // reflété en attribut, contrôlé par l'appelant
  pending: boolean;       // reflété en attribut
  errorMessage: string | null;
}

Tag : legba-mic-button.

Paramètres

Propriété	Type	Requis	Défaut	Description
active	boolean	non	false	État réel affiché (aria-pressed) ; jamais modifié en interne
pending	boolean	non	false	Bascule en cours : désactive le bouton, affiche le spinner
errorMessage	string | null	non	null	Message d’erreur exposé (role="alert") ; null = pas d’erreur

Retour

N/A — un élément DOM. Émet legba-toggle (CustomEvent<boolean>, bubbles/composed) au clic ou à l’activation clavier, avec en detail l’état proposé (!active) — jamais émis si pending est vrai, et jamais deux fois pour un double-clic rapide (scénario 33 de LGB-031).

Erreurs

Aucune : le composant ne lève jamais. errorMessage n’est qu’un affichage, jamais une exception.

Exemple minimal

import type { LegbaMicButton } from "@legba-core/ui";

function wireMicButton(button: LegbaMicButton): void {
  button.addEventListener("legba-toggle", (event) => {
    button.active = (event as CustomEvent<boolean>).detail;
  });
}

Exemple complet

import type { LegbaMicButton } from "@legba-core/ui";

function wireMicButtonWithPermission(button: LegbaMicButton): void {
  button.addEventListener("legba-toggle", (event) => {
    const next = (event as CustomEvent<boolean>).detail;
    button.pending = true;
    button.errorMessage = null;

    window
      .navigator.mediaDevices.getUserMedia({ audio: next })
      .then(() => {
        button.active = next;
      })
      .catch(() => {
        button.errorMessage = "Autorise le microphone pour continuer.";
      })
      .finally(() => {
        button.pending = false;
      });
  });
}

Pièges

• Composant contrôlé : active ne change jamais tout seul. Un intégrateur qui n’écoute pas legba-toggle verra un bouton qui ne bascule jamais visuellement — ce n’est pas un bug, c’est la conception (élimine toute incohérence entre un clic local et une prop externe posée pendant pending, voir scénario 34 de LGB-031).
• pending désactive le <button> natif : aucun legba-toggle ne peut être émis tant que pending est vrai, même par clic programmatique.
• <legba-camera-button> est un composant distinct, pas le même sous un autre nom — les deux étendent une base interne partagée, non exportée.
• Consomme les jetons --legba-* comme tout composant @legba-core/ui : ne redéclare jamais un jeton public directement, voir LegbaElement.

Voir aussi

• LegbaCameraButton
• LegbaElement