Adds mock condition for window.matchMedia for default case (prevents the test from setting delay to 0 when user has reduced motion set on their system). Removes code paths and mentions of attribute data-reduced-motion because including an escape hatch right now might be a bit confusing.

Author: jamieshark

README.md

@@ -31,24 +31,6 @@ window.matchMedia('(prefers-reduced-motion)').matches === true
 
 If this evaluates to true, any content lines provided will be appended immediately rather than being typed out with a delay.
 
-The data attribute `data-reduced-motion` can be used to override the window media value.
-
-```html
-<typing-effect
-  data-lines='["Welcome to GitHub!", "Let’s begin the adventure"]'
-  data-reduced-motion="true"> <!-- This will NOT animate -->
-  <span data-target="typing-effect.content"></span>
-  <span data-target="typing-effect.cursor">|</span>
-</typing-effect>
-
-<typing-effect
-  data-lines='["Welcome to GitHub!", "Let’s begin the adventure"]'
-  data-reduced-motion="false"> <!-- This WILL animate -->
-  <span data-target="typing-effect.content"></span>
-  <span data-target="typing-effect.cursor">|</span>
-</typing-effect>
-```
-
 ## Browser support
 
 Browsers without native [custom element support][support] require a [polyfill][].

src/index.ts

@@ -41,13 +41,7 @@ class TypingEffectElement extends HTMLElement {
   }
 
   get prefersReducedMotion(): boolean {
-    if (this.getAttribute('data-reduced-motion') === 'false') {
-      return false
-    } else if (this.getAttribute('data-reduced-motion') === 'true') {
-      return true
-    } else {
-      return window.matchMedia('(prefers-reduced-motion)').matches
-    }
+    return window.matchMedia('(prefers-reduced-motion)').matches
   }
 
   get characterDelay(): number {

test/test.js

@@ -68,9 +68,23 @@ describe('typing-effect', function () {
   })
 
   describe('delay attributes', function () {
+    let realMatchMedia
+    before(() => {
+      realMatchMedia = window.matchMedia
+      window.matchMedia = mediaString => {
+        if (mediaString === '(prefers-reduced-motion)') {
+          return {matches: false}
+        }
+        return realMatchMedia(mediaString)
+      }
+    })
+
+    after(() => {
+      window.matchMedia = realMatchMedia
+    })
+
     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)
@@ -102,16 +116,6 @@ describe('typing-effect', function () {
       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)
-    })
   })
 })