diff --git a/src/components/calcite-action/calcite-action.scss b/src/components/calcite-action/calcite-action.scss
index f252fd35..083f2f5a 100755
--- a/src/components/calcite-action/calcite-action.scss
+++ b/src/components/calcite-action/calcite-action.scss
@@ -24,7 +24,7 @@
   transition: color 125ms ease-in-out, fill 125ms ease-in-out, background-color 125ms ease-in-out;
   text-align: unset;
   position: relative;
-
+  @include focus-style-base();
   &:hover,
   &:focus {
     background-color: var(--calcite-app-background-hover);
@@ -32,7 +32,9 @@
     fill: var(--calcite-app-foreground-hover);
   }
 
-  @include focusRingInset();
+  &:focus {
+    @include focus-style-inset();
+  }
 
   .icon-container {
     min-width: var(--calcite-app-icon-size);
diff --git a/src/components/calcite-block/calcite-block.scss b/src/components/calcite-block/calcite-block.scss
index bf241e5b..186c45b7 100644
--- a/src/components/calcite-block/calcite-block.scss
+++ b/src/components/calcite-block/calcite-block.scss
@@ -45,7 +45,10 @@
   font-size: var(--calcite-app-font-size-0);
   text-align: unset;
   color: var(--calcite-app-foreground);
-  @include focusRingInset();
+  @include focus-style-base();
+  &:focus {
+    @include focus-style-inset();
+  }
 }
 
 .header,
diff --git a/src/components/calcite-handle/calcite-handle.scss b/src/components/calcite-handle/calcite-handle.scss
index 84c62ef3..a63f503d 100644
--- a/src/components/calcite-handle/calcite-handle.scss
+++ b/src/components/calcite-handle/calcite-handle.scss
@@ -16,15 +16,15 @@
   color: var(--calcite-app-border);
   line-height: 0;
   cursor: move;
-  @include focusRingInset();
-  &:focus {
-    outline-offset: var(--calcite-app-outline-inset);
-    color: var(--calcite-app-foreground);
-  }
   &:hover {
     background-color: var(--calcite-app-background-hover);
     color: var(--calcite-app-foreground);
   }
+  @include focus-style-base();
+  &:focus {
+    color: var(--calcite-app-foreground);
+    @include focus-style-inset();
+  }
   &--activated {
     background-color: var(--calcite-app-background-active);
     color: var(--calcite-app-foreground-active);
diff --git a/src/components/calcite-pick-list-item/calcite-pick-list-item.scss b/src/components/calcite-pick-list-item/calcite-pick-list-item.scss
index 2e6b0b26..bf62fcde 100644
--- a/src/components/calcite-pick-list-item/calcite-pick-list-item.scss
+++ b/src/components/calcite-pick-list-item/calcite-pick-list-item.scss
@@ -37,8 +37,10 @@
   padding: var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);
   align-items: center;
   cursor: pointer;
-
-  @include focusRingInset();
+  @include focus-style-base();
+  &:focus {
+    @include focus-style-inset();
+  }
 }
 
 .text-container {
diff --git a/src/components/calcite-tip-manager/calcite-tip-manager.scss b/src/components/calcite-tip-manager/calcite-tip-manager.scss
index d9ee3b19..cc046b9c 100644
--- a/src/components/calcite-tip-manager/calcite-tip-manager.scss
+++ b/src/components/calcite-tip-manager/calcite-tip-manager.scss
@@ -46,6 +46,10 @@ $tip-max-width: 540px;
   position: relative;
   padding: var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) 0;
   min-height: 150px;
