From e9634bb705228648d92765f9574ce486364e4b7b Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 19 Sep 2024 10:19:19 +0300
Subject: [PATCH] Fix link focus rings

---
 frontend/src/components/VCheckbox/VCheckbox.vue |  2 +-
 frontend/src/error.vue                          |  8 +++++++-
 frontend/src/styles/accent.css                  |  4 +++-
 frontend/tailwind.config.ts                     | 17 ++++++++++++-----
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/VCheckbox/VCheckbox.vue b/frontend/src/components/VCheckbox/VCheckbox.vue
index 99b53c65477..da8365e9eca 100644
--- a/frontend/src/components/VCheckbox/VCheckbox.vue
+++ b/frontend/src/components/VCheckbox/VCheckbox.vue
@@ -116,7 +116,7 @@ const onChange = () => {
         class="me-3 block appearance-none border border-tertiary bg-default transition-colors duration-100 checked:bg-tertiary disabled:border-disabled disabled:bg-secondary checked:disabled:border-disabled checked:disabled:bg-disabled"
         :class="
           isSwitch
-            ? ['h-4.5', 'w-9', 'rounded-full', 'focus-slim-offset']
+            ? ['h-4.5', 'w-9', '!rounded-full', 'focus-slim-offset']
             : [
                 'h-5',
                 'w-5',
diff --git a/frontend/src/error.vue b/frontend/src/error.vue
index a8b37f7ad69..e001afd5ff9 100644
--- a/frontend/src/error.vue
+++ b/frontend/src/error.vue
@@ -94,8 +94,14 @@ useHead({
         <NuxtLayout name="default">
           <VFourOhFour class="flex-grow" :error="error" />
         </NuxtLayout>
-        <div id="modal"></div>
       </Body>
     </Html>
   </div>
 </template>
+
+<style>
+body {
+  /* This is used by some elements. */
+  --color-bg-curr-page: var(--color-bg-complementary);
+}
+</style>
diff --git a/frontend/src/styles/accent.css b/frontend/src/styles/accent.css
index 94e7aa38777..535a4280c90 100644
--- a/frontend/src/styles/accent.css
+++ b/frontend/src/styles/accent.css
@@ -3,8 +3,10 @@ body * {
   accent-color: theme("borderColor.focus");
 }
 
-:focus-visible {
+a:focus-visible {
+  outline-style: solid;
   outline-color: theme("borderColor.focus");
+  border-radius: theme("borderRadius.sm");
 }
 
 ::selection {
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 17da633a74b..08cf1433f3d 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -178,6 +178,11 @@ export default {
         13: "var(--color-yellow-13)",
       },
 
+      focus: {
+        DEFAULT: "var(--color-border-focus)",
+        yellow: "var(--color-yellow-3",
+      },
+
       // Special keywords
       tx: "transparent",
       curr: "currentColor",
@@ -426,14 +431,16 @@ export default {
             "focus-slim-borderless-filled",
           ].map((item) => [
             item,
-            (value) => ({
-              "--tw-ring-color": value,
-              "--tw-outline-color": value,
-            }),
+            (value) => {
+              return {
+                "--tw-ring-color": value,
+                "--tw-outline-color": value,
+              }
+            },
           ])
         ),
         {
-          values: { ...theme("colors"), DEFAULT: theme("borderColor.focus") },
+          values: { ...theme("colors.focus") },
         }
       )
     }),