update announcer to be classless

Author: Chris Lorenzo

src/Accessibility/Announcer.js

@@ -17,168 +17,116 @@
  * limitations under the License.
  */
 
-import Speech from './Speech.js'
+import SpeechEngine from './Speech.js'
 import { debounce, getElmName } from './utils.js'
 
-const defaultOptions = {
-  voiceOutDelay: 500,
-  announcerFocusDebounce: 400,
-  announcerTimeout: 5 * 60 * 1000, //Five Minutes
-}
-
-export default function Announcer(Base, speak = Speech, announcerOptions = {}) {
-  const options = { ...defaultOptions, ...announcerOptions }
-
-  return class extends Base {
-    _construct() {
-      this._debounceAnnounceFocusChanges = debounce(
-        this._announceFocusChanges.bind(this),
-        options.announcerFocusDebounce
-      )
+let resetFocusTimer;
+let prevFocusPath = [];
+let currentlySpeaking;
+let voiceOutDisabled = false;
+const fiveMinutes =  300000;
 
-      this._resetFocusTimer = debounce(() => {
-        // Reset focus path for full announce
-        this._lastFocusPath = undefined
-      }, options.announcerTimeout)
-
-      // Lightning only calls Focus Change on second focus
-      this._focusChange()
-    }
-
-    _voiceOut(toSpeak) {
-      if (this._voiceOutDisabled) {
-        return
-      }
+function onFocusChangeCore(focusPath = []) {
+  if (!Announcer.enabled) {
+    return
+  }
 
-      const speech = speak(toSpeak)
-      // event using speech synthesis api promise
-      if (speech && speech.series) {
-        speech.series.then(() => {
-          this.stage.emit('announceEnded')
-        })
-      }
+  const loaded = focusPath.every(elm => !elm.loading)
+  const focusDiff = focusPath.filter(elm => !prevFocusPath.includes(elm))
 
-      // event in case speech synthesis api is flakey,
-      // assume the ammount of time it takes to read each word
-      const toAnnounceStr = Array.isArray(toSpeak) ? toSpeak.concat().join(' ') : toSpeak
-      const toAnnounceWords = toAnnounceStr.split(' ')
-      const timeoutDelay = toAnnounceWords.length * options.voiceOutDelay
-      clearTimeout(this._announceEndedTimeout)
-      this._announceEndedTimeout = setTimeout(() => {
-        this.stage.emit('announceTimeoutEnded')
-      }, timeoutDelay)
-
-      return speech
-    }
+  resetFocusTimer()
+  Announcer.cancel()
 
-    _disable() {
-      clearTimeout(this._announceEndedTimeout)
-      this.stage.emit('announceEnded')
-      this.stage.emit('announceTimeoutEnded')
-    }
+  if (!loaded) {
+    Announcer.onFocusChange()
+    return
+  }
 
-    set announcerEnabled(val) {
-      this._announcerEnabled = val
-      this._focusChange()
-    }
+  prevFocusPath = focusPath.slice(0)
 
-    get announcerEnabled() {
-      return this._announcerEnabled
+  let toAnnounceText = [];
+  let toAnnounce = focusDiff.reduce((acc, elm) => {
+    if (elm.announce) {
+      acc.push([getElmName(elm), 'Announce', elm.announce])
+      toAnnounceText.push(elm.announce)
+    } else if (elm.title) {
+      acc.push([getElmName(elm), 'Title', elm.title])
+      toAnnounceText.push(elm.title)
     }
-
-    _focusChange() {
-      if (!this._resetFocusTimer) {
-        return
-      }
-
-      this._resetFocusTimer()
-      this.$announcerCancel()
-      this._debounceAnnounceFocusChanges()
+    return acc
+  }, [])
+
+  focusDiff.reverse().reduce((acc, elm) => {
+    if (elm.announceContext) {
+      acc.push([getElmName(elm), 'Context', elm.announceContext])
+      toAnnounceText.push(elm.announceContext)
+    } else {
+      acc.push([getElmName(elm), 'No Context', ''])
     }
+    return acc
+  }, toAnnounce)
 
-    _announceFocusChanges() {
-      const focusPath = this.application.focusPath || []
-      const lastFocusPath = this._lastFocusPath || []
-      const loaded = focusPath.every(elm => !elm.loading)
-      const focusDiff = focusPath.filter(elm => !lastFocusPath.includes(elm))
-
-      if (!loaded) {
-        this._debounceAnnounceFocusChanges()
-        return
-      }
-
-      this._lastFocusPath = focusPath.slice(0)
-      // Provide hook for focus diff for things like TextBanner
-      this.focusDiffHook = focusDiff
-
-      if (!this.announcerEnabled) {
-        return
-      }
-
-      let toAnnounce = focusDiff.reduce((acc, elm) => {
-        if (elm.announce) {
-          acc.push([getElmName(elm), 'Announce', elm.announce])
-        } else if (elm.title) {
-          acc.push([getElmName(elm), 'Title', elm.title || ''])
-        }
-        return acc
-      }, [])
-
-      focusDiff.reverse().reduce((acc, elm) => {
-        if (elm.announceContext) {
-          acc.push([getElmName(elm), 'Context', elm.announceContext])
-        } else {
-          acc.push([getElmName(elm), 'No Context', ''])
-        }
-        return acc
-      }, toAnnounce)
-
-      if (this.debug) {
-        console.table(toAnnounce)
-      }
+  if (Announcer.debug) {
+    console.table(toAnnounce)
+  }
 
-      toAnnounce = toAnnounce.reduce((acc, a) => {
-        const txt = a[2]
-        txt && acc.push(txt)
-        return acc
-      }, [])
-
-      if (toAnnounce.length) {
-        this.$announcerCancel()
-        this._currentlySpeaking = this._voiceOut(
-          toAnnounce.reduce((acc, val) => acc.concat(val), [])
-        )
-      }
-    }
+  if (toAnnounceText.length) {
+    Announcer.cancel()
+    return currentlySpeaking = Announcer._textToSpeech(
+      toAnnounceText.reduce((acc, val) => acc.concat(val), [])
+    )
+  }
+}
 
-    $announce(toAnnounce, { append = false, notification = false } = {}) {
-      if (this.announcerEnabled) {
-        this._debounceAnnounceFocusChanges.flush()
-        if (append && this._currentlySpeaking && this._currentlySpeaking.active) {
-          this._currentlySpeaking.append(toAnnounce)
+const Announcer = {
+  enabled: true,
+  debug: false,
+  cancel: function() {
+    currentlySpeaking && currentlySpeaking.cancel()
+  },
+  refresh: function(depth = 0) {
+    prevFocusPath = prevFocusPath.slice(0, depth)
+    resetFocusTimer()
+  },
+  speak: function(text, { append = false, notification = false } = {}) {
+      if (Announcer.enabled) {
+        Announcer.onFocusChange.flush()
+        if (append && currentlySpeaking && currentlySpeaking.active) {
+          currentlySpeaking.append(text)
         } else {
-          this.$announcerCancel()
-          this._currentlySpeaking = this._voiceOut(toAnnounce)
+          Announcer.cancel()
+          currentlySpeaking = Announcer._textToSpeech(text)
         }
 
         if (notification) {
-          this._voiceOutDisabled = true
-          this._currentlySpeaking.series.finally(() => {
-            this._voiceOutDisabled = false
-            this.$announcerRefresh()
+          voiceOutDisabled = true
+          currentlySpeaking.series.finally(() => {
+            voiceOutDisabled = false
+            Announcer.refresh()
           })
         }
       }
-    }
 
-    $announcerCancel() {
-      this._currentlySpeaking && this._currentlySpeaking.cancel()
+      return currentlySpeaking
+  },
+  _textToSpeech(toSpeak) {
+    if (voiceOutDisabled) {
+      return
     }
 
-    $announcerRefresh(depth = 0) {
-      this._lastFocusPath = this._lastFocusPath.slice(0, depth)
-      this._resetFocusTimer()
-      this._focusChange()
-    }
+    return SpeechEngine(toSpeak)
+  },
+  init: function(focusDebounce = 400, focusChangeTimeout = fiveMinutes) {
+    Announcer.onFocusChange = debounce(
+      onFocusChangeCore,
+      focusDebounce
+    );
+
+    resetFocusTimer = debounce(() => {
+      // Reset focus path for full announce
+      prevFocusPath = []
+    }, focusChangeTimeout)
   }
 }
+Announcer.init();
+export default Announcer;