fix: package code page - codecov fixes, a11y test fix

Author: alex-key

app/components/Code/Header.vue

@@ -84,22 +84,22 @@ const isPathDropdownOpen = shallowRef(false)
 const pathDropdownButtonRef = useTemplateRef('pathDropdownButtonRef')
 const pathDropdownListRef = useTemplateRef<HTMLElement>('pathDropdownListRef')
 
-function togglePathDropdown(force: boolean) {
-  if (force !== undefined) {
-    isPathDropdownOpen.value = force
+function togglePathDropdown(forceClose?: boolean) {
+  if (forceClose) {
+    isPathDropdownOpen.value = false
     return
   }
 
   isPathDropdownOpen.value = !isPathDropdownOpen.value
 }
 
-onClickOutside(pathDropdownListRef, () => togglePathDropdown(false), {
+onClickOutside(pathDropdownListRef, () => togglePathDropdown(true), {
   ignore: [pathDropdownButtonRef],
 })
 
 useEventListener('keydown', (event: KeyboardEvent) => {
   if (event.key === 'Escape' && isPathDropdownOpen.value) {
-    togglePathDropdown(false)
+    togglePathDropdown(true)
   }
 })
 </script>
@@ -180,11 +180,11 @@ useEventListener('keydown', (event: KeyboardEvent) => {
             >
               <!-- add └ mark to better visualize nested folders) -->
               <template v-if="level === index">
-                <span class="absolute top-0 bottom-1/2 left-2 w-px bg-fg-subtle/50" />
-                <span class="absolute top-1/2 left-2 right-0 h-px bg-fg-subtle/50" />
+                <span class="absolute top-0 bottom-1/2 inset-is-2 w-px bg-fg-subtle/50" />
+                <span class="absolute top-1/2 inset-is-2 inset-ie-0 h-px bg-fg-subtle/50" />
               </template>
             </span>
-            <span :class="{ 'pl-1': index > 0 }" class="min-w-0 break-all"
+            <span :class="{ 'ps-1': index > 0 }" class="min-w-0 break-all"
               >{{ crumb.name }}<span class="text-fg-subtle">/</span></span
             >
           </NuxtLink>
@@ -241,6 +241,7 @@ useEventListener('keydown', (event: KeyboardEvent) => {
             variant="button-secondary"
             :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             class="px-3"
+            :aria-label="$t('code.open_raw_file')"
           />
         </template>
         <ButtonBase

app/components/Code/SkeletonLoader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex min-h-full" aria-busy="true" :aria-label="$t('common.loading')">
+  <div class="flex min-h-full" role="status" aria-busy="true" :aria-label="$t('common.loading')">
     <!-- Fake line numbers column -->
     <div class="shrink-0 bg-bg-subtle border-ie border-border w-14 py-0">
       <div v-for="n in 20" :key="n" class="px-3 h-6 flex items-center justify-end">

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

@@ -325,7 +325,7 @@ defineOgImageComponent('Default', {
     <!-- Main content: file tree + file viewer -->
     <div
       v-else-if="!!fileTree"
-      class="container w-full grid grid-cols-[18rem_1fr] max-lg:grid-cols-[16rem_1fr] max-md:grid-cols-[1fr] border-border border-r border-l transition-mix-width duration-200 ease-in-out px-0"
+      class="container w-full grid grid-cols-[18rem_1fr] max-lg:grid-cols-[16rem_1fr] max-md:grid-cols-[1fr] border-border border-is border-ie transition-mix-width duration-200 ease-in-out px-0"
       :class="{ 'max-w-full border-0': codeContainerFull }"
       dir="ltr"
     >
@@ -362,7 +362,7 @@ defineOgImageComponent('Default', {
         <CodeSkeletonLoader v-if="isLoading" />
 
         <!-- File viewer -->
-        <template v-else-if="!isBinaryFile && fileContent">
+        <template v-else-if="isViewingFile && !isBinaryFile && fileContent">
           <div
             v-if="fileContent.markdownHtml"
             v-show="markdownViewMode === 'preview'"

i18n/locales/en.json

@@ -821,6 +821,7 @@
     "copy_link": "Copy link",
     "view_raw": "View raw file",
     "toggle_container": "Toggle code container width",
+    "open_raw_file": "Open raw file",
     "open_path_dropdown": "Open path segments dropdown",
     "file_too_large": "File too large to preview",
     "file_size_warning": "{size} exceeds the 500KB limit for syntax highlighting",

test/nuxt/a11y.spec.ts

@@ -1164,15 +1164,23 @@ describe('component accessibility audits', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(CodeHeader, {
         props: {
-          html: '<pre><code><span class="line">const x = 1;</span></code></pre>',
           filePath: 'dir1/dir2/sourcefile.js',
           loading: false,
           isViewingFile: true,
           isBinaryFile: false,
-          fileContent: '<pre><code><span class="line">const x = 1;</span></code></pre>',
+          fileContent: {
+            package: 'vite',
+            version: '1.0.0',
+            path: 'dir1/dir2/sourcefile.js',
+            language: 'javascript',
+            contentType: 'application/javascript',
+            content: 'const x = 1;',
+            html: '<pre><code><span class="line">const x = 1;</span></code></pre>',
+            lines: 1,
+          },
           markdownViewMode: 'preview',
           selectedLines: null,
-          getCodeUrlWithPath: path => path,
+          getCodeUrlWithPath: (path = '') => path,
           packageName: 'vite',
           version: '1.0.0',
         },
@@ -1181,7 +1189,7 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
-  
+
   describe('CodeSkeletonLoader', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(CodeSkeletonLoader)