[#2623] Fixed translation data-attributes for toggle with SpeechSynth…

…esis
maykinmedia · Oct 22, 2024 · ae12702 · ae12702
1 parent 4036b5c
commit ae12702
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 38 deletions.
diff --git a/src/open_inwoner/components/templates/components/Header/AccessibilityHeader.html b/src/open_inwoner/components/templates/components/Header/AccessibilityHeader.html
@@ -9,7 +9,8 @@
 
         <li class="accessibility-header__list-item">
             {% trans "Lees voor" as link_text %}
-            {% link href="#" icon="volume_up" text=link_text extra_classes="accessibility--read" %}
+            {% trans "Pauzeer" as aria_label %}
+            {% link href="#" icon="volume_up" text=link_text extra_classes="accessibility--read" data_label=aria_label data_title=aria_label %}
         </li>
 
         <li class="accessibility-header__list-item">

diff --git a/src/open_inwoner/js/components/accessibility/read.js b/src/open_inwoner/js/components/accessibility/read.js
@@ -3,12 +3,14 @@ const readOutButtons = document.querySelectorAll('.accessibility--read')
 class ReadOut {
   constructor(node) {
     this.node = node
+
     this.speechSynthesis = window.speechSynthesis
     this.SpeechSynthesisUtterance = window.SpeechSynthesisUtterance
     this.isPaused = false // Track if speech is paused
+    this.isReading = false // Track if speech is currently reading
 
     if ('speechSynthesis' in window) {
-      this.node.addEventListener('click', this.read)
+      this.node.addEventListener('click', this.handleReadPauseToggle)
     } else {
       this.node.parentElement.remove()
     }
@@ -24,33 +26,33 @@ class ReadOut {
       speechSynthesis.onvoiceschanged = populateVoiceList
     }
 
-    // Stop speech synthesis and reset on page unload
     window.addEventListener('beforeunload', this.stopSpeech)
   }
 
   stopSpeech = () => {
-    // Stop any ongoing speech
-    if (this.speechSynthesis.speaking) {
-      this.speechSynthesis.cancel() // Cancel ongoing speech
-      this.isPaused = false // Reset pause state
-      this.updateButtonTextAndIcon(false) // Reset button text and icon
+    if (this.speechSynthesis.speaking || this.isPaused) {
+      this.speechSynthesis.cancel()
+      this.isPaused = false
+      this.isReading = false
+      this.updateButtonTextAndIcon(false)
     }
   }
 
-  read = (event) => {
+  handleReadPauseToggle = (event) => {
     event.preventDefault()
 
-    if (this.speechSynthesis.speaking) {
-      if (!this.isPaused) {
-        this.updateButtonTextAndIcon(true) // Change to "Pauzeer"
-        this.speechSynthesis.pause()
-        this.isPaused = true
-      } else {
-        this.updateButtonTextAndIcon(false) // Change back to "Lees voor"
-        this.speechSynthesis.resume()
-        this.isPaused = false
-      }
+    if (this.speechSynthesis.speaking && !this.isPaused) {
+      // Pausing only when playing
+      this.speechSynthesis.pause()
+      this.isPaused = true
+      this.updateButtonTextAndIcon(false)
+    } else if (this.isPaused) {
+      // Resume when paused
+      this.speechSynthesis.resume()
+      this.isPaused = false
+      this.updateButtonTextAndIcon(true)
     } else {
+      // When speech is not playing, start it
       let main = document.querySelector('.grid__main')
       if (!main) {
         main = document.querySelector('main')
@@ -59,37 +61,35 @@ class ReadOut {
       // console.log(main.textContent)
       let text = this.getText(main)
       // console.log(text)
-
       const utterThis = new this.SpeechSynthesisUtterance(text)
+
       utterThis.onend = () => {
-        this.updateButtonTextAndIcon(false) // Reset text and icon after reading ends
-        this.isPaused = false // Reset pause state
+        this.isReading = false
+        this.updateButtonTextAndIcon(false)
       }
 
       this.speechSynthesis.speak(utterThis)
-      this.updateButtonTextAndIcon(true) // Change to "Pauzeer" when speech starts
+      this.isReading = true
       this.isPaused = false
+      this.updateButtonTextAndIcon(true) // Switch when speech starts
     }
   }
 
-  updateButtonTextAndIcon(isPaused) {
+  updateButtonTextAndIcon(isReading) {
     const linkText = this.node.querySelector('.link__text')
     const icon = this.node.querySelector('.material-icons')
 
-    // Use a timeout to ensure the UI updates correctly
-    setTimeout(() => {
-      if (isPaused) {
-        linkText.textContent = 'Pauzeer' // Change to "Pauzeer"
-        icon.textContent = 'pause' // Change icon
-        this.node.setAttribute('aria-label', 'Pauzeer') // Update aria-label
-        this.node.setAttribute('title', 'Pauzeer') // Update title
-      } else {
-        linkText.textContent = 'Lees voor'
-        icon.textContent = 'volume_up' // Change icon back to "volume_up"
-        this.node.setAttribute('aria-label', 'Lees voor') // Update aria-label
-        this.node.setAttribute('title', 'Lees voor') // Update title
-      }
-    }, 0) // Set timeout to 0 to allow DOM updates to take effect
+    if (isReading) {
+      linkText.textContent = 'Pauzeer'
+      icon.textContent = 'pause'
+      this.node.setAttribute('aria-label', 'Pauzeer')
+      this.node.setAttribute('title', 'Pauzeer')
+    } else {
+      linkText.textContent = 'Lees voor'
+      icon.textContent = 'volume_up' // Change icon back
+      this.node.setAttribute('aria-label', 'Lees voor')
+      this.node.setAttribute('title', 'Lees voor')
+    }
   }
 
   getText = (node) => {