Adds tests and getters to set character and line delay to 0 when reduced motion is preferred by user.

Author: jamieshark

.eslintrc.json

@@ -6,6 +6,7 @@
     "plugin:github/typescript"
   ],
   "globals": {
-    "CustomElementElement": "readonly"
+    "CustomElementElement": "readonly",
+    "module": true
   }
 }

karma.config.cjs

@@ -1,4 +1,4 @@
-module.exports = function(config) {
+module.exports = function (config) {
   config.set({
     frameworks: ['mocha', 'chai'],
     files: [

src/index.ts

@@ -39,7 +39,18 @@ class TypingEffectElement extends HTMLElement {
     }
   }
 
+  get prefersReducedMotion(): boolean {
+    if (this.getAttribute('data-reduced-motion') === 'false') {
+      return false
+    } else {
+      return window.matchMedia('(prefers-reduced-motion)').matches
+    }
+  }
+
   get characterDelay(): number {
+    if (this.prefersReducedMotion) {
+      return 0
+    }
     return Math.max(Math.min(0, Math.floor(Number(this.getAttribute('data-character-delay'))), 2_147_483_647)) || 40
   }
 
@@ -51,6 +62,9 @@ class TypingEffectElement extends HTMLElement {
   }
 
   get lineDelay(): number {
+    if (this.prefersReducedMotion) {
+      return 0
+    }
     return Math.max(Math.min(0, Math.floor(Number(this.getAttribute('data-line-delay'))), 2_147_483_647)) || 40
   }
 

test/test.js

@@ -70,12 +70,34 @@ describe('typing-effect', function () {
   describe('delay attributes', function () {
     it('uses defaults when no delays specified', function () {
       const typingEffectElement = document.createElement('typing-effect')
+      typingEffectElement.setAttribute('data-reduced-motion', false)
       document.body.append(typingEffectElement)
 
       assert.equal(typingEffectElement.characterDelay, 40)
       assert.equal(typingEffectElement.lineDelay, 40)
     })
   })
+
+  describe('a11y considerations', function () {
+    it('sets delay to 0 when media query matches (prefers-reduced-motion)', function () {
+      const typingEffectElement = document.createElement('typing-effect')
+      document.body.append(typingEffectElement)
+
+      assert.equal(window.matchMedia('(prefers-reduced-motion)').matches, true)
+      assert.equal(typingEffectElement.characterDelay, 0)
+      assert.equal(typingEffectElement.lineDelay, 0)
+    })
+
+    it('uses data-reduced-motion attribute to override window media query', function () {
+      const typingEffectElement = document.createElement('typing-effect')
+      typingEffectElement.setAttribute('data-reduced-motion', false)
+      document.body.append(typingEffectElement)
+
+      assert.equal(window.matchMedia('(prefers-reduced-motion)').matches, true)
+      assert.equal(typingEffectElement.characterDelay, 40)
+      assert.equal(typingEffectElement.lineDelay, 40)
+    })
+  })
 })
 
 function once(element, eventName) {