Fix the skip-to-content button (#4336)

Signed-off-by: Olga Bulat <obulat@gmail.com>
WordPress · May 17, 2024 · 30f1df1 · 30f1df1
1 parent 0dbe130
commit 30f1df1
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/frontend/src/components/VSkipToContentButton.vue b/frontend/src/components/VSkipToContentButton.vue
@@ -4,7 +4,7 @@
     as="a"
     variant="filled-pink"
     size="medium"
-    class="skip-button z-50 focus:fixed focus:absolute focus:ms-2 focus:mt-2"
+    class="skip-button top-2 z-50 max-w-max focus:absolute focus:left-2 focus:right-2 focus-visible:absolute focus-visible:left-2 focus-visible:right-2"
     >{{ $t("skipToContent") }}
   </VButton>
 </template>
@@ -24,7 +24,7 @@ export default {
 }
 </script>
 <style scoped>
-.skip-button:not(:focus) {
+.skip-button:not(:focus-visible) {
   @apply sr-only;
 }
 </style>
diff --git a/frontend/src/layouts/content-layout.vue b/frontend/src/layouts/content-layout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="relative">
     <VSkipToContentButton />
     <div
       class="app min-h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr] bg-white"

diff --git a/frontend/src/layouts/default.vue b/frontend/src/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="relative">
     <VSkipToContentButton />
     <div
       class="app h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr] flex-col bg-yellow"

diff --git a/frontend/src/layouts/search-layout.vue b/frontend/src/layouts/search-layout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="relative">
     <VSkipToContentButton />
     <div
       class="app h-dyn-screen min-h-dyn-screen grid grid-rows-[auto,1fr] bg-white"