refactor: replace links and buttons for compare and code page (#1243)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 3 people

app/components/AppHeader.vue

@@ -259,7 +259,7 @@ onKeyStroke(
           class="border-none"
           variant="button-secondary"
           :to="link.to"
-          :keyshortcut="link.keyshortcut"
+          :aria-keyshortcuts="link.keyshortcut"
         >
           {{ link.label }}
         </LinkBase>

app/components/Button/Base.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    'disabled'?: boolean
-    'type'?: 'button' | 'submit'
-    'variant'?: 'primary' | 'secondary'
-    'size'?: 'small' | 'medium'
-    'keyshortcut'?: string
+    disabled?: boolean
+    type?: 'button' | 'submit'
+    variant?: 'primary' | 'secondary'
+    size?: 'small' | 'medium'
+    ariaKeyshortcuts?: string
 
-    /**
-     * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
-     */
-    'aria-keyshortcuts'?: never
-
-    'classicon'?: string
+    classicon?: string
   }>(),
   {
     type: 'button',
@@ -36,7 +31,7 @@ defineExpose({
     :class="{
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
-      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(bg-fg text-bg/50))':
+      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant === 'primary',
@@ -51,7 +46,7 @@ defineExpose({
        */
       disabled ? true : undefined
     "
-    :aria-keyshortcuts="keyshortcut"
+    :aria-keyshortcuts="ariaKeyshortcuts"
   >
     <span
       v-if="classicon"
@@ -60,11 +55,11 @@ defineExpose({
     />
     <slot />
     <kbd
-      v-if="keyshortcut"
+      v-if="ariaKeyshortcuts"
       class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
-      {{ keyshortcut }}
+      {{ ariaKeyshortcuts }}
     </kbd>
   </button>
 </template>

app/components/Code/DirectoryListing.vue

@@ -76,13 +76,14 @@ const bytesFormatter = useBytesFormatter()
           class="border-b border-border hover:bg-bg-subtle transition-colors"
         >
           <td colspan="2">
-            <NuxtLink
+            <LinkBase
               :to="getCodeRoute(parentPath || undefined)"
-              class="flex items-center gap-2 py-2 px-4 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
+              class="py-2 px-4 font-mono text-sm w-full"
+              no-underline
+              classicon="i-carbon:folder text-yellow-600"
             >
-              <span class="i-carbon:folder w-4 h-4 text-yellow-600" />
-              <span>..</span>
-            </NuxtLink>
+              <span class="w-full flex justify-self-stretch items-center gap-2"> .. </span>
+            </LinkBase>
           </td>
         </tr>
 
@@ -93,24 +94,26 @@ const bytesFormatter = useBytesFormatter()
           class="border-b border-border hover:bg-bg-subtle transition-colors"
         >
           <td colspan="2">
-            <NuxtLink
+            <LinkBase
               :to="getCodeRoute(node.path)"
-              class="flex items-center gap-2 py-2 px-4 font-mono text-sm hover:text-fg transition-colors"
-              :class="node.type === 'directory' ? 'text-fg' : 'text-fg-muted'"
+              class="py-2 px-4 font-mono text-sm w-full"
+              no-underline
+              :classicon="
+                node.type === 'directory'
+                  ? 'i-carbon:folder text-yellow-600'
+                  : getFileIcon(node.name)
+              "
             >
-              <span
-                v-if="node.type === 'directory'"
-                class="i-carbon:folder w-4 h-4 text-yellow-600"
-              />
-              <span v-else class="w-4 h-4" :class="getFileIcon(node.name)" />
-              <span class="flex-1">{{ node.name }}</span>
-              <span
-                v-if="node.type === 'file' && node.size"
-                class="text-end font-mono text-xs text-fg-subtle"
-              >
-                {{ bytesFormatter.format(node.size) }}
+              <span class="w-full flex justify-self-stretch items-center gap-2">
+                <span class="flex-1">{{ node.name }}</span>
+                <span
+                  v-if="node.type === 'file' && node.size"
+                  class="text-end text-xs text-fg-subtle"
+                >
+                  {{ bytesFormatter.format(node.size) }}
+                </span>
               </span>
-            </NuxtLink>
+            </LinkBase>
           </td>
         </tr>
       </tbody>

app/components/Code/FileTree.vue

@@ -49,17 +49,13 @@ watch(
     <li v-for="node in tree" :key="node.path">
       <!-- Directory -->
       <template v-if="node.type === 'directory'">
-        <button
-          type="button"
-          class="w-full flex items-center gap-1.5 py-1.5 px-3 text-start font-mono text-sm transition-colors hover:bg-bg-muted"
-          :class="isNodeActive(node) ? 'text-fg' : 'text-fg-muted'"
+        <ButtonBase
+          class="w-full flex! justify-start! rounded-none! border-none!"
+          :aria-pressed="isNodeActive(node)"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
+          :classicon="isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
         >
-          <span
-            class="w-4 h-4 shrink-0 transition-transform"
-            :class="[isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right']"
-          />
           <span
             class="w-4 h-4 shrink-0"
             :class="
@@ -69,7 +65,7 @@ watch(
             "
           />
           <span class="truncate">{{ node.name }}</span>
-        </button>
+        </ButtonBase>
         <CodeFileTree
           v-if="isExpanded(node.path) && node.children"
           :tree="node.children"
@@ -82,15 +78,16 @@ watch(
 
       <!-- File -->
       <template v-else>
-        <NuxtLink
+        <LinkBase
+          variant="button-secondary"
           :to="getFileRoute(node.path)"
-          class="flex items-center gap-1.5 py-1.5 px-3 font-mono text-sm transition-colors hover:bg-bg-muted"
-          :class="currentPath === node.path ? 'bg-bg-muted text-fg' : 'text-fg-muted'"
+          :aria-current="currentPath === node.path"
+          class="w-full flex! justify-start! rounded-none! border-none!"
           :style="{ paddingLeft: `${depth * 12 + 32}px` }"
+          :classicon="getFileIcon(node.name)"
         >
-          <span class="w-4 h-4 shrink-0" :class="getFileIcon(node.name)" />
           <span class="truncate">{{ node.name }}</span>
-        </NuxtLink>
+        </LinkBase>
       </template>
     </li>
   </ul>

app/components/Code/MobileTreeDrawer.vue

@@ -27,14 +27,13 @@ watch(isOpen, open => (isLocked.value = open))
 
 <template>
   <!-- Toggle button (mobile only) -->
-  <button
-    type="button"
-    class="md:hidden fixed bottom-4 inset-ie-4 z-40 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
+  <ButtonBase
+    variant="primary"
+    class="md:hidden fixed bottom-4 inset-ie-4 z-45"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
-  >
-    <span class="w-5 h-5" :class="isOpen ? 'i-carbon:close' : 'i-carbon:folder'" />
-  </button>
+    :classicon="isOpen ? 'i-carbon:close' : 'i-carbon:folder'"
+  />
 
   <!-- Backdrop -->
   <Transition
@@ -66,14 +65,11 @@ watch(isOpen, open => (isLocked.value = open))
       >
         <span class="font-mono text-sm text-fg-muted">{{ $t('code.files_label') }}</span>
         <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
-        <button
-          type="button"
-          class="text-fg-muted hover:text-fg transition-colors"
+        <ButtonBase
           :aria-label="$t('code.close_tree')"
           @click="isOpen = false"
-        >
-          <span class="i-carbon:close w-5 h-5" />
-        </button>
+          classicon="i-carbon-close"
+        />
       </div>
       <CodeFileTree
         :tree="tree"

app/components/Code/Viewer.vue

@@ -67,6 +67,7 @@ watch(
       :style="{ '--line-digits': lineDigits }"
       aria-hidden="true"
     >
+      <!-- This needs to be a native <a> element, because `LinkBase` (or specifically `NuxtLink`) does not seem to work when trying to prevent default behavior (jumping to the anchor) -->
       <a
         v-for="lineNum in lineNumbers"
         :id="`L${lineNum}`"

app/components/Compare/ComparisonGrid.vue

@@ -40,13 +40,13 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
         <!-- Package columns -->
         <div v-for="col in columns" :key="col.name" class="comparison-cell comparison-cell-header">
           <span class="inline-flex items-center gap-1.5 truncate">
-            <NuxtLink
+            <LinkBase
               :to="packageRoute(col.name, col.version)"
-              class="link-subtle font-mono text-sm font-medium text-fg truncate"
+              class="text-sm flex! truncate"
               :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
               {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
-            </NuxtLink>
+            </LinkBase>
             <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
               <span
                 class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
@@ -79,13 +79,9 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
                 <p class="text-xs text-fg-muted">
                   <i18n-t keypath="compare.no_dependency.tooltip_description" tag="span">
                     <template #link>
-                      <a
-                        href="https://e18e.dev/docs/replacements/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-accent hover:underline"
-                        >{{ $t('compare.no_dependency.e18e_community') }}</a
-                      >
+                      <LinkBase to="https://e18e.dev/docs/replacements/">{{
+                        $t('compare.no_dependency.e18e_community')
+                      }}</LinkBase>
                     </template>
                   </i18n-t>
                 </p>

app/components/Compare/FacetSelector.vue

@@ -32,47 +32,39 @@ function isCategoryNoneSelected(category: string): boolean {
         <span class="text-3xs text-fg-subtle uppercase tracking-wider">
           {{ getCategoryLabel(category) }}
         </span>
-        <button
-          type="button"
-          class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
-          :class="
-            isCategoryAllSelected(category)
-              ? 'text-fg-muted'
-              : 'text-fg-muted/60 hover:text-fg-muted'
-          "
+        <!-- TODO: These should be radios, since they are mutually exclusive, and currently this behavior is faked with buttons -->
+        <ButtonBase
           :aria-label="
             $t('compare.facets.select_category', { category: getCategoryLabel(category) })
           "
+          :aria-pressed="isCategoryAllSelected(category)"
           :disabled="isCategoryAllSelected(category)"
           @click="selectCategory(category)"
+          size="small"
         >
           {{ $t('compare.facets.all') }}
-        </button>
+        </ButtonBase>
         <span class="text-2xs text-fg-muted/40">/</span>
-        <button
-          type="button"
-          class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
-          :class="
-            isCategoryNoneSelected(category)
-              ? 'text-fg-muted'
-              : 'text-fg-muted/60 hover:text-fg-muted'
-          "
+        <ButtonBase
           :aria-label="
             $t('compare.facets.deselect_category', { category: getCategoryLabel(category) })
           "
+          :aria-pressed="isCategoryNoneSelected(category)"
           :disabled="isCategoryNoneSelected(category)"
           @click="deselectCategory(category)"
+          size="small"
         >
           {{ $t('compare.facets.none') }}
-        </button>
+        </ButtonBase>
       </div>
 
       <!-- Facet buttons -->
       <div class="flex items-center gap-1.5 flex-wrap" role="group">
-        <button
+        <!-- TODO: These should be checkboxes -->
+        <ButtonBase
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
-          type="button"
+          size="small"
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
           :disabled="facet.comingSoon"
           :aria-pressed="isFacetSelected(facet.id)"
@@ -86,18 +78,19 @@ function isCategoryNoneSelected(category: string): boolean {
                 : 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border'
           "
           @click="!facet.comingSoon && toggleFacet(facet.id)"
+          :classicon="
+            facet.comingSoon
+              ? undefined
+              : isFacetSelected(facet.id)
+                ? 'i-carbon:checkmark'
+                : 'i-carbon:add'
+          "
         >
-          <span
-            v-if="!facet.comingSoon"
-            class="w-3 h-3"
-            :class="isFacetSelected(facet.id) ? 'i-carbon:checkmark' : 'i-carbon:add'"
-            aria-hidden="true"
-          />
           {{ facet.label }}
           <span v-if="facet.comingSoon" class="text-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
-        </button>
+        </ButtonBase>
       </div>
     </div>
   </div>