docs(skip links): new powers for .visually-hidden-focusable

2 files changed, 3 insertions, 16 deletions

diff --git a/site/assets/scss/_skippy.scss b/site/assets/scss/_skippy.scss
index 894db70db..ea82c625b 100644
--- a/site/assets/scss/_skippy.scss
+++ b/site/assets/scss/_skippy.scss
@@ -1,20 +1,7 @@
-// stylelint-disable declaration-no-important
-
 .skippy {
   background-color: $bd-purple;
 
   a {
     color: $white;
   }
-
-  &:focus-within a {
-    position: static !important;
-    width: auto !important;
-    height: auto !important;
-    padding: $spacer / 2 !important;
-    margin: $spacer / 4 !important;
-    overflow: visible !important;
-    clip: auto !important;
-    white-space: normal !important;
-  }
 }
diff --git a/site/layouts/partials/skippy.html b/site/layouts/partials/skippy.html
index f95eece57..8da5c0a01 100644
--- a/site/layouts/partials/skippy.html
+++ b/site/layouts/partials/skippy.html
@@ -1,8 +1,8 @@
-<div class="skippy overflow-hidden">
+<div class="skippy visually-hidden-focusable overflow-hidden">
   <div class="container-xl">
-    <a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
+    <a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
     {{ if (eq .Page.Layout "docs") -}}
-    <a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
+    <a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
     {{- end }}
   </div>
 </div>