Accessibility and Usability Enhancements for the VoiceCapture

projects/voicecapture-angular/src/lib/voicecapture-angular.component.html

@@ -3,17 +3,31 @@
   [class.active]="start()"
   (click)="deactivateVoice()"
   [ngClass]="mode"
+  aria-modal="true"
+  role="dialog"
+  [attr.aria-expanded]="start() ? 'true' : 'false'"
 >
-  <button class="exit" type="button" (click)="deactivateVoice()">
-    <i class="icon icon-exit">X</i>
+  <button
+    class="exit"
+    (click)="deactivateVoice()"
+    [attr.aria-label]="getTranslation('close')"
+    type="button"
+  >
+    <i class="icon icon-exit" aria-hidden="true">X</i>
   </button>
-  <p class="text-tip"></p>
-  <button type="button" class="btn-voice" [class.active]="animationButton">
+  <p class="text-tip" aria-live="polite"></p>
+  <button
+    class="btn-voice"
+    [class.active]="animationButton"
+    [attr.aria-label]="getTranslation('open')"
+    type="button"
+  >
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       width="24"
       height="24"
+      aria-hidden="true"
     >
       <path
         d="M17 11.998c0 2.76-2.23 5-4.99 5l-.002.002a4.994 4.994 0 01-4.979-5h-2c0 3.52 2.59 6.433 5.98 6.92v3.078h.01V22h2v-3.08h-.01A6.982 6.982 0 0019 11.998z"

projects/voicecapture-angular/src/lib/voicecapture-angular.component.legacy.ts

@@ -173,7 +173,7 @@ export class VoiceCaptureLegacy implements OnInit {
     }
   }
 