+  @include focus-style-base();
+  &:focus {
+    @include focus-style-outset();
+  }
 }
 
 .tip-container {
@@ -57,6 +61,10 @@ $tip-max-width: 540px;
   display: flex;
   justify-content: center;
   align-items: flex-start;
+  @include focus-style-base();
+  &:focus {
+    @include focus-style-inset();
+  }
 }
 
 ::slotted(calcite-tip-group) {
diff --git a/src/components/calcite-tip/calcite-tip.scss b/src/components/calcite-tip/calcite-tip.scss
index b215c501..cc050c75 100644
--- a/src/components/calcite-tip/calcite-tip.scss
+++ b/src/components/calcite-tip/calcite-tip.scss
@@ -62,6 +62,11 @@ $tip-image-max-width: 100% !default;
 
 ::slotted(a) {
   color: var(--calcite-app-foreground-link);
+  @include focus-style-base();
+}
+
+::slotted(a:focus) {
+  @include focus-style-outset();
 }
 
 .image-frame {
diff --git a/src/components/calcite-value-list-item/calcite-value-list-item.scss b/src/components/calcite-value-list-item/calcite-value-list-item.scss
index 9a06d330..48dead78 100644
--- a/src/components/calcite-value-list-item/calcite-value-list-item.scss
+++ b/src/components/calcite-value-list-item/calcite-value-list-item.scss
@@ -38,13 +38,16 @@ calcite-pick-list-item {
   color: var(--calcite-app-border);
   line-height: 0;
   cursor: move;
-  @include focusRingInset();
+  @include focus-style-base();
   &:hover,
   &:focus {
     background-color: var(--calcite-app-background-hover);
     outline-offset: var(--calcite-app-outline-inset);
     color: var(--calcite-app-foreground);
   }
+  &:focus {
+    @include focus-style-inset();
+  }
   &--activated {
     background-color: var(--calcite-app-background-active);
     color: var(--calcite-app-foreground-active);
diff --git a/src/demos/tip/basic.html b/src/demos/tip/basic.html
index 34b77ba7..c11a0f44 100644
--- a/src/demos/tip/basic.html
+++ b/src/demos/tip/basic.html
@@ -25,7 +25,7 @@ <h2>With thumbnail</h2>
             <p>
               This is another paragraph in a subsequent "info" slot.
             </p>
-            <a href="http://www.esri.com">This is the "link" slot.</a>
+            <a href="http://www.esri.com">This is a link.</a>
           </calcite-tip>
         </div>
         <hr />
@@ -52,7 +52,7 @@ <h2>Without heading</h2>
             <p>
               This is another paragraph in a subsequent "info" slot.
             </p>
-            <a href="http://www.esri.com">This is the "link" slot.</a>
+            <a href="http://www.esri.com">This is a link.</a>
           </calcite-tip>
         </div>
         <h2>Without header</h2>
@@ -65,7 +65,7 @@ <h2>Without header</h2>
             <p>
               This is another paragraph in a subsequent "info" slot.
             </p>
-            <a href="http://www.esri.com">This is the "link" slot.</a>
+            <a href="http://www.esri.com">This is a link.</a>
           </calcite-tip>
         </div>
         <hr />
diff --git a/src/scss/mixins/_utilities.scss b/src/scss/mixins/_utilities.scss
index c90eba1e..c4ee9141 100644
--- a/src/scss/mixins/_utilities.scss
+++ b/src/scss/mixins/_utilities.scss
@@ -23,8 +23,21 @@
   -webkit-box-orient: vertical;
 }
 
-@mixin focusRingInset() {
-  &:focus {
-    outline-offset: var(--calcite-app-outline-inset);
-  }
+// place on the element that receives focus style, not in focus
+@mixin focus-style-base() {
+  outline-offset: 0;
+  outline-color: transparent;
+  transition: outline-offset var(--calcite-app-animation-time-fast) ease-in-out,
+    outline-color var(--calcite-app-animation-time-fast) ease-in-out;
+}
+
+// place on the element that receives focus style, while in focus
+@mixin focus-style-outset() {
+  outline: 2px solid var(--calcite-ui-blue-1);
+  outline-offset: 2px;
+}
+
+@mixin focus-style-inset() {
+  outline: 2px solid var(--calcite-ui-blue-1);
+  outline-offset: -2px;
 }