Fix link focus rings

WordPress · Sep 19, 2024 · e9634bb · e9634bb
1 parent 50e401f
commit e9634bb
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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") },
         }
       )
     }),