Adjust tags outline and coloring

packages/cfpb-design-system/src/components/cfpb-forms/tag.scss

@@ -59,14 +59,14 @@ a.a-tag-filter {
     $jump-link-text-class: 'a-tag-topic__text'
   );
 }
-
 @include u-jump-link-group($jump-link-class: 'a-tag-topic');
 
 .a-tag-topic__bullet {
   font-size: 1rem;
   line-height: 1rem;
 }
 
+// Tablet and above.
 @include respond-to-min($bp-sm-min) {
   .a-tag-topic__text {
     // Colors for :link, :visited, :hover, :focus, :active
@@ -85,9 +85,7 @@ a.a-tag-filter {
   .a-tag-topic:focus,
   .a-tag-topic:active {
     border-bottom: none;
-
-    // Normally we offset the focus 2px, but we need 3px here for the underline.
-    outline-offset: 3px;
+    outline-offset: 1px;
 
     .a-tag-topic__text {
       // Move the underline down 1px.
@@ -99,6 +97,14 @@ a.a-tag-filter {
   .a-tag-topic:hover .a-tag-topic__text {
     border-bottom: 1px solid var(--gold-80);
   }
+
+  .a-tag-topic:focus {
+    outline-color: var(--gray);
+
+    .a-tag-topic__text {
+      border-bottom-style: solid !important;
+    }
+  }
 }
 
 // Tag group sets the spacing between tags.

packages/cfpb-design-system/src/components/cfpb-typography/mixins.scss

@@ -28,6 +28,7 @@
 
   // Mobile only.
   @include respond-to-max($bp-xs-max) {
+    position: relative;
     display: flex;
     align-items: center;
     gap: math.div(5px, $base-font-size-px) + rem;
@@ -41,6 +42,24 @@
     // 100% width is needed when block or jump link are applied to a <button>.
     width: 100%;
 
+    // We create a faux focus rectangle in the ::after pseudoelement to better
+    // control the positioning of the focus rectangle, which would overwise
+    // overlap the top border of the jumplink when it appears in a group.
+    &:focus {
+      outline: none;
+
+      &::after {
+        position: absolute;
+        content: '';
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        outline: 1px dotted var(--gray);
+        outline-offset: 2px;
+      }
+    }
+
     // Only right-hand align arrow icons.
     .cf-icon-svg--right {
       margin-left: auto;
@@ -66,7 +85,8 @@
         border-top: none;
       }
 
-      .#{$jump-link-class}:hover::before {
+      .#{$jump-link-class}:hover::before,
+      .#{$jump-link-class}:focus::before {
         position: absolute;
         top: -1px;
         content: '';