From 34825254f8547cc024ba470de957a3c8586a8122 Mon Sep 17 00:00:00 2001
From: Geoff Rich <geoff.rich@alaskaair.com>
Date: Tue, 10 Nov 2020 08:46:42 -0800
Subject: [PATCH] fix: show focus outline for High-Contrast Mode

---
 docs/index.html                      | 18 ++++++++++--------
 package-lock.json                    |  2 +-
 src/_baselineLTE.scss                |  2 +-
 src/_core.scss                       |  8 +++++---
 src/formElements/_inputTypeText.scss |  2 +-
 5 files changed, 18 insertions(+), 14 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index be02e44..77af48c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>@alaskaairux/orion-web-core-style-sheets - v2.12.0</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="@alaskaairux/orion-web-core-style-sheets - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Orion core foundation Sass UI Kit</p>
-"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">@alaskaairux/orion-web-core-style-sheets - 2.12.0</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="accessibility"><a href="#accessibility">accessibility</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="accessibility-css"><a href="#accessibility-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=".js-focus-visible :focus:not(.focus-visible)" data-type="css"><a href="#accessibility-css-.js-focus-visible :focus:not(.focus-visible)">.js-focus-visible :focus:not(.focus-visible)</a></li><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name="#{$scope}.focus-visible" data-type="css"><a href="#accessibility-css-#{$scope}.focus-visible">#{$scope}.focus-visible</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="animation"><a href="#animation">animation</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-mixin"><a href="#animation-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="auro_transition" data-type="mixin"><a href="#animation-mixin-auro_transition">auro_transition</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="component-support"><a href="#component-support">component-support</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="component-support-css"><a href="#component-support-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host" data-type="css"><a href="#component-support-css-:host">:host</a></li><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host([hidden]:not(:focus):not(:active))" data-type="css"><a href="#component-support-css-:host([hidden]:not(:focus):not(:active))">:host([hidden]:not(:focus):not(:active))</a></li><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host([hiddenVisually]:not(:focus):not(:active))" data-type="css"><a href="#component-support-css-:host([hiddenVisually]:not(:focus):not(:active))">:host([hiddenVisually]:not(:focus):not(:active))</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="core"><a href="#core">core</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="core-css"><a href="#core-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="core" data-name="#{$scope} *" data-type="css"><a href="#core-css-#{$scope} *">#{$scope} *</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="essentials"><a href="#essentials">essentials</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="essentials-css"><a href="#essentials-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$sym}#{$prefix}html#{$scope}" data-type="css"><a href="#essentials-css-#{$sym}#{$prefix}html#{$scope}">#{$sym}#{$prefix}html#{$scope}</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}body,
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>@alaskaairux/orion-web-core-style-sheets - v2.12.1</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="@alaskaairux/orion-web-core-style-sheets - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Orion core foundation Sass UI Kit</p>
+"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">@alaskaairux/orion-web-core-style-sheets - 2.12.1</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="accessibility"><a href="#accessibility">accessibility</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="accessibility-css"><a href="#accessibility-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=".js-focus-visible :focus:not(.focus-visible)" data-type="css"><a href="#accessibility-css-.js-focus-visible :focus:not(.focus-visible)">.js-focus-visible :focus:not(.focus-visible)</a></li><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name="#{$scope}.focus-visible" data-type="css"><a href="#accessibility-css-#{$scope}.focus-visible">#{$scope}.focus-visible</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="animation"><a href="#animation">animation</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-mixin"><a href="#animation-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="auro_transition" data-type="mixin"><a href="#animation-mixin-auro_transition">auro_transition</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="component-support"><a href="#component-support">component-support</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="component-support-css"><a href="#component-support-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host" data-type="css"><a href="#component-support-css-:host">:host</a></li><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host([hidden]:not(:focus):not(:active))" data-type="css"><a href="#component-support-css-:host([hidden]:not(:focus):not(:active))">:host([hidden]:not(:focus):not(:active))</a></li><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host([hiddenVisually]:not(:focus):not(:active))" data-type="css"><a href="#component-support-css-:host([hiddenVisually]:not(:focus):not(:active))">:host([hiddenVisually]:not(:focus):not(:active))</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="core"><a href="#core">core</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="core-css"><a href="#core-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="core" data-name="#{$scope} *" data-type="css"><a href="#core-css-#{$scope} *">#{$scope} *</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="essentials"><a href="#essentials">essentials</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="essentials-css"><a href="#essentials-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$sym}#{$prefix}html#{$scope}" data-type="css"><a href="#essentials-css-#{$sym}#{$prefix}html#{$scope}">#{$sym}#{$prefix}html#{$scope}</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}body,
 #{$scope}.#{$prefix}baseType" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}body,
 #{$scope}.#{$prefix}baseType">#{$scope}#{$sym}#{$prefix}body, #{$scope}.#{$prefix}baseType</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}baseParagraph" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}baseParagraph">#{$scope}.#{$prefix}baseParagraph</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}hyperlink" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}hyperlink">#{$scope}.#{$prefix}hyperlink</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}img" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}img">#{$scope}#{$sym}#{$prefix}img</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}small,
 #{$scope}.#{$prefix}type--small" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}small,
