Skip to content

Commit c85b78b

Browse files
Merge pull request #2 from angular-a11y/enhance-a11y
Accessibility and Usability Enhancements for the VoiceCapture
2 parents ba6e537 + bc0110d commit c85b78b

5 files changed

+110
-58
lines changed

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

+18-4
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,31 @@
33
[class.active]="start()"
44
(click)="deactivateVoice()"
55
[ngClass]="mode"
6+
aria-modal="true"
7+
role="dialog"
8+
[attr.aria-expanded]="start() ? 'true' : 'false'"
69
>
7-
<button class="exit" type="button" (click)="deactivateVoice()">
8-
<i class="icon icon-exit">X</i>
10+
<button
11+
class="exit"
12+
(click)="deactivateVoice()"
13+
[attr.aria-label]="getTranslation('close')"
14+
type="button"
15+
>
16+
<i class="icon icon-exit" aria-hidden="true">X</i>
917
</button>
10-
<p class="text-tip"></p>
11-
<button type="button" class="btn-voice" [class.active]="animationButton">
18+
<p class="text-tip" aria-live="polite"></p>
19+
<button
20+
class="btn-voice"
21+
[class.active]="animationButton"
22+
[attr.aria-label]="getTranslation('open')"
23+
type="button"
24+
>
1225
<svg
1326
xmlns="http://www.w3.org/2000/svg"
1427
viewBox="0 0 24 24"
1528
width="24"
1629
height="24"
30+
aria-hidden="true"
1731
>
1832
<path
1933
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

+1-1
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ export class VoiceCaptureLegacy implements OnInit {
173173
}
174174
}
175175

