From 9b8d2bc82d022d02e3706440816071e044a4cb9c Mon Sep 17 00:00:00 2001
From: Boban <BobanL@users.noreply.github.com>
Date: Mon, 11 Sep 2023 11:28:37 -0400
Subject: [PATCH] remove usa-skipnav from touchpoints-skipnav (#597)

* remove usa-skipnav from touchpoints-skipnav

Co-authored-by: elisa lee <elisa@skylight.digital>

* move remove usa-navbar in sr-touchpoints.js

---------

Co-authored-by: elisa lee <elisa@skylight.digital>
---
 _sass/touchpoints.scss      | 27 ++++++++++++---------------
 assets/js/sr-touchpoints.js |  2 ++
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/_sass/touchpoints.scss b/_sass/touchpoints.scss
index 9d035954..f9e09e5d 100644
--- a/_sass/touchpoints.scss
+++ b/_sass/touchpoints.scss
@@ -3431,7 +3431,7 @@ img {
     padding-left: 4rem;
 }
 
-#fba-modal-dialog .usa-skipnav {
+#fba-modal-dialog .touchpoints-skipnav {
     font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
     font-size: 1.06rem;
     line-height: 1.5;
@@ -3446,15 +3446,15 @@ img {
     z-index: 100;
 }
 
-#fba-modal-dialog .usa-skipnav:hover {
+#fba-modal-dialog .touchpoints-skipnav:hover {
     color: #1a4480;
 }
 
-#fba-modal-dialog .usa-skipnav:active {
+#fba-modal-dialog .touchpoints-skipnav:active {
     color: #162e51;
 }
 
-#fba-modal-dialog .usa-skipnav:focus {
+#fba-modal-dialog .touchpoints-skipnav:focus {
     outline: 0.25rem solid #2491ff;
     outline-offset: 0;
     background: white;
@@ -3464,7 +3464,7 @@ img {
     transition: 0.2s ease-in-out;
 }
 
-#fba-modal-dialog .usa-skipnav:visited {
+#fba-modal-dialog .touchpoints-skipnav:visited {
     color: #54278f;
 }
 
@@ -4263,7 +4263,7 @@ img {
     border-bottom-right-radius: 0
 }
 
-.usa-skipnav.touchpoints-skipnav {
+.touchpoints-skipnav {
     font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
     font-size: 1.06rem;
     line-height: 1.5;
@@ -4278,24 +4278,21 @@ img {
     z-index: 100;
 }
 
-.usa-skipnav.touchpoints-skipnav:hover {
+.touchpoints-skipnav:hover {
     color: #1a4480;
 }
 
-.usa-skipnav.touchpoints-skipnav:active {
+.touchpoints-skipnav:active {
     color: #162e51;
 }
 
-.usa-skipnav.touchpoints-skipnav:focus {
-    outline: 0.25rem solid #2491ff;
-    outline-offset: 0;
-}
-
-.usa-skipnav.touchpoints-skipnav:visited {
+.touchpoints-skipnav:visited {
     color: #54278f;
 }
 
-.usa-skipnav.touchpoints-skipnav:focus {
+.touchpoints-skipnav:focus {
+    outline: 0.25rem solid #2491ff;
+    outline-offset: 0;
     background: white;
     left: 0;
     position: absolute;
diff --git a/assets/js/sr-touchpoints.js b/assets/js/sr-touchpoints.js
index b3c330e4..2ab23460 100644
--- a/assets/js/sr-touchpoints.js
+++ b/assets/js/sr-touchpoints.js
@@ -68,6 +68,8 @@ function initCustomTouchpointsJS() {
   }
 
   attachModalToggleListener();
+  const feedbackSkipLink = document.querySelector(".touchpoints-skipnav");
+  feedbackSkipLink.classList.remove("usa-skipnav");
 }
 
 // need to wait for everything to load otherwise this will not work in Firefox