missing & clipping outlines

Author: jellydeck

app/assets/main.css

@@ -199,6 +199,10 @@ input[type='search']:focus-visible {
   outline: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
 }
 
+/* since we haven't migrated all focus-visible states
+we have to keep this otherwise users will get
+inconsistent default outlines */
+a:focus-visible,
 select:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;

app/components/AppHeader.vue

@@ -97,7 +97,7 @@ onKeyStroke(
       <button
         v-if="!isSearchExpanded && !isOnHomePage"
         type="button"
-        class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 rounded"
+        class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 rounded focus-visible(outline-2 outline-accent)"
         :aria-label="$t('nav.tap_to_search')"
         @click="expandMobileSearch"
       >
@@ -111,7 +111,7 @@ onKeyStroke(
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
+          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded focus-visible:(outline-2 outline-accent)"
         >
           <AppLogo class="w-8 h-8 rounded-lg" />
           <span>npmx</span>

app/components/Button/Base.vue

@@ -53,8 +53,7 @@ defineExpose({
         'text-sm px-4 py-2': size === 'medium',
         'text-xs px-2 py-0.5': size === 'small',
         'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
-        'text-bg bg-fg border-fg hover:(bg-fg/80 rounded-xl) active:rounded-xl':
-          variant === 'primary',
+        'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
         'opacity-40 cursor-not-allowed border-transparent': disabled,
       }"
     >

app/components/Button/Group.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
 <template>
   <component
     :is="props.as || 'div'"
-    class="flex [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
+    class="flex [&>*]:rounded-e-none [&>*:last-child]:rounded-e-md [&>*]:rounded-s-none [&>*:first-child]:rounded-s-md [&>*:not(:first-child)]:border-s-0 [&>*:focus-visible]:relative [&>*:focus-visible]:z-10"
   >
     <slot />
   </component>

app/components/CollapsibleSection.vue

@@ -85,7 +85,7 @@ useHead({
         <button
           :id="buttonId"
           type="button"
-          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-accent/70 rounded"
+          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:(outline-2 outline-offset-2 outline-accent) rounded"
           :aria-expanded="isOpen"
           :aria-controls="contentId"
           :aria-label="ariaLabel"

app/components/Header/SearchBox.vue

@@ -109,7 +109,8 @@ defineExpose({ focus })
       <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
         <div class="search-box relative flex items-center">
           <span
-            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
+            aria-hidden="true"
+            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
           >
             /
           </span>
@@ -126,7 +127,7 @@ defineExpose({ focus })
             @focus="handleSearchFocus"
             @blur="handleSearchBlur"
           />
-          <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
+          <button type="submit" class="sr-only" tabindex="-1">{{ $t('search.button') }}</button>
         </div>
       </div>
     </form>

app/components/LicenseDisplay.vue

@@ -18,7 +18,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
         :href="token.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="link-subtle"
+        class="focus-visible:(outline-2 outline-accent) rounded-sm"
         :title="$t('package.license.view_spdx')"
       >
         {{ token.value }}

app/components/Link/Base.vue

@@ -63,7 +63,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   <span
     v-if="disabled"
     :class="{
-      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border  rounded-md':
+      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
@@ -75,14 +75,15 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   </span>
   <NuxtLink
     v-else
-    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-offset-2 outline-accent)"
+    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent)"
     :class="[
       {
         'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
           !isLinkAnchor && isLink,
-        'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
+        'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent outline-offset-2 text-accent) transition-colors duration-200':
           isLink,
-        'border border-solid border-border rounded-md transition-all duration-200': isButton,
+        'border border-solid border-border rounded-md transition-all duration-200 focus-visible:outline-offset-2':
+          isButton,
         'text-sm px-4 py-2': isButtonMedium,
         'text-xs px-2 py-0.5': isButtonSmall,
         'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',

app/components/Package/ManagerSelect.vue

@@ -88,7 +88,7 @@ function handleKeydown(event: KeyboardEvent) {
   <button
     ref="triggerRef"
     type="button"
-    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-accent/70 hover:text-fg"
+    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:(outline-2 outline-accent outline-offset-2) hover:text-fg"
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
     :aria-label="$t('package.get_started.pm_label')"

app/components/Package/Versions.vue

@@ -324,7 +324,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <button
             v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
             type="button"
-            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm"
+            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm focus-visible:(outline-2 outline-offset-2 outline-accent)"
             :aria-expanded="expandedTags.has(row.tag)"
             :aria-label="
               expandedTags.has(row.tag)
@@ -357,7 +357,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div>
                 <LinkBase
                   :to="versionRoute(row.primaryVersion.version)"
-                  class="text-sm"
+                  class="text-sm focus-visible:outline-none"
                   :class="
                     row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                   "
@@ -465,7 +465,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
       <div class="p-1">
         <button
           type="button"
-          class="flex items-center gap-2 text-start rounded-sm"
+          class="flex items-center gap-2 text-start rounded-sm focus-visible:(outline-2 outline-offset-2 outline-accent)"
           :aria-expanded="otherVersionsExpanded"
           :aria-label="
             otherVersionsExpanded