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

diff --git a/site/assets/scss/_skippy.scss b/site/assets/scss/_skippy.scss
index 894db70db4e77a1a593d3bb3952f6e609cc19b96..ea82c625b9eb463921b9d833e7ee6bec3bd5bf2a 100644 (file)
--- 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 f95eece5785c57f7d31f592c23eb21f85a4ce4dc..8da5c0a018709d31b5a3d7c82fe629842faa16c3 100644 (file)
--- 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>