Fix link focus rings

WordPress · Oct 15, 2024 · 071e6bd · 071e6bd
1 parent c0baed6
commit 071e6bd
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 5 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/components/VHeader/VWordPressLink.vue b/frontend/src/components/VHeader/VWordPressLink.vue
@@ -14,7 +14,7 @@ withDefaults(
   <VLink
     href="https://wordpress.org"
     :aria-label="$t('footer.wordpressAffiliation', { wordpress: 'WordPress' })"
-    class="focus-visible:ring-border-focus text-default hover:no-underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-1 focus-visible:ring-offset-tx"
+    class="text-default hover:no-underline"
   >
     <i18n-t
       scope="global"

diff --git a/frontend/src/components/VLink.vue b/frontend/src/components/VLink.vue
@@ -10,7 +10,7 @@
  */
 import { useNuxtApp } from "#imports"
 
-import { computed } from "vue"
+import { computed, useAttrs } from "vue"
 
 import { useAnalytics } from "~/composables/use-analytics"
 
@@ -112,12 +112,29 @@ const handleClick = (e: MouseEvent) => {
     url: props.href,
   })
 }
+const defaultRounded = "rounded-sm"
+const attrs = useAttrs()
+
+// Add `rounded-sm` class to links that don't have a rounded class.
+const roundedClass = computed(() => {
+  if (
+    !attrs.class ||
+    typeof attrs.class !== "string" ||
+    !attrs.class.includes("rounded-")
+  ) {
+    return defaultRounded
+  }
+  return ""
+})
 </script>
 
 <!-- eslint-disable vue/no-restricted-syntax -->
 <template>
   <NuxtLink
-    :class="{ 'inline-flex w-max items-center gap-x-2': showExternalIcon }"
+    :class="[
+      roundedClass,
+      { 'inline-flex w-max items-center gap-x-2': showExternalIcon },
+    ]"
     :aria-disabled="!to"
     v-bind="linkProps"
     :to="to"

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
@@ -4,6 +4,7 @@ body * {
 }
 
 :focus-visible {
+  outline-style: solid;
   outline-color: theme("borderColor.focus");
 }