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>
CDCgov · Sep 11, 2023 · 9b8d2bc · 9b8d2bc
1 parent fdd013a
commit 9b8d2bc
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git 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
@@ -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