fix: more focus rings, standardise button size and address clipping issues

Author: danielroe

app/components/CollapsibleSection.vue

@@ -118,14 +118,17 @@ useHead({
       </component>
 
       <!-- Actions slot for buttons or other elements -->
-      <slot name="actions" />
+      <div class="pe-1">
+        <slot name="actions" />
+      </div>
     </div>
 
     <div
       :id="contentId"
       class="grid ms-6 transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
+      :inert="!isOpen"
     >
-      <div class="min-h-0 min-w-0">
+      <div class="min-h-0 min-w-0 p-1">
         <slot />
       </div>
     </div>

app/components/Package/Dependencies.vue

@@ -75,7 +75,7 @@ const sortedOptionalDependencies = computed(() => {
       id="dependencies"
       :title="$t('package.dependencies.title', { count: sortedDependencies.length })"
     >
-      <ul class="space-y-1 list-none m-0 px-1" :aria-label="$t('package.dependencies.list_label')">
+      <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
           :key="dep"
@@ -166,10 +166,7 @@ const sortedOptionalDependencies = computed(() => {
         })
       "
     >
-      <ul
-        class="space-y-1 list-none m-0 p-0"
-        :aria-label="$t('package.peer_dependencies.list_label')"
-      >
+      <ul class="space-y-1 list-none m-0" :aria-label="$t('package.peer_dependencies.list_label')">
         <li
           v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
           :key="peer.name"
@@ -230,7 +227,7 @@ const sortedOptionalDependencies = computed(() => {
       "
     >
       <ul
-        class="space-y-1 list-none m-0 p-0"
+        class="space-y-1 list-none m-0"
         :aria-label="$t('package.optional_dependencies.list_label')"
       >
         <li

app/components/Package/InstallScripts.vue

@@ -31,7 +31,7 @@ const isExpanded = shallowRef(false)
         <dt class="font-mono text-xs text-fg-muted">{{ scriptName }}</dt>
         <dd
           tabindex="0"
-          class="font-mono text-sm text-fg-subtle m-0 truncate focus:whitespace-normal focus:overflow-visible cursor-help rounded focus-visible:outline-accent/70"
+          class="font-mono text-sm text-fg-subtle m-0 truncate focus:whitespace-normal focus:overflow-visible cursor-help rounded focus-visible:(outline-2 outline-accent outline-offset-2)"
           :title="installScripts.content?.[scriptName]"
         >
           {{ installScripts.content?.[scriptName] || $t('package.install_scripts.script_label') }}

app/components/Package/Playgrounds.vue

@@ -109,7 +109,7 @@ function focusMenuItem(index: number) {
 </script>
 
 <template>
-  <section v-if="links.length > 0">
+  <section v-if="links.length > 0" class="px-1">
     <h2 id="playgrounds-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
       {{ $t('package.playgrounds.title') }}
     </h2>
@@ -121,7 +121,7 @@ function focusMenuItem(index: number) {
           :href="firstLink.url"
           target="_blank"
           rel="noopener noreferrer"
-          class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
+          class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-accent/70 transition-colors duration-200"
         >
           <span
             :class="[getIcon(firstLink.provider), getColor(firstLink.provider), 'w-4 h-4 shrink-0']"
@@ -137,7 +137,7 @@ function focusMenuItem(index: number) {
         type="button"
         aria-haspopup="true"
         :aria-expanded="isOpen"
-        class="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
+        class="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-accent/70 transition-colors duration-200"
         @click="isOpen = !isOpen"
         @keydown="handleKeydown"
       >
@@ -176,7 +176,7 @@ function focusMenuItem(index: number) {
               target="_blank"
               rel="noopener noreferrer"
               role="menuitem"
-              class="flex items-center gap-2 px-3 py-2 text-sm font-mono text-fg-muted hover:text-fg hover:bg-bg-muted focus-visible:outline-none focus-visible:text-fg focus-visible:bg-bg-muted transition-colors duration-150"
+              class="flex items-center gap-2 px-3 py-2 text-sm font-mono text-fg-muted hover:text-fg hover:bg-bg-muted focus-visible:outline-accent/70 focus-visible:text-fg focus-visible:bg-bg-muted transition-colors duration-150"
               @click="closeDropdown"
             >
               <span

app/components/Package/SkillsCard.vue

@@ -14,7 +14,7 @@ const skillsModal = useModal('skills-modal')
   <CollapsibleSection v-if="skills.length" :title="$t('package.skills.title')" id="skills">
     <button
       type="button"
-      class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
+      class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-accent/70 transition-colors duration-200"
       @click="skillsModal.open()"
     >
       <span class="i-custom:agent-skills w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />

app/components/Package/Versions.vue

@@ -311,7 +311,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
         :href="`https://majors.nullvoxpopuli.com/q?packages=${packageName}`"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
+        class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
         :title="$t('package.downloads.community_distribution')"
       >
         <span class="i-carbon:load-balancer-network w-3.5 h-3.5" aria-hidden="true" />

app/components/Package/WeeklyDownloadStats.vue

@@ -202,7 +202,7 @@ const config = computed(() => {
         <button
           type="button"
           @click="openChartModal"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-accent/70 rounded"
+          class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
           :title="$t('package.downloads.analyze')"
         >
           <span class="i-carbon:data-analytics w-4 h-4" aria-hidden="true" />

app/pages/package/[...package].vue

@@ -838,7 +838,7 @@ defineOgImageComponent('Package', {
                 :href="`https://npmgraph.js.org/?q=${pkg.name}`"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
+                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
                 :title="$t('package.stats.view_dependency_graph')"
               >
                 <span class="i-carbon:network-3 w-3.5 h-3.5" aria-hidden="true" />
@@ -850,7 +850,7 @@ defineOgImageComponent('Package', {
                 :href="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
+                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
                 :title="$t('package.stats.inspect_dependency_tree')"
               >
                 <span class="i-lucide-view w-3.5 h-3.5" aria-hidden="true" />