Support prefers-reduced-motion (fixes #3).

fast-smooth-scroll.php

@@ -38,7 +38,12 @@ function fast_smooth_scroll_print_style() {
 	}
 
 	?>
-	<style id="fast-smooth-scroll-css" type="text/css">html { <?php echo esc_js( implode( '; ', $html_rules ) . ';' ); ?> }</style>
+	<style id="fast-smooth-scroll-css" type="text/css">
+		html { <?php echo esc_js( implode( '; ', $html_rules ) . ';' ); ?> }
+		@media (prefers-reduced-motion: reduce) {
+			html { scroll-behavior: auto; }
+		}
+	</style>
 	<?php
 }
 add_action( 'wp_footer', 'fast_smooth_scroll_print_style' );

readme.txt

@@ -40,6 +40,8 @@ To support older browsers as well, a lightweight JavaScript polyfill is included
 
 For relevant browser support, see:
 * [CSS Scroll-behavior](https://caniuse.com/css-scroll-behavior)
+* [CSS property: scroll-padding-top](https://caniuse.com/mdn-css_properties_scroll-padding-top)
+* [prefers-reduced-motion media query](https://caniuse.com/prefers-reduced-motion)
 * [requestAnimationFrame](https://caniuse.com/requestanimationframe)
 * [High Resolution Time API](https://caniuse.com/high-resolution-time)
 * [NodeList API](https://caniuse.com/mdn-api_nodelist)
@@ -74,6 +76,12 @@ add_filter( 'fast_smooth_scroll_offset', 'myplugin_get_custom_scroll_offset' );
 
 `
 
+= Does the plugin support reduced motion preferences? =
+
+Yes! For better accessibility, clients that are configured to reduce motion will not be affected by the smooth scroll behavior.
+
+The `prefers-reduced-motion` media query is used to detect such a preference. Note that this only works with the CSS-only solution, as the older browsers that would require the JavaScript polyfill do not support this preference.
+
 = I don't care about smooth scrolling for older browsers. How can I disable the JavaScript polyfill? =
 
 Since the JavaScript polyfill is only loaded when needed and is extremely lightweight, there's probably not much value in disabling it. However, if you want to go for the purist solution of only relying on the CSS approach, you can certainly do so, using the built-in filter `fast_smooth_scroll_enqueue_scripts`, which defaults to `true`.
@@ -113,7 +121,8 @@ You can also contribute to the plugin by translating it. Simply visit [translate
 * First stable version
 
 = 1.0.0-beta.2 =
-* Enhanced: Introduce support for optional scroll offset via new filter `fast_smooth_scroll_offset`.
+* Enhanced: Introduce support for optional scroll offset via new filter `fast_smooth_scroll_offset`. Props erikyo.
+* Fixed: Support `prefers-reduced-motion` and disable smooth scrolling if reduced motion is preferred. Props queerdevperson.
 * Fixed: Avoid unnecessarily set `scroll-behavior` style property on the `html` element.
 
 = 1.0.0-beta.1 =

tests/phpunit/tests/Plugin_Tests.php

@@ -17,19 +17,20 @@ public function test_hooks() {
 	public function test_fast_smooth_scroll_print_style() {
 		$output = get_echo( 'fast_smooth_scroll_print_style' );
 
-		$pattern = '/>\s*html\s*\{\s*scroll-behavior:\s*smooth;\s*\}\s*</';
+		$pattern = '/>\s*html\s*\{\s*scroll-behavior:\s*smooth;\s*\}\s*/';
 		if ( ! method_exists( $this, 'assertMatchesRegularExpression' ) ) {
 			$this->assertRegExp( $pattern, $output );
 			return;
 		}
 		$this->assertMatchesRegularExpression( $pattern, $output );
+		$this->assertStringContainsString( '@media (prefers-reduced-motion: reduce) {', $output );
 	}
 
 	public function test_fast_smooth_scroll_print_style_prints_offset_with_filter() {
 		add_filter( 'fast_smooth_scroll_offset', array( $this, 'return_120' ) );
 		$output = get_echo( 'fast_smooth_scroll_print_style' );
 
-		$pattern = '/>\s*html\s*\{\s*scroll-behavior:\s*smooth;\s*scroll-padding-top:\s*120px;\s*\}\s*</';
+		$pattern = '/>\s*html\s*\{\s*scroll-behavior:\s*smooth;\s*scroll-padding-top:\s*120px;\s*\}\s*/';
 		if ( ! method_exists( $this, 'assertMatchesRegularExpression' ) ) {
 			$this->assertRegExp( $pattern, $output );
 			return;