Skip to content

Commit b8ade6d

Browse files
danielroetaskylizard
danielroe
authored and
taskylizard
committed
fix: don't nest select in a summary
1 parent 782f1da commit b8ade6d

5 files changed

Lines changed: 36 additions & 46 deletions

File tree

‎app/components/diff/SidebarPanel.vue‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -180,32 +180,32 @@ function handleFileSelect(file: FileChange) {
180180
<span class="i-carbon-document w-3.5 h-3.5" />
181181
{{ $t('compare.file_changes') }}
182182
</span>
183-
<span class="flex items-center gap-2">
184-
<select
185-
v-model="fileFilter"
186-
class="text-[10px] px-2 py-1 bg-bg-subtle border border-border rounded font-mono cursor-pointer hover:border-border-hover transition-colors"
187-
>
188-
<option value="all">
189-
{{ $t('compare.file_filter_option.all', { count: allChanges.length }) }}
190-
</option>
191-
<option value="added">
192-
{{ $t('compare.file_filter_option.added', { count: compare.stats.filesAdded }) }}
193-
</option>
194-
<option value="removed">
195-
{{ $t('compare.file_filter_option.removed', { count: compare.stats.filesRemoved }) }}
196-
</option>
197-
<option value="modified">
198-
{{
199-
$t('compare.file_filter_option.modified', { count: compare.stats.filesModified })
200-
}}
201-
</option>
202-
</select>
203-
<span
204-
class="i-carbon-chevron-right w-3.5 h-3.5 transition-transform group-open:rotate-90"
205-
/>
206-
</span>
183+
<span
184+
class="i-carbon-chevron-right w-3.5 h-3.5 transition-transform group-open:rotate-90"
185+
/>
207186
</summary>
208187

188+
<div class="border-b border-border px-3 py-2 shrink-0 flex items-center justify-end">
189+
<select
190+
v-model="fileFilter"
191+
:aria-label="$t('compare.filter_files_label')"
192+
class="text-[10px] px-2 py-1 bg-bg-subtle border border-border rounded font-mono cursor-pointer hover:border-border-hover transition-colors"
193+
>
194+
<option value="all">
195+
{{ $t('compare.file_filter_option.all', { count: allChanges.length }) }}
196+
</option>
197+
<option value="added">
198+
{{ $t('compare.file_filter_option.added', { count: compare.stats.filesAdded }) }}
199+
</option>
200+
<option value="removed">
201+
{{ $t('compare.file_filter_option.removed', { count: compare.stats.filesRemoved }) }}
202+
</option>
203+
<option value="modified">
204+
{{ $t('compare.file_filter_option.modified', { count: compare.stats.filesModified }) }}
205+
</option>
206+
</select>
207+
</div>
208+
209209
<div class="flex-1 overflow-y-auto min-h-0">
210210
<div v-if="filteredChanges.length === 0" class="p-8 text-center text-xs text-fg-muted">
211211
{{

‎i18n/locales/en.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1020,7 +1020,8 @@
10201020
},
10211021
"files_button": "Files",
10221022
"select_file_prompt": "Select a file from the sidebar to view its diff",
1023-
"close_files_panel": "Close files panel"
1023+
"close_files_panel": "Close files panel",
1024+
"filter_files_label": "Filter files by change type"
10241025
},
10251026
"privacy_policy": {
10261027
"title": "privacy policy",

‎lunaria/files/en-GB.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1020,7 +1020,8 @@
10201020
},
10211021
"files_button": "Files",
10221022
"select_file_prompt": "Select a file from the sidebar to view its diff",
1023-
"close_files_panel": "Close files panel"
1023+
"close_files_panel": "Close files panel",
1024+
"filter_files_label": "Filter files by change type"
10241025
},
10251026
"privacy_policy": {
10261027
"title": "privacy policy",

‎lunaria/files/en-US.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1020,7 +1020,8 @@
10201020
},
10211021
"files_button": "Files",
10221022
"select_file_prompt": "Select a file from the sidebar to view its diff",
1023-
"close_files_panel": "Close files panel"
1023+
"close_files_panel": "Close files panel",
1024+
"filter_files_label": "Filter files by change type"
10241025
},
10251026
"privacy_policy": {
10261027
"title": "privacy policy",

‎test/nuxt/a11y.spec.ts‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2713,13 +2713,6 @@ describe('component accessibility audits', () => {
27132713
],
27142714
])
27152715

2716-
// DiffSidebarPanel has a known a11y issue: <select> nested inside <summary>
2717-
// This causes 'nested-interactive' violation. TODO: Fix the component to move
2718-
// the select outside of summary or use a different UI pattern.
2719-
function filterKnownViolations(results: AxeResults) {
2720-
return results.violations.filter(v => v.id !== 'nested-interactive')
2721-
}
2722-
27232716
it('should have no accessibility violations', async () => {
27242717
const component = await mountSuspended(DiffSidebarPanel, {
27252718
props: {
@@ -2729,7 +2722,7 @@ describe('component accessibility audits', () => {
27292722
},
27302723
})
27312724
const results = await runAxe(component)
2732-
expect(filterKnownViolations(results)).toEqual([])
2725+
expect(results.violations).toEqual([])
27332726
})
27342727

27352728
it('should have no accessibility violations with selected file', async () => {
@@ -2742,7 +2735,7 @@ describe('component accessibility audits', () => {
27422735
},
27432736
})
27442737
const results = await runAxe(component)
2745-
expect(filterKnownViolations(results)).toEqual([])
2738+
expect(results.violations).toEqual([])
27462739
})
27472740

27482741
it('should have no accessibility violations with file filter', async () => {
@@ -2755,7 +2748,7 @@ describe('component accessibility audits', () => {
27552748
},
27562749
})
27572750
const results = await runAxe(component)
2758-
expect(filterKnownViolations(results)).toEqual([])
2751+
expect(results.violations).toEqual([])
27592752
})
27602753

27612754
it('should have no accessibility violations with warnings', async () => {
@@ -2771,7 +2764,7 @@ describe('component accessibility audits', () => {
27712764
},
27722765
})
27732766
const results = await runAxe(component)
2774-
expect(filterKnownViolations(results)).toEqual([])
2767+
expect(results.violations).toEqual([])
27752768
})
27762769

27772770
it('should have no accessibility violations with no dependency changes', async () => {
@@ -2787,7 +2780,7 @@ describe('component accessibility audits', () => {
27872780
},
27882781
})
27892782
const results = await runAxe(component)
2790-
expect(filterKnownViolations(results)).toEqual([])
2783+
expect(results.violations).toEqual([])
27912784
})
27922785
})
27932786

@@ -2818,12 +2811,6 @@ describe('component accessibility audits', () => {
28182811
{ path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 },
28192812
]
28202813

2821-
// DiffMobileSidebarDrawer uses DiffSidebarPanel which has a known a11y issue:
2822-
// <select> nested inside <summary>. See DiffSidebarPanel tests for details.
2823-
function filterKnownViolations(results: AxeResults) {
2824-
return results.violations.filter(v => v.id !== 'nested-interactive')
2825-
}
2826-
28272814
it('should have no accessibility violations when closed', async () => {
28282815
const component = await mountSuspended(DiffMobileSidebarDrawer, {
28292816
props: {
@@ -2847,7 +2834,7 @@ describe('component accessibility audits', () => {
28472834
},
28482835
})
28492836
const results = await runAxe(component)
2850-
expect(filterKnownViolations(results)).toEqual([])
2837+
expect(results.violations).toEqual([])
28512838
})
28522839
})
28532840

0 commit comments

Comments
 (0)