Skip to content

Commit 92652bb

Browse files
lucasferreiralimaxlucasferreiralimax
authored
Merge pull request #2 from react-a11y/enhance-a11y
Accessibility and Usability Improvements for the VoiceCapture
2 parents f915914 + 78f39b7 commit 92652bb

File tree

3 files changed

+125
-82
lines changed

3 files changed

+125
-82
lines changed

Diff for: ‎src/App.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ function App() {
3131
start={start}
3232
lang={lang}
3333
mode={mode}
34+
clipboard
3435
onVoiceTranscript={handleVoiceTranscript}
3536
onDeactivate={handleDeactivate}
3637
/>

Diff for: ‎src/VoiceCapture.translate.ts

+105-79
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,106 @@
11
export const translates = {
2-
en: {
3-
speakNow: 'Speak now',
4-
noSpeech: 'No speech detected.',
5-
audioCapture: 'Audio capture problem.',
6-
enableMicrophone: 'Enable the microphone',
7-
},
8-
pt: {
9-
speakNow: 'Fale agora',
10-
noSpeech: 'Nenhuma fala detectada.',
11-
audioCapture: 'Problema na captura de áudio.',
12-
enableMicrophone: 'Ative o microfone',
13-
},
14-
es: {
15-
speakNow: 'Habla ahora',
16-
noSpeech: 'No se detectó voz.',
17-
audioCapture: 'Problema en la captura de audio.',
18-
enableMicrophone: 'Activa el micrófono',
19-
},
20-
fr: {
21-
speakNow: 'Parlez maintenant',
22-
noSpeech: 'Aucune parole détectée.',
23-
audioCapture: 'Problème de capture audio.',
24-
enableMicrophone: 'Activez le microphone',
25-
},
26-
de: {
27-
speakNow: 'Sprich jetzt',
28-
noSpeech: 'Keine Sprache erkannt.',
29-
audioCapture: 'Audioproblem.',
30-
enableMicrophone: 'Aktivieren Sie das Mikrofon',
31-
},
32-
it: {
33-
speakNow: 'Parla ora',
34-
noSpeech: 'Nessuna parola rilevata.',
35-
audioCapture: 'Problema con la cattura audio.',
36-
enableMicrophone: 'Abilita il microfono',
37-
},
38-
ja: {
39-
speakNow: '今話してください',
40-
noSpeech: '音声が検出されませんでした。',
41-
audioCapture: 'オーディオキャプチャの問題。',
42-
enableMicrophone: 'マイクを有効にしてください',
43-
},
44-
zh: {
45-
speakNow: '现在说话',
46-
noSpeech: '没有检测到语音。',
47-
audioCapture: '音频捕获问题。',
48-
enableMicrophone: '启用麦克风',
49-
},
50-
ru: {
51-
speakNow: 'Говорите сейчас',
52-
noSpeech: 'Речь не обнаружена.',
53-
audioCapture: 'Проблема с захватом звука.',
54-
enableMicrophone: 'Включите микрофон',
55-
},
56-
ar: {
57-
speakNow: 'تحدث الآن',
58-
noSpeech: 'لم يتم اكتشاف الكلام.',
59-
audioCapture: 'مشكلة في التقاط الصوت.',
60-
enableMicrophone: 'قم بتمكين الميكروفون',
61-
},
62-
ko: {
63-
speakNow: '지금 말하세요',
64-
noSpeech: '음성이 감지되지 않았습니다.',
65-
audioCapture: '오디오 캡처 문제.',
66-
enableMicrophone: '마이크를 활성화하세요',
67-
},
68-
nl: {
69-
speakNow: 'Spreek nu',
70-
noSpeech: 'Geen spraak gedetecteerd.',
71-
audioCapture: 'Probleem met audiovangst.',
72-
enableMicrophone: 'Activeer de microfoon',
73-
},
74-
sv: {
75-
speakNow: 'Tala nu',
76-
noSpeech: 'Ingen tal upptäckt.',
77-
audioCapture: 'Problem med ljudinspelning.',
78-
enableMicrophone: 'Aktivera mikrofonen',
79-
},
80-
};
2+
en: {
3+
speakNow: "Speak now",
4+
noSpeech: "No speech detected.",
5+
audioCapture: "Audio capture problem.",
6+
enableMicrophone: "Enable the microphone",
7+
close: "Close voice capture",
8+
open: "Start voice capture",
9+
},
10+
pt: {
11+
speakNow: "Fale agora",
12+
noSpeech: "Nenhuma fala detectada.",
13+
audioCapture: "Problema na captura de áudio.",
14+
enableMicrophone: "Ative o microfone",
15+
close: "Fechar captura de voz",
16+
open: "Iniciar captura de voz",
17+
},
18+
es: {
19+
speakNow: "Habla ahora",
20+
noSpeech: "No se detectó voz.",
21+
audioCapture: "Problema en la captura de audio.",
22+
enableMicrophone: "Activa el micrófono",
23+
close: "Cerrar captura de voz",
24+
open: "Iniciar captura de voz",
25+
},
26+
fr: {
27+
speakNow: "Parlez maintenant",
28+
noSpeech: "Aucune parole détectée.",
29+
audioCapture: "Problème de capture audio.",
30+
enableMicrophone: "Activez le microphone",
31+
close: "Fermer la capture vocale",
32+
open: "Démarrer la capture vocale",
33+
},
34+
de: {
35+
speakNow: "Sprich jetzt",
36+
noSpeech: "Keine Sprache erkannt.",
37+
audioCapture: "Audioproblem.",
38+
enableMicrophone: "Aktivieren Sie das Mikrofon",
39+
close: "Spracherfassung schließen",
40+
open: "Spracherfassung starten",
41+
},
42+
it: {
43+
speakNow: "Parla ora",
44+
noSpeech: "Nessuna parola rilevata.",
45+
audioCapture: "Problema con la cattura audio.",
46+
enableMicrophone: "Abilita il microfono",
47+
close: "Chiudere la cattura vocale",
48+
open: "Avviare la cattura vocale",
49+
},
50+
ja: {
51+
speakNow: "今話してください",
52+
noSpeech: "音声が検出されませんでした。",
53+
audioCapture: "オーディオキャプチャの問題。",
54+
enableMicrophone: "マイクを有効にしてください",
55+
close: "音声キャプチャを閉じる",
56+
open: "音声キャプチャを開始",
57+
},
58+
zh: {
59+
speakNow: "现在说话",
60+
noSpeech: "没有检测到语音。",
61+
audioCapture: "音频捕获问题。",
62+
enableMicrophone: "启用麦克风",
63+
close: "关闭语音捕捉",
64+
open: "开始语音捕捉",
65+
},
66+
ru: {
67+
speakNow: "Говорите сейчас",
68+
noSpeech: "Речь не обнаружена.",
69+
audioCapture: "Проблема с захватом звука.",
70+
enableMicrophone: "Включите микрофон",
71+
close: "Закрыть захват голоса",
72+
open: "Начать захват голоса",
73+
},
74+
ar: {
75+
speakNow: "تحدث الآن",
76+
noSpeech: "لم يتم اكتشاف الكلام.",
77+
audioCapture: "مشكلة في التقاط الصوت.",
78+
enableMicrophone: "قم بتمكين الميكروفون",
79+
close: "إغلاق التقاط الصوت",
80+
open: "بدء التقاط الصوت",
81+
},
82+
ko: {
83+
speakNow: "지금 말하세요",
84+
noSpeech: "음성이 감지되지 않았습니다.",
85+
audioCapture: "오디오 캡처 문제.",
86+
enableMicrophone: "마이크를 활성화하세요",
87+
close: "음성 캡처 닫기",
88+
open: "음성 캡처 시작",
89+
},
90+
nl: {
91+
speakNow: "Spreek nu",
92+
noSpeech: "Geen spraak gedetecteerd.",
93+
audioCapture: "Probleem met audiovangst.",
94+
enableMicrophone: "Activeer de microfoon",
95+
close: "Stemopname sluiten",
96+
open: "Stemopname starten",
97+
},
98+
sv: {
99+
speakNow: "Tala nu",
100+
noSpeech: "Ingen tal upptäckt.",
101+
audioCapture: "Problem med ljudinspelning.",
102+
enableMicrophone: "Aktivera mikrofonen",
103+
close: "Stäng röstinspelning",
104+
open: "Starta röstinspelning",
105+
},
106+
};

