From 8f0400296fe7756744be86cdce90c837e34c8bd4 Mon Sep 17 00:00:00 2001 From: yuskhan Date: Mon, 29 Jul 2024 13:32:02 -0400 Subject: [PATCH 1/5] fix: screen reader for edge android --- .../lib/controls/screen-reader.component.ts | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/projects/astral-accessibility/src/lib/controls/screen-reader.component.ts b/projects/astral-accessibility/src/lib/controls/screen-reader.component.ts index 33581c0..f5c1e7a 100644 --- a/projects/astral-accessibility/src/lib/controls/screen-reader.component.ts +++ b/projects/astral-accessibility/src/lib/controls/screen-reader.component.ts @@ -91,6 +91,7 @@ export class ScreenReaderComponent { speech = new SpeechSynthesisUtterance(); userAgent = navigator.userAgent; isApple = false; + isEdgeAndroid = false; synthesisAvailable = true; constructor(private renderer: Renderer2) {} @@ -114,13 +115,15 @@ export class ScreenReaderComponent { } } - getDefaultVoice(voices: Array, isApple = false) { + getDefaultVoice(voices: Array, isApple = false, isEdgeAndroid = false) { const defaultVoice = "Daniel"; - if (voices.length === 0) { + + // Note: Edge Android doesn't have any voices, but still works without setting the voice + if (voices.length > 0 || isEdgeAndroid) { + this.synthesisAvailable = true; + } else { this.synthesisAvailable = false; return null; - } else { - this.synthesisAvailable = true; } // use voice Daniel whenever available @@ -151,8 +154,12 @@ export class ScreenReaderComponent { ngOnInit() { const apple = /iPhone|iPad|iPod|Safari/i; + const edgeAndroid = /EdgA/i; + if (apple.test(this.userAgent) && !/Chrome/.test(this.userAgent)) { this.isApple = true; + } else if (edgeAndroid.test(this.userAgent)) { + this.isEdgeAndroid = true; } // How to use Web Speech API @@ -162,7 +169,7 @@ export class ScreenReaderComponent { voices = speechSynthesis.getVoices(); // default settings, currently user has no way of modifying these - this.speech.voice = this.getDefaultVoice(voices, this.isApple); + this.speech.voice = this.getDefaultVoice(voices, this.isApple, this.isEdgeAndroid); this.speech.lang = "en"; this.speech.rate = 1; this.speech.pitch = 1; @@ -173,7 +180,7 @@ export class ScreenReaderComponent { if (!voices.length) { speechSynthesis.addEventListener("voiceschanged", () => { voices = speechSynthesis.getVoices(); - this.speech.voice = this.getDefaultVoice(voices, this.isApple); + this.speech.voice = this.getDefaultVoice(voices, this.isApple, this.isEdgeAndroid); }); } From 988a0b185e30886da311272ba2f693629c1dc005 Mon Sep 17 00:00:00 2001 From: yuskhan Date: Mon, 29 Jul 2024 13:45:29 -0400 Subject: [PATCH 2/5] chore: run prettier --- .../lib/controls/screen-reader.component.ts | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/projects/astral-accessibility/src/lib/controls/screen-reader.component.ts b/projects/astral-accessibility/src/lib/controls/screen-reader.component.ts index f5c1e7a..571d376 100644 --- a/projects/astral-accessibility/src/lib/controls/screen-reader.component.ts +++ b/projects/astral-accessibility/src/lib/controls/screen-reader.component.ts @@ -115,7 +115,11 @@ export class ScreenReaderComponent { } } - getDefaultVoice(voices: Array, isApple = false, isEdgeAndroid = false) { + getDefaultVoice( + voices: Array, + isApple = false, + isEdgeAndroid = false, + ) { const defaultVoice = "Daniel"; // Note: Edge Android doesn't have any voices, but still works without setting the voice @@ -169,7 +173,11 @@ export class ScreenReaderComponent { voices = speechSynthesis.getVoices(); // default settings, currently user has no way of modifying these - this.speech.voice = this.getDefaultVoice(voices, this.isApple, this.isEdgeAndroid); + this.speech.voice = this.getDefaultVoice( + voices, + this.isApple, + this.isEdgeAndroid, + ); this.speech.lang = "en"; this.speech.rate = 1; this.speech.pitch = 1; @@ -180,7 +188,11 @@ export class ScreenReaderComponent { if (!voices.length) { speechSynthesis.addEventListener("voiceschanged", () => { voices = speechSynthesis.getVoices(); - this.speech.voice = this.getDefaultVoice(voices, this.isApple, this.isEdgeAndroid); + this.speech.voice = this.getDefaultVoice( + voices, + this.isApple, + this.isEdgeAndroid, + ); }); } From 7fbb6f0ece900edc6ce41e11db0e7793b7e6125f Mon Sep 17 00:00:00 2001 From: yuskhan Date: Mon, 29 Jul 2024 16:12:16 -0400 Subject: [PATCH 3/5] chore: use exact prettier version in lint workflow --- .github/workflows/prettier.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml index f667e31..7e77beb 100644 --- a/.github/workflows/prettier.yml +++ b/.github/workflows/prettier.yml @@ -8,4 +8,4 @@ jobs: - name: Checkout uses: actions/checkout@v3 - name: Run Prettier - run: npm install -g prettier && npx prettier --check . + run: npm install -g prettier@^3.0.3 && npx prettier --check . From aa03eddde840d19a213c0ac6dc7e026c1d4a51fd Mon Sep 17 00:00:00 2001 From: yuskhan Date: Mon, 29 Jul 2024 16:36:25 -0400 Subject: [PATCH 4/5] chore: remove npm install from prettier workflow --- .github/workflows/prettier.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml index 7e77beb..70e00ab 100644 --- a/.github/workflows/prettier.yml +++ b/.github/workflows/prettier.yml @@ -8,4 +8,4 @@ jobs: - name: Checkout uses: actions/checkout@v3 - name: Run Prettier - run: npm install -g prettier@^3.0.3 && npx prettier --check . + run: npx prettier@^3.0.3 --check . From 898193b35a40099a4be461a86348cfc4437446db Mon Sep 17 00:00:00 2001 From: yuskhan Date: Mon, 29 Jul 2024 16:37:52 -0400 Subject: [PATCH 5/5] chore: use prettier ~3.0.3 --- .github/workflows/prettier.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml index 70e00ab..d35dbef 100644 --- a/.github/workflows/prettier.yml +++ b/.github/workflows/prettier.yml @@ -8,4 +8,4 @@ jobs: - name: Checkout uses: actions/checkout@v3 - name: Run Prettier - run: npx prettier@^3.0.3 --check . + run: npm install -g prettier@~3.0.3 && npx prettier --check .