feat: disabled wave effect if prefers-reduced-motion: set to reduce

Resolves #740
justintaddei · Jul 16, 2024 · 0ddee01 · 0ddee01
1 parent d42141f
commit 0ddee01
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -74,6 +74,7 @@ After installing and registering the plugin, this is all you need to get started
     - [trigger](#trigger)
     - [disabled](#disabled)
     - [respectDisabledAttribute](#respectdisabledattribute)
+    - [respectPrefersReducedMotion](#respectprefersreducedmotion)
     - [stopPropagation](#stoppropagation)
     - [tagName](#tagname)
   - [Using triggers](#using-triggers)
@@ -240,20 +241,21 @@ export default {
 
 ### Summary
 
-| Name                                                  |     Default      | Type                          |
-| ----------------------------------------------------- | :--------------: | ----------------------------- |
-| [color](#color)                                       | `"currentColor"` | `string`                      |
-| [initialOpacity](#initialopacity)                     |      `0.2`       | `number`                      |
-| [finalOpacity](#finalopacity)                         |      `0.1`       | `number`                      |
-| [duration](#duration)                                 |      `0.4`       | `number`                      |
-| [dissolveDuration](#dissolveduration)                 |      `0.15`      | `number`                      |
-| [easing](#easing)                                     |    `ease-out`    | `string`                      |
-| [cancellationPeriod](#cancellationperiod)             |       `75`       | `number`                      |
-| [trigger](#trigger)                                   |     `"auto"`     | `string \| boolean \| "auto"` |
-| [disabled](#disabled)                                 |     `false`      | `boolean`                     |
-| [respectDisabledAttribute](#respectdisabledattribute) |      `true`      | `boolean`                     |
-| [stopPropagation](#stoppropagation)                   |     `false`      | `boolean`                     |
-| [tagName](#tagname)                                   |     `"div"`      | `string`                      |
+| Name                                                   |     Default      | Type                          |
+| ------------------------------------------------------ | :--------------: | ----------------------------- |
+| [color](#color)                                        | `"currentColor"` | `string`                      |
+| [initialOpacity](#initialopacity)                      |      `0.2`       | `number`                      |
+| [finalOpacity](#finalopacity)                          |      `0.1`       | `number`                      |
+| [duration](#duration)                                  |      `0.4`       | `number`                      |
+| [dissolveDuration](#dissolveduration)                  |      `0.15`      | `number`                      |
+| [easing](#easing)                                      |    `ease-out`    | `string`                      |
+| [cancellationPeriod](#cancellationperiod)              |       `75`       | `number`                      |
+| [trigger](#trigger)                                    |     `"auto"`     | `string \| boolean \| "auto"` |
+| [disabled](#disabled)                                  |     `false`      | `boolean`                     |
+| [respectDisabledAttribute](#respectdisabledattribute)  |      `true`      | `boolean`                     |
+| [respectPrefersReducedMotion](#respectpreferredmotion) |      `true`      | `boolean`                     |
+| [stopPropagation](#stoppropagation)                    |     `false`      | `boolean`                     |
+| [tagName](#tagname)                                    |     `"div"`      | `string`                      |
 
 ### Details
 
@@ -545,6 +547,13 @@ export default {
 <button v-wave="{respectDisabledAttribute: false}" disabled>Click me!</button>
 ```
 
+#### respectPrefersReducedMotion 
+
+- **type:** `boolean`
+- _default:_ `true`
+
+> If `true`, the wave effect will be disabled if the user's [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) preference is set to `reduce`.
+
 #### stopPropagation
 
 - **type:** `boolean`

diff --git a/src/__snapshots__/options.test.ts.snap b/src/__snapshots__/options.test.ts.snap
@@ -12,6 +12,7 @@ exports[`has documented default options 1`] = `
   "finalOpacity": 0.1,
   "initialOpacity": 0.2,
   "respectDisabledAttribute": true,
+  "respectPrefersReducedMotion": true,
   "stopPropagation": false,
   "tagName": "div",
   "trigger": "auto",

diff --git a/src/options.ts b/src/options.ts
@@ -102,6 +102,14 @@ interface IVWaveDirectiveOptions {
    */
   respectDisabledAttribute: boolean
 
+  /**
+   * If `true`, the wave effect will be disabled if the user's `prefers-reduced-motion` preference is set to `reduce`.
+   *
+   * @default
+   * true
+   */
+  respectPrefersReducedMotion: boolean
+
   /**
    * Prevents the pointerdown event from propagating to parent elements
    *
@@ -144,6 +152,7 @@ const DEFAULT_PLUGIN_OPTIONS: IVWavePluginOptions = {
   tagName: 'div',
   disabled: false,
   respectDisabledAttribute: true,
+  respectPrefersReducedMotion: true,
   stopPropagation: false,
 }
 

diff --git a/src/wave.ts b/src/wave.ts
@@ -16,6 +16,7 @@ const SCALE_FACTOR = 2.05
 const wave = (screenPos: Vector, el: HTMLElement, options: IVWaveDirectiveOptions) => {
   if (options.disabled) return
   if (options.respectDisabledAttribute && el.hasAttribute('disabled')) return
+  if (options.respectPrefersReducedMotion && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
 
   const rect = el.getBoundingClientRect()
   const computedStyles = window.getComputedStyle(el)