Diff for: ‎src/VoiceCapture.tsx

+19-3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const VoiceCapture = ({
1010
start,
1111
lang = "en",
1212
mode = "fullscreen",
13+
clipboard = false,
1314
onVoiceTranscript,
1415
onDeactivate,
1516
}: any) => {
@@ -127,6 +128,16 @@ const VoiceCapture = ({
127128
updateText(interimTranscript || finalTranscriptRef.current);
128129

129130
if (finalTranscriptRef.current) {
131+
if(clipboard) {
132+
navigator.clipboard.writeText(finalTranscriptRef.current).then(
133+
() => {
134+
console.log('Text copied to clipboard');
135+
},
136+
(err) => {
137+
console.error('Could not copy text to clipboard', err);
138+
}
139+
);
140+
}
130141
onVoiceTranscript(finalTranscriptRef.current);
131142
deactivateVoice();
132143
}
@@ -151,20 +162,25 @@ const VoiceCapture = ({
151162
<section
152163
className={`voicecapture ${start ? "active" : ""} ${mode ? mode : ""}`}
153164
onClick={() => deactivateVoice()}
165+
aria-modal="true"
166+
role="dialog"
167+
aria-expanded={start ? "true" : "false"}
154168
>
155-
<button className="exit" type="button" onClick={() => deactivateVoice()}>
156-
<i className="icon icon-exit">X</i>
169+
<button className="exit" type="button" onClick={() => deactivateVoice()} aria-label={getTranslation('close')}>
170+
<i className="icon icon-exit" aria-hidden="true">X</i>
157171
</button>
158-
<p ref={textTipRef} className="text-tip"></p>
172+
<p ref={textTipRef} className="text-tip" aria-live="polite"></p>
159173
<button
160174
type="button"
161175
className={`btn-voice ${animationButton ? "active" : ""}`}
176+
aria-label={getTranslation('open')}
162177
>
163178
<svg
164179
xmlns="http://www.w3.org/2000/svg"
165180
viewBox="0 0 24 24"
166181
width="24"
167182
height="24"
183+
aria-hidden="true"
168184
>
169185
<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" />
170186
<path fill="none" d="M0 0h24v24H0z" />

0 commit comments

Comments
 (0)