@@ -54,7 +54,8 @@
 input[type=email]" data-type="css"><a href="#†deprecated-css-input[type=text],
 input[type=password],
 input[type=email]">input[type=text], input[type=password], input[type=email]</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".focus-visible" data-type="css"><a href="#†deprecated-css-.focus-visible">.focus-visible</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_fontWeightBook" data-type="css"><a href="#†deprecated-css-.util_fontWeightBook">.util_fontWeightBook</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_fontWeightLight" data-type="css"><a href="#†deprecated-css-.util_fontWeightLight">.util_fontWeightLight</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_type--lg" data-type="css"><a href="#†deprecated-css-.util_type--lg">.util_type--lg</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_type--xl" data-type="css"><a href="#†deprecated-css-.util_type--xl">.util_type--xl</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_type--secondary" data-type="css"><a href="#†deprecated-css-.util_type--secondary">.util_type--secondary</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_marginAuto" data-type="css"><a href="#†deprecated-css-.util_marginAuto">.util_marginAuto</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_marginBottom--sml" data-type="css"><a href="#†deprecated-css-.util_marginBottom--sml">.util_marginBottom--sml</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_marginBottom--med" data-type="css"><a href="#†deprecated-css-.util_marginBottom--med">.util_marginBottom--med</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_marginTop--sml" data-type="css"><a href="#†deprecated-css-.util_marginTop--sml">.util_marginTop--sml</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_marginTop--med" data-type="css"><a href="#†deprecated-css-.util_marginTop--med">.util_marginTop--med</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_marginRight--sml" data-type="css"><a href="#†deprecated-css-.util_marginRight--sml">.util_marginRight--sml</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_marginRight--med" data-type="css"><a href="#†deprecated-css-.util_marginRight--med">.util_marginRight--med</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_marginLeft--sml" data-type="css"><a href="#†deprecated-css-.util_marginLeft--sml">.util_marginLeft--sml</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_marginLeft--med" data-type="css"><a href="#†deprecated-css-.util_marginLeft--med">.util_marginLeft--med</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_is-mobileOnly" data-type="css"><a href="#†deprecated-css-.util_is-mobileOnly">.util_is-mobileOnly</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_is-narrowOnly" data-type="css"><a href="#†deprecated-css-.util_is-narrowOnly">.util_is-narrowOnly</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_is-narrowOnly--inline" data-type="css"><a href="#†deprecated-css-.util_is-narrowOnly--inline">.util_is-narrowOnly--inline</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_is-narrowAppears" data-type="css"><a href="#†deprecated-css-.util_is-narrowAppears">.util_is-narrowAppears</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_is-narrowAppears--inline" data-type="css"><a href="#†deprecated-css-.util_is-narrowAppears--inline">.util_is-narrowAppears--inline</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_is-tabletOnly" data-type="css"><a href="#†deprecated-css-.util_is-tabletOnly">.util_is-tabletOnly</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_is-tabletOnly--inline" data-type="css"><a href="#†deprecated-css-.util_is-tabletOnly--inline">.util_is-tabletOnly--inline</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_is-tabletAppears" data-type="css"><a href="#†deprecated-css-.util_is-tabletAppears">.util_is-tabletAppears</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_is-tabletAppears--inline" data-type="css"><a href="#†deprecated-css-.util_is-tabletAppears--inline">.util_is-tabletAppears--inline</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_is-desktopOnly" data-type="css"><a href="#†deprecated-css-.util_is-desktopOnly">.util_is-desktopOnly</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".util_is-desktopOnly--inline" data-type="css"><a href="#†deprecated-css-.util_is-desktopOnly--inline">.util_is-desktopOnly--inline</a></li></ul></div></div></aside><article class="main" role="main"><header class="header" role="banner"><div class="container"><div class="sassdoc__searchbar searchbar"><label for="js-search-input" class="visually-hidden">Search</label><div class="searchbar__form" id="js-search"><input name="search" type="search" class="searchbar__field" autocomplete="off" autofocus id="js-search-input" placeholder="Search"><ul class="searchbar__suggestions" id="js-search-suggestions"></ul></div></div></div></header><section class="main__section"><h1 class="main__heading" id="accessibility"><div class="container">accessibility</div></h1><section class="main__sub-section" id="accessibility-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="accessibility-css-.js-focus-visible :focus:not(.focus-visible)"><h3 class="item__heading"><a class="item__name" href="#css-.js-focus-visible :focus:not(.focus-visible)">.js-focus-visible :focus:not(.focus-visible)</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.js-focus-visible :focus:not(.focus-visible) {
