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: '';