176-
private getTranslation(key: string): string {
176+
public getTranslation(key: string): string {
177177
const translationsForLang =
178178
this.translations[this.lang] || this.translations['en-US'];
179179
return translationsForLang[key] || key;

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

+12-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export class VoiceCapture implements OnInit {
2626
@Input() start: WritableSignal<boolean> = signal(false);
2727
@Input() lang: string = 'en';
2828
@Input() mode: string = 'fullscreen';
29+
@Input() clipboard: boolean = false;
2930
@Output() voiceTranscript = new EventEmitter<string>();
3031

3132
finalTranscript: string = '';
@@ -164,6 +165,16 @@ export class VoiceCapture implements OnInit {
164165
this.updateText(interimTranscript || this.finalTranscript);
165166

166167
if (this.finalTranscript) {
168+
if (this.clipboard) {
169+
navigator.clipboard.writeText(this.finalTranscript).then(
170+
() => {
171+
console.log('Text copied to clipboard');
172+
},
173+
(err) => {
174+
console.error('Could not copy text to clipboard', err);
175+
}
176+
);
177+
}
167178
this.voiceTranscript.emit(this.finalTranscript);
168179
this.deactivateVoice();
169180
}
@@ -176,7 +187,7 @@ export class VoiceCapture implements OnInit {
176187
}
177188
}
178189

179-
private getTranslation(key: string): string {
190+
public getTranslation(key: string): string {
180191
const translationsForLang =
181192
this.translations[this.lang] || this.translations['en-US'];
182193
return translationsForLang[key] || key;
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,106 @@
11
export const translates = {
22
en: {
3-
speakNow: 'Speak now',
4-
noSpeech: 'No speech detected.',
5-
audioCapture: 'Audio capture problem.',
6-
enableMicrophone: 'Enable the microphone',
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",
79
},
810
pt: {
9-
speakNow: 'Fale agora',
10-
noSpeech: 'Nenhuma fala detectada.',
11-
audioCapture: 'Problema na captura de áudio.',
12-
enableMicrophone: 'Ative o microfone',
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",
1317
},
1418
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+
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",
1925
},
2026
fr: {
21-
speakNow: 'Parlez maintenant',
22-
noSpeech: 'Aucune parole détectée.',
23-
audioCapture: 'Problème de capture audio.',
24-
enableMicrophone: 'Activez le microphone',
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",
2533
},
2634
de: {
27-
speakNow: 'Sprich jetzt',
28-
noSpeech: 'Keine Sprache erkannt.',
29-
audioCapture: 'Audioproblem.',
30-
enableMicrophone: 'Aktivieren Sie das Mikrofon',
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",
3141
},
3242
it: {
33-
speakNow: 'Parla ora',
34-
noSpeech: 'Nessuna parola rilevata.',
35-
audioCapture: 'Problema con la cattura audio.',
36-
enableMicrophone: 'Abilita il microfono',
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",
3749
},
3850
ja: {
39-
speakNow: '今話してください',
40-
noSpeech: '音声が検出されませんでした。',
41-
audioCapture: 'オーディオキャプチャの問題。',
42-
enableMicrophone: 'マイクを有効にしてください',
51+
speakNow: "今話してください",
52+
noSpeech: "音声が検出されませんでした。",
53+
audioCapture: "オーディオキャプチャの問題。",
54+
enableMicrophone: "マイクを有効にしてください",
55+
close: "音声キャプチャを閉じる",
56+
open: "音声キャプチャを開始",
4357
},
4458
zh: {
45-
speakNow: '现在说话',
46-
noSpeech: '没有检测到语音。',
47-
audioCapture: '音频捕获问题。',
48-
enableMicrophone: '启用麦克风',
59+
speakNow: "现在说话",
60+
noSpeech: "没有检测到语音。",
61+
audioCapture: "音频捕获问题。",
62+
enableMicrophone: "启用麦克风",
63+
close: "关闭语音捕捉",
64+
open: "开始语音捕捉",
4965
},
5066
ru: {
51-
speakNow: 'Говорите сейчас',
52-
noSpeech: 'Речь не обнаружена.',
53-
audioCapture: 'Проблема с захватом звука.',
54-
enableMicrophone: 'Включите микрофон',
67+
speakNow: "Говорите сейчас",
68+
noSpeech: "Речь не обнаружена.",
69+
audioCapture: "Проблема с захватом звука.",
70+
enableMicrophone: "Включите микрофон",
71+
close: "Закрыть захват голоса",
72+
open: "Начать захват голоса",
5573
},
5674
ar: {
57-
speakNow: 'تحدث الآن',
58-
noSpeech: 'لم يتم اكتشاف الكلام.',
59-
audioCapture: 'مشكلة في التقاط الصوت.',
60-
enableMicrophone: 'قم بتمكين الميكروفون',
75+
speakNow: "تحدث الآن",
76+
noSpeech: "لم يتم اكتشاف الكلام.",
77+
audioCapture: "مشكلة في التقاط الصوت.",
78+
enableMicrophone: "قم بتمكين الميكروفون",
79+
close: "إغلاق التقاط الصوت",
80+
open: "بدء التقاط الصوت",
6181
},
6282
ko: {
63-
speakNow: '지금 말하세요',
64-
noSpeech: '음성이 감지되지 않았습니다.',
65-
audioCapture: '오디오 캡처 문제.',
66-
enableMicrophone: '마이크를 활성화하세요',
83+
speakNow: "지금 말하세요",
84+
noSpeech: "음성이 감지되지 않았습니다.",
85+
audioCapture: "오디오 캡처 문제.",
86+
enableMicrophone: "마이크를 활성화하세요",
87+
close: "음성 캡처 닫기",
88+
open: "음성 캡처 시작",
6789
},
6890
nl: {
69-
speakNow: 'Spreek nu',
70-
noSpeech: 'Geen spraak gedetecteerd.',
71-
audioCapture: 'Probleem met audiovangst.',
72-
enableMicrophone: 'Activeer de microfoon',
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",
7397
},
7498
sv: {
75-
speakNow: 'Tala nu',
76-
noSpeech: 'Ingen tal upptäckt.',
77-
audioCapture: 'Problem med ljudinspelning.',
78-
enableMicrophone: 'Aktivera mikrofonen',
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",
79105
},
80106
};

src/app/example/example.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
(voiceTranscript)="returnVoiceTranscript($event)"
4444
[lang]="langSelect"
4545
[mode]="modeSelect"
46+
[clipboard]="true"
4647
/>
4748
</nucleus-box>
4849

0 commit comments

Comments
 (0)