-  private getTranslation(key: string): string {
+  public getTranslation(key: string): string {
     const translationsForLang =
       this.translations[this.lang] || this.translations['en-US'];
     return translationsForLang[key] || key;

projects/voicecapture-angular/src/lib/voicecapture-angular.component.ts

@@ -26,6 +26,7 @@ export class VoiceCapture implements OnInit {
   @Input() start: WritableSignal<boolean> = signal(false);
   @Input() lang: string = 'en';
   @Input() mode: string = 'fullscreen';
+  @Input() clipboard: boolean = false;
   @Output() voiceTranscript = new EventEmitter<string>();
 
   finalTranscript: string = '';
@@ -164,6 +165,16 @@ export class VoiceCapture implements OnInit {
     this.updateText(interimTranscript || this.finalTranscript);
 
     if (this.finalTranscript) {
+      if (this.clipboard) {
+        navigator.clipboard.writeText(this.finalTranscript).then(
+          () => {
+            console.log('Text copied to clipboard');
+          },
+          (err) => {
+            console.error('Could not copy text to clipboard', err);
+          }
+        );
+      }
       this.voiceTranscript.emit(this.finalTranscript);
       this.deactivateVoice();
     }
@@ -176,7 +187,7 @@ export class VoiceCapture implements OnInit {
     }
   }
 
-  private getTranslation(key: string): string {
+  public getTranslation(key: string): string {
     const translationsForLang =
       this.translations[this.lang] || this.translations['en-US'];
     return translationsForLang[key] || key;

projects/voicecapture-angular/src/lib/voicecapture-angular.translate.ts

@@ -1,80 +1,106 @@
 export const translates = {
   en: {
-    speakNow: 'Speak now',
-    noSpeech: 'No speech detected.',
-    audioCapture: 'Audio capture problem.',
-    enableMicrophone: 'Enable the microphone',
+    speakNow: "Speak now",
+    noSpeech: "No speech detected.",
+    audioCapture: "Audio capture problem.",
+    enableMicrophone: "Enable the microphone",
+    close: "Close voice capture",
+    open: "Start voice capture",
   },
   pt: {
-    speakNow: 'Fale agora',
-    noSpeech: 'Nenhuma fala detectada.',
-    audioCapture: 'Problema na captura de áudio.',
-    enableMicrophone: 'Ative o microfone',
+    speakNow: "Fale agora",
+    noSpeech: "Nenhuma fala detectada.",
+    audioCapture: "Problema na captura de áudio.",
+    enableMicrophone: "Ative o microfone",
+    close: "Fechar captura de voz",
+    open: "Iniciar captura de voz",
   },
   es: {
-    speakNow: 'Habla ahora',
-    noSpeech: 'No se detectó voz.',
-    audioCapture: 'Problema en la captura de audio.',
-    enableMicrophone: 'Activa el micrófono',
+    speakNow: "Habla ahora",
+    noSpeech: "No se detectó voz.",
+    audioCapture: "Problema en la captura de audio.",
+    enableMicrophone: "Activa el micrófono",
+    close: "Cerrar captura de voz",
+    open: "Iniciar captura de voz",
   },
   fr: {
-    speakNow: 'Parlez maintenant',
-    noSpeech: 'Aucune parole détectée.',
-    audioCapture: 'Problème de capture audio.',
-    enableMicrophone: 'Activez le microphone',
+    speakNow: "Parlez maintenant",
+    noSpeech: "Aucune parole détectée.",
+    audioCapture: "Problème de capture audio.",
+    enableMicrophone: "Activez le microphone",
+    close: "Fermer la capture vocale",
+    open: "Démarrer la capture vocale",
   },
   de: {
-    speakNow: 'Sprich jetzt',
-    noSpeech: 'Keine Sprache erkannt.',
-    audioCapture: 'Audioproblem.',
-    enableMicrophone: 'Aktivieren Sie das Mikrofon',
+    speakNow: "Sprich jetzt",
+    noSpeech: "Keine Sprache erkannt.",
+    audioCapture: "Audioproblem.",
+    enableMicrophone: "Aktivieren Sie das Mikrofon",
+    close: "Spracherfassung schließen",
+    open: "Spracherfassung starten",
   },
   it: {
-    speakNow: 'Parla ora',
-    noSpeech: 'Nessuna parola rilevata.',
-    audioCapture: 'Problema con la cattura audio.',
-    enableMicrophone: 'Abilita il microfono',
+    speakNow: "Parla ora",
+    noSpeech: "Nessuna parola rilevata.",
+    audioCapture: "Problema con la cattura audio.",
+    enableMicrophone: "Abilita il microfono",
+    close: "Chiudere la cattura vocale",
+    open: "Avviare la cattura vocale",
   },
   ja: {
-    speakNow: '今話してください',
-    noSpeech: '音声が検出されませんでした。',
-    audioCapture: 'オーディオキャプチャの問題。',
-    enableMicrophone: 'マイクを有効にしてください',
+    speakNow: "今話してください",
+    noSpeech: "音声が検出されませんでした。",
+    audioCapture: "オーディオキャプチャの問題。",
+    enableMicrophone: "マイクを有効にしてください",
+    close: "音声キャプチャを閉じる",
+    open: "音声キャプチャを開始",
   },
   zh: {
-    speakNow: '现在说话',
-    noSpeech: '没有检测到语音。',
-    audioCapture: '音频捕获问题。',
-    enableMicrophone: '启用麦克风',
+    speakNow: "现在说话",
+    noSpeech: "没有检测到语音。",
+    audioCapture: "音频捕获问题。",
+    enableMicrophone: "启用麦克风",
+    close: "关闭语音捕捉",
+    open: "开始语音捕捉",
   },
   ru: {
-    speakNow: 'Говорите сейчас',
-    noSpeech: 'Речь не обнаружена.',
-    audioCapture: 'Проблема с захватом звука.',
-    enableMicrophone: 'Включите микрофон',
+    speakNow: "Говорите сейчас",
+    noSpeech: "Речь не обнаружена.",
+    audioCapture: "Проблема с захватом звука.",
+    enableMicrophone: "Включите микрофон",
+    close: "Закрыть захват голоса",
+    open: "Начать захват голоса",
   },
   ar: {
-    speakNow: 'تحدث الآن',
-    noSpeech: 'لم يتم اكتشاف الكلام.',
-    audioCapture: 'مشكلة في التقاط الصوت.',
-    enableMicrophone: 'قم بتمكين الميكروفون',
+    speakNow: "تحدث الآن",
+    noSpeech: "لم يتم اكتشاف الكلام.",
+    audioCapture: "مشكلة في التقاط الصوت.",
+    enableMicrophone: "قم بتمكين الميكروفون",
+    close: "إغلاق التقاط الصوت",
+    open: "بدء التقاط الصوت",
   },
   ko: {
-    speakNow: '지금 말하세요',
-    noSpeech: '음성이 감지되지 않았습니다.',
-    audioCapture: '오디오 캡처 문제.',
-    enableMicrophone: '마이크를 활성화하세요',
+    speakNow: "지금 말하세요",
+    noSpeech: "음성이 감지되지 않았습니다.",
+    audioCapture: "오디오 캡처 문제.",
+    enableMicrophone: "마이크를 활성화하세요",
+    close: "음성 캡처 닫기",
+    open: "음성 캡처 시작",
   },
   nl: {
-    speakNow: 'Spreek nu',
-    noSpeech: 'Geen spraak gedetecteerd.',
-    audioCapture: 'Probleem met audiovangst.',
-    enableMicrophone: 'Activeer de microfoon',
+    speakNow: "Spreek nu",
+    noSpeech: "Geen spraak gedetecteerd.",
+    audioCapture: "Probleem met audiovangst.",
+    enableMicrophone: "Activeer de microfoon",
+    close: "Stemopname sluiten",
+    open: "Stemopname starten",
   },
   sv: {
-    speakNow: 'Tala nu',
-    noSpeech: 'Ingen tal upptäckt.',
-    audioCapture: 'Problem med ljudinspelning.',
-    enableMicrophone: 'Aktivera mikrofonen',
+    speakNow: "Tala nu",
+    noSpeech: "Ingen tal upptäckt.",
+    audioCapture: "Problem med ljudinspelning.",
+    enableMicrophone: "Aktivera mikrofonen",
+    close: "Stäng röstinspelning",
+    open: "Starta röstinspelning",
   },
 };

src/app/example/example.component.html

@@ -43,6 +43,7 @@
     (voiceTranscript)="returnVoiceTranscript($event)"
     [lang]="langSelect"
     [mode]="modeSelect"
+    [clipboard]="true"
   />
 </nucleus-box>