-  outline: none;
+  // Only visible when Windows High-Contrast Mode is turned on
+  outline: 3px solid transparent;
 }</code>" data-collapsed=".js-focus-visible :focus:not(.focus-visible) { ... }"><code>.js-focus-visible :focus:not(.focus-visible) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Selector set to enable use of <a href="https://www.npmjs.com/package/focus-visible">focus visible</a> polyfill.</p><p>Based on the proposed CSS <code>:focus-visible</code> pseudo-selector, this prototype adds a <code>focus-visible</code> class to the focused element, in situations in which the <code>:focus-visible</code> pseudo-selector should match.</p></div><h3 class="item__sub-heading">Example</h3><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 class="main__item container item" id="accessibility-css-#{$scope}.focus-visible"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.focus-visible">#{$scope}.focus-visible</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.focus-visible {
   &amp;.#{$prefix}hyperlink,
   &amp;.#{$prefix}auro_roleButton,
@@ -85,7 +86,7 @@
 
   // if $focus is true, outline will appear on tabbed focus
 
-  // default is null, tabbed outline is set to none
+  // default is null, tabbed outline is set to transparent
   // dependency on .focus-visible selector
   @if $focus {
     &amp;:focus {
@@ -93,7 +94,8 @@
     }
   } @else {
     &amp;:focus {
-      outline: none;
+      // Only visible when Windows High-Contrast Mode is turned on
+      outline: 3px solid transparent;
     }
   }
 }</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><div class="item__example example"><div class="example__description"><p>import file with <code>$focus</code> set to <code>true</code></p></div><pre class="example__code language-scss"><code>$focus: true;
@@ -1653,7 +1655,7 @@
 }</code>" data-collapsed="* { ... }"><code>* { ... }</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>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.js-focus-visible :focus:not(.focus-visible)"><h3 class="item__heading"><a class="item__name" href="#css-.js-focus-visible :focus:not(.focus-visible)">.js-focus-visible :focus:not(.focus-visible)</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>core.scss</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.js-focus-visible :focus:not(.focus-visible) {
   @include deprecated(&#39;file baselineLTE&#39;);
 
-  outline: none;
+  outline: 3px solid transparent;
 }</code>" data-collapsed=".js-focus-visible :focus:not(.focus-visible) { ... }"><code>.js-focus-visible :focus:not(.focus-visible) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Selector set to enable use of <a href="https://www.npmjs.com/package/focus-visible">focus visible</a> polyfill.</p><p>Based on the proposed CSS <code>:focus-visible</code> pseudo-selector, this prototype adds a <code>focus-visible</code> class to the focused element, in situations in which the <code>:focus-visible</code> pseudo-selector should match.</p></div><h3 class="item__sub-heading">Example</h3><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/baseline&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.ods-roleButton"><h3 class="item__heading"><a class="item__name" href="#css-.ods-roleButton">.ods-roleButton</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>See <code>.auro_roleButton</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.ods-roleButton {
   @include deprecated(&#39;selctor .ods-roleButton&#39;);
 
@@ -1756,7 +1758,7 @@
 
     &amp;:focus {
       border-color: $color-accessibility-border-active;
-      outline: 0;
+      outline: 3px solid transparent;
       box-shadow: unset;
     }
   }
@@ -1997,4 +1999,4 @@
     }
   }
 }</code>" data-collapsed=".util_is-desktopOnly--inline { ... }"><code>.util_is-desktopOnly--inline { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain <code>block</code> visibility of UI element for <strong>max</strong> screens.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
-@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <span class="project-info__name">@alaskaairux/orion-web-core-style-sheets</span><!-- Version --> <span class="project-info__version">- v2.12.0</span><!-- License --> <span class="project-info__license">, under Apache-2.0</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>
\ No newline at end of file
+@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <span class="project-info__name">@alaskaairux/orion-web-core-style-sheets</span><!-- Version --> <span class="project-info__version">- v2.12.1</span><!-- License --> <span class="project-info__license">, under Apache-2.0</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 17e99e7..3b38769 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@alaskaairux/orion-web-core-style-sheets",
-  "version": "2.12.0",
+  "version": "2.12.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/_baselineLTE.scss b/src/_baselineLTE.scss
index c745705..52c92eb 100644
--- a/src/_baselineLTE.scss
+++ b/src/_baselineLTE.scss
@@ -37,5 +37,5 @@
 .js-focus-visible :focus:not(.focus-visible) {
   @include deprecated('file baselineLTE');
 
-  outline: none;
+  outline: 3px solid transparent;
 }
diff --git a/src/_core.scss b/src/_core.scss
index ab785ba..89a6158 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -41,7 +41,7 @@ $focus: null !default;
 
   // if $focus is true, outline will appear on tabbed focus
 
-  // default is null, tabbed outline is set to none
+  // default is null, tabbed outline is set to transparent
   // dependency on .focus-visible selector
   @if $focus {
     &:focus {
@@ -49,7 +49,8 @@ $focus: null !default;
     }
   } @else {
     &:focus {
-      outline: none;
+      // Only visible when Windows High-Contrast Mode is turned on
+      outline: 3px solid transparent;
     }
   }
 }
@@ -63,5 +64,6 @@ $focus: null !default;
 ///
 /// @group Accessibility
 .js-focus-visible :focus:not(.focus-visible) {
-  outline: none;
+  // Only visible when Windows High-Contrast Mode is turned on
+  outline: 3px solid transparent;
 }
diff --git a/src/formElements/_inputTypeText.scss b/src/formElements/_inputTypeText.scss
index 35e341c..56894db 100644
--- a/src/formElements/_inputTypeText.scss
+++ b/src/formElements/_inputTypeText.scss
@@ -24,7 +24,7 @@ input[type=email] {
 
     &:focus {
       border-color: $color-accessibility-border-active;
-      outline: 0;
+      outline: 3px solid transparent;
       box-shadow: unset;
     }
   }
