Merge pull request #2 from react-a11y/enhance-a11y

Accessibility and Usability Improvements for the VoiceCapture
react-a11y · Nov 13, 2024 · 92652bb · 92652bb
2 parents f915914 + 78f39b7
commit 92652bb
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 82 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -31,6 +31,7 @@ function App() {
         start={start}
         lang={lang}
         mode={mode}
+        clipboard
         onVoiceTranscript={handleVoiceTranscript}
         onDeactivate={handleDeactivate}
       />

diff --git a/src/VoiceCapture.translate.ts b/src/VoiceCapture.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',
-    },
-    pt: {
-      speakNow: 'Fale agora',
-      noSpeech: 'Nenhuma fala detectada.',
-      audioCapture: 'Problema na captura de áudio.',
-      enableMicrophone: 'Ative o microfone',
-    },
-    es: {
-      speakNow: 'Habla ahora',
-      noSpeech: 'No se detectó voz.',
-      audioCapture: 'Problema en la captura de audio.',
-      enableMicrophone: 'Activa el micrófono',
-    },
-    fr: {
-      speakNow: 'Parlez maintenant',
-      noSpeech: 'Aucune parole détectée.',
-      audioCapture: 'Problème de capture audio.',
-      enableMicrophone: 'Activez le microphone',
-    },
-    de: {
-      speakNow: 'Sprich jetzt',
-      noSpeech: 'Keine Sprache erkannt.',
-      audioCapture: 'Audioproblem.',
-      enableMicrophone: 'Aktivieren Sie das Mikrofon',
-    },
-    it: {
-      speakNow: 'Parla ora',
-      noSpeech: 'Nessuna parola rilevata.',
-      audioCapture: 'Problema con la cattura audio.',
-      enableMicrophone: 'Abilita il microfono',
-    },
-    ja: {
-      speakNow: '今話してください',
-      noSpeech: '音声が検出されませんでした。',
-      audioCapture: 'オーディオキャプチャの問題。',
-      enableMicrophone: 'マイクを有効にしてください',
-    },
-    zh: {
-      speakNow: '现在说话',
-      noSpeech: '没有检测到语音。',
-      audioCapture: '音频捕获问题。',
-      enableMicrophone: '启用麦克风',
-    },
-    ru: {
-      speakNow: 'Говорите сейчас',
-      noSpeech: 'Речь не обнаружена.',
-      audioCapture: 'Проблема с захватом звука.',
-      enableMicrophone: 'Включите микрофон',
-    },
-    ar: {
-      speakNow: 'تحدث الآن',
-      noSpeech: 'لم يتم اكتشاف الكلام.',
-      audioCapture: 'مشكلة في التقاط الصوت.',
-      enableMicrophone: 'قم بتمكين الميكروفون',
-    },
-    ko: {
-      speakNow: '지금 말하세요',
-      noSpeech: '음성이 감지되지 않았습니다.',
-      audioCapture: '오디오 캡처 문제.',
-      enableMicrophone: '마이크를 활성화하세요',
-    },
-    nl: {
-      speakNow: 'Spreek nu',
-      noSpeech: 'Geen spraak gedetecteerd.',
-      audioCapture: 'Probleem met audiovangst.',
-      enableMicrophone: 'Activeer de microfoon',
-    },
-    sv: {
-      speakNow: 'Tala nu',
-      noSpeech: 'Ingen tal upptäckt.',
-      audioCapture: 'Problem med ljudinspelning.',
-      enableMicrophone: 'Aktivera mikrofonen',
-    },
-  };
+  en: {
+    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",
+    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",
+    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",
+    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",
+    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",
+    close: "Chiudere la cattura vocale",
+    open: "Avviare la cattura vocale",
+  },
+  ja: {
+    speakNow: "今話してください",
+    noSpeech: "音声が検出されませんでした。",
+    audioCapture: "オーディオキャプチャの問題。",
+    enableMicrophone: "マイクを有効にしてください",
+    close: "音声キャプチャを閉じる",
+    open: "音声キャプチャを開始",
+  },
+  zh: {
+    speakNow: "现在说话",
+    noSpeech: "没有检测到语音。",
+    audioCapture: "音频捕获问题。",
+    enableMicrophone: "启用麦克风",
+    close: "关闭语音捕捉",
+    open: "开始语音捕捉",
+  },
+  ru: {
+    speakNow: "Говорите сейчас",
+    noSpeech: "Речь не обнаружена.",
+    audioCapture: "Проблема с захватом звука.",
+    enableMicrophone: "Включите микрофон",
+    close: "Закрыть захват голоса",
+    open: "Начать захват голоса",
+  },
+  ar: {
+    speakNow: "تحدث الآن",
+    noSpeech: "لم يتم اكتشاف الكلام.",
+    audioCapture: "مشكلة في التقاط الصوت.",
+    enableMicrophone: "قم بتمكين الميكروفون",
+    close: "إغلاق التقاط الصوت",
+    open: "بدء التقاط الصوت",
+  },
+  ko: {
+    speakNow: "지금 말하세요",
+    noSpeech: "음성이 감지되지 않았습니다.",
+    audioCapture: "오디오 캡처 문제.",
+    enableMicrophone: "마이크를 활성화하세요",
+    close: "음성 캡처 닫기",
+    open: "음성 캡처 시작",
+  },
+  nl: {
+    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",
+    close: "Stäng röstinspelning",
+    open: "Starta röstinspelning",
+  },
+};
diff --git a/src/VoiceCapture.tsx b/src/VoiceCapture.tsx
@@ -10,6 +10,7 @@ const VoiceCapture = ({
   start,
   lang = "en",
   mode = "fullscreen",
+  clipboard = false,
   onVoiceTranscript,
   onDeactivate,
 }: any) => {
@@ -127,6 +128,16 @@ const VoiceCapture = ({
     updateText(interimTranscript || finalTranscriptRef.current);
 
     if (finalTranscriptRef.current) {
+      if(clipboard) {
+        navigator.clipboard.writeText(finalTranscriptRef.current).then(
+          () => {
+            console.log('Text copied to clipboard');
+          },
+          (err) => {
+            console.error('Could not copy text to clipboard', err);
+          }
+        );
+      }
       onVoiceTranscript(finalTranscriptRef.current);
       deactivateVoice();
     }
@@ -151,20 +162,25 @@ const VoiceCapture = ({
     <section
       className={`voicecapture ${start ? "active" : ""} ${mode ? mode : ""}`}
       onClick={() => deactivateVoice()}
+      aria-modal="true"
+      role="dialog"
+      aria-expanded={start ? "true" : "false"}
     >
-      <button className="exit" type="button" onClick={() => deactivateVoice()}>
-        <i className="icon icon-exit">X</i>
+      <button className="exit" type="button" onClick={() => deactivateVoice()} aria-label={getTranslation('close')}>
+        <i className="icon icon-exit" aria-hidden="true">X</i>
       </button>
-      <p ref={textTipRef} className="text-tip"></p>
+      <p ref={textTipRef} className="text-tip" aria-live="polite"></p>
       <button
         type="button"
         className={`btn-voice ${animationButton ? "active" : ""}`}
+        aria-label={getTranslation('open')}
       >
         <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" />
           <path fill="none" d="M0 0h24v24H0z" />