marcel/familienarchiv
1
0
Fork 0
Code Issues 126 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

a11y(persons): add aria-label to PersonTypeSelector radiogroup

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-26 12:25:03 +02:00
committed by marcel
parent 5961bfb916
commit 1d5f99a2c8
2 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/lib/components/PersonTypeSelector.svelte
View File

@@ -32,6 +32,7 @@ function select(type: PersonType) {
<div <div
role="radiogroup" role="radiogroup"
aria-label={m.form_label_person_type()}
class="grid grid-cols-2 gap-2 sm:grid-cols-4" class="grid grid-cols-2 gap-2 sm:grid-cols-4"
use:radioGroupNav={(v) => { if (TYPES.includes(v as PersonType)) select(v as PersonType); }} use:radioGroupNav={(v) => { if (TYPES.includes(v as PersonType)) select(v as PersonType); }}
> >

7
frontend/src/lib/components/PersonTypeSelector.svelte.spec.ts
View File

@@ -7,6 +7,13 @@ import PersonTypeSelector from './PersonTypeSelector.svelte';
afterEach(() => cleanup()); afterEach(() => cleanup());
describe('PersonTypeSelector', () => { describe('PersonTypeSelector', () => {
it('radiogroup has an accessible name via aria-label', () => {
const { container } = render(PersonTypeSelector, { value: 'PERSON' });
const radiogroup = container.querySelector('[role="radiogroup"]');
expect(radiogroup).not.toBeNull();
expect(radiogroup!.getAttribute('aria-label')).toBeTruthy();
});
it('hidden input value updates when user navigates with ArrowRight', async () => { it('hidden input value updates when user navigates with ArrowRight', async () => {
const { container } = render(PersonTypeSelector, { value: 'PERSON' }); const { container } = render(PersonTypeSelector, { value: 'PERSON' });
const hiddenInput = container.querySelector('input[type="hidden"]') as HTMLInputElement; const hiddenInput = container.querySelector('input[type="hidden"]') as HTMLInputElement;