Adds a condition for reduced motion where the data-reduced-motion attribute will override the window media match. If data-reduced-motion is set to true, the component will NOT animate. If data-reduced-motion is set to false, the component WILL animate.

Author: jamieshark

README.md

@@ -23,14 +23,32 @@ import '@github/typing-effect-element'
 
 ## Accessibility
 
-This component detects whether `prefers-reduced-motion` is set on the window
+This component detects whether `prefers-reduced-motion` is set on the window:
 
 ```js
 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

@@ -43,6 +43,8 @@ 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
     }