fix: don't nest select in a summary

Author: danielroe

app/components/diff/SidebarPanel.vue

@@ -180,32 +180,32 @@ function handleFileSelect(file: FileChange) {
           <span class="i-carbon-document w-3.5 h-3.5" />
           {{ $t('compare.file_changes') }}
         </span>
-        <span class="flex items-center gap-2">
-          <select
-            v-model="fileFilter"
-            class="text-[10px] px-2 py-1 bg-bg-subtle border border-border rounded font-mono cursor-pointer hover:border-border-hover transition-colors"
-          >
-            <option value="all">
-              {{ $t('compare.file_filter_option.all', { count: allChanges.length }) }}
-            </option>
-            <option value="added">
-              {{ $t('compare.file_filter_option.added', { count: compare.stats.filesAdded }) }}
-            </option>
-            <option value="removed">
-              {{ $t('compare.file_filter_option.removed', { count: compare.stats.filesRemoved }) }}
-            </option>
-            <option value="modified">
-              {{
-                $t('compare.file_filter_option.modified', { count: compare.stats.filesModified })
-              }}
-            </option>
-          </select>
-          <span
-            class="i-carbon-chevron-right w-3.5 h-3.5 transition-transform group-open:rotate-90"
-          />
-        </span>
+        <span
+          class="i-carbon-chevron-right w-3.5 h-3.5 transition-transform group-open:rotate-90"
+        />
       </summary>
 
+      <div class="border-b border-border px-3 py-2 shrink-0 flex items-center justify-end">
+        <select
+          v-model="fileFilter"
+          :aria-label="$t('compare.filter_files_label')"
+          class="text-[10px] px-2 py-1 bg-bg-subtle border border-border rounded font-mono cursor-pointer hover:border-border-hover transition-colors"
+        >
+          <option value="all">
+            {{ $t('compare.file_filter_option.all', { count: allChanges.length }) }}
+          </option>
+          <option value="added">
+            {{ $t('compare.file_filter_option.added', { count: compare.stats.filesAdded }) }}
+          </option>
+          <option value="removed">
+            {{ $t('compare.file_filter_option.removed', { count: compare.stats.filesRemoved }) }}
+          </option>
+          <option value="modified">
+            {{ $t('compare.file_filter_option.modified', { count: compare.stats.filesModified }) }}
+          </option>
+        </select>
+      </div>
+
       <div class="flex-1 overflow-y-auto min-h-0">
         <div v-if="filteredChanges.length === 0" class="p-8 text-center text-xs text-fg-muted">
           {{

i18n/locales/en.json

@@ -975,6 +975,7 @@
     },
     "files_button": "Files",
     "select_file_prompt": "Select a file from the sidebar to view its diff",
-    "close_files_panel": "Close files panel"
+    "close_files_panel": "Close files panel",
+    "filter_files_label": "Filter files by change type"
   }
 }

lunaria/files/en-GB.json

@@ -975,6 +975,7 @@
     },
     "files_button": "Files",
     "select_file_prompt": "Select a file from the sidebar to view its diff",
-    "close_files_panel": "Close files panel"
+    "close_files_panel": "Close files panel",
+    "filter_files_label": "Filter files by change type"
   }
 }

lunaria/files/en-US.json

@@ -975,6 +975,7 @@
     },
     "files_button": "Files",
     "select_file_prompt": "Select a file from the sidebar to view its diff",
-    "close_files_panel": "Close files panel"
+    "close_files_panel": "Close files panel",
+    "filter_files_label": "Filter files by change type"
   }
 }

test/nuxt/a11y.spec.ts

@@ -2442,13 +2442,6 @@ describe('component accessibility audits', () => {
       ],
     ])
 
-    // DiffSidebarPanel has a known a11y issue: <select> nested inside <summary>
-    // This causes 'nested-interactive' violation. TODO: Fix the component to move
-    // the select outside of summary or use a different UI pattern.
-    function filterKnownViolations(results: AxeResults) {
-      return results.violations.filter(v => v.id !== 'nested-interactive')
-    }
-
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(DiffSidebarPanel, {
         props: {
@@ -2458,7 +2451,7 @@ describe('component accessibility audits', () => {
         },
       })
       const results = await runAxe(component)
-      expect(filterKnownViolations(results)).toEqual([])
+      expect(results.violations).toEqual([])
     })
 
     it('should have no accessibility violations with selected file', async () => {
@@ -2471,7 +2464,7 @@ describe('component accessibility audits', () => {
         },
       })
       const results = await runAxe(component)
-      expect(filterKnownViolations(results)).toEqual([])
+      expect(results.violations).toEqual([])
     })
 
     it('should have no accessibility violations with file filter', async () => {
@@ -2484,7 +2477,7 @@ describe('component accessibility audits', () => {
         },
       })
       const results = await runAxe(component)
-      expect(filterKnownViolations(results)).toEqual([])
+      expect(results.violations).toEqual([])
     })
 
     it('should have no accessibility violations with warnings', async () => {
@@ -2500,7 +2493,7 @@ describe('component accessibility audits', () => {
         },
       })
       const results = await runAxe(component)
-      expect(filterKnownViolations(results)).toEqual([])
+      expect(results.violations).toEqual([])
     })
 
     it('should have no accessibility violations with no dependency changes', async () => {
@@ -2516,7 +2509,7 @@ describe('component accessibility audits', () => {
         },
       })
       const results = await runAxe(component)
-      expect(filterKnownViolations(results)).toEqual([])
+      expect(results.violations).toEqual([])
     })
   })
 
@@ -2547,12 +2540,6 @@ describe('component accessibility audits', () => {
       { path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 },
     ]
 
-    // DiffMobileSidebarDrawer uses DiffSidebarPanel which has a known a11y issue:
-    // <select> nested inside <summary>. See DiffSidebarPanel tests for details.
-    function filterKnownViolations(results: AxeResults) {
-      return results.violations.filter(v => v.id !== 'nested-interactive')
-    }
-
     it('should have no accessibility violations when closed', async () => {
       const component = await mountSuspended(DiffMobileSidebarDrawer, {
         props: {
@@ -2576,7 +2563,7 @@ describe('component accessibility audits', () => {
         },
       })
       const results = await runAxe(component)
-      expect(filterKnownViolations(results)).toEqual([])
+      expect(results.violations).toEqual([])
     })
   })