fix: #41 address a11y for reduced-motion

docs/index.html

@@ -70,13 +70,18 @@
   &:before,
   &:after {
     box-sizing: border-box;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none !important;
+      transition: none !important;
+    }
   }
 
   // default experience is to remove all a11y enhancements
   &:focus {
     outline: none;
   }
-}</code>" data-collapsed="#{$scope} * { ... }"><code>#{$scope} * { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Global selector to address box-model and default <code>:focus</code> pseudo elements.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> option.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>*, *:before, *:after {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro *, .auro *:before, .auro *:after {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core&quot;;</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="essentials"><div class="container">essentials</div></h1><section class="main__sub-section" id="essentials-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="essentials-css-#{$sym}#{$prefix}html#{$scope}"><h3 class="item__heading"><a class="item__name" href="#css-#{$sym}#{$prefix}html#{$scope}">#{$sym}#{$prefix}html#{$scope}</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$sym}#{$prefix}html#{$scope} {
+}</code>" data-collapsed="#{$scope} * { ... }"><code>#{$scope} * { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Global selector to address box-model and default <code>:focus</code> pseudo elements.</p><p>Global media setting for <a href="https://twitter.com/nathansmith/status/1242606456677040128">a11y support of reduced-motion</a></p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> option.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>*, *:before, *:after {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro *, .auro *:before, .auro *:after {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core&quot;;</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="essentials"><div class="container">essentials</div></h1><section class="main__sub-section" id="essentials-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="essentials-css-#{$sym}#{$prefix}html#{$scope}"><h3 class="item__heading"><a class="item__name" href="#css-#{$sym}#{$prefix}html#{$scope}">#{$sym}#{$prefix}html#{$scope}</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$sym}#{$prefix}html#{$scope} {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   box-sizing: border-box;
@@ -123,8 +128,8 @@
   }
 
   &amp;--nav {
-    text-decoration: none;
     display: block;
+    text-decoration: none;
 
     &amp;:not(.is-touching) {
       &amp;:hover {

src/_core.scss

@@ -4,10 +4,12 @@
 // ---------------------------------------------------------------------
 @import "libSupport/manageScope";
 
-// sass-lint:disable mixins-before-declarations
+// sass-lint:disable no-important
 
 /// Global selector to address box-model and default `:focus` pseudo elements.
 ///
+/// Global media setting for [a11y support of reduced-motion](https://twitter.com/nathansmith/status/1242606456677040128)
+///
 /// [Manage](/#scope-prefix-variable) `$scope` option.
 /// @group core
 /// @example scss - Default selector(s)
@@ -24,6 +26,11 @@
   &:before,
   &:after {
     box-sizing: border-box;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none !important;
+      transition: none !important;
+    }
   }
 
   // default experience is to remove all a11y enhancements

src/_essentials.scss

@@ -132,8 +132,8 @@
   }
 
   &--nav {
-    text-decoration: none;
     display: block;
+    text-decoration: none;
 
     &:not(.is-touching) {
       &:hover {

src/libSupport/_deprecated.scss

@@ -1,3 +1,10 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// sass-lint:disable no-warn
+
 @mixin deprecated($string) {
   @warn "Deprecated: #{$string}. Please see [ https://git.io/JvGYJ ] for more information."
 }