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

fix(a11y): add role="note" to JourneyInterlude so aria-label is announced

Browse Source 
Without a landmark or widget role, aria-label on a generic <div> is
silently ignored by most screen readers (ARIA spec). Adding role="note"
gives the element an ARIA role that accepts an accessible name, making
the interlude label actually announced.

Also adds a test asserting role="note" and the matching aria-label are
both present on the same element.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-09 09:09:30 +02:00
parent 75de56928e
commit f004b1f2a6
2 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/lib/geschichte/JourneyInterlude.svelte
View File

@@ -9,6 +9,7 @@ let { note }: Props = $props();
</script> </script>
<div <div
role="note"
aria-label={m.journey_interlude_aria_label()} aria-label={m.journey_interlude_aria_label()}
class="my-2 border-l-4 border-journey-border bg-journey-tint px-4 py-3" class="my-2 border-l-4 border-journey-border bg-journey-tint px-4 py-3"
> >

8
frontend/src/lib/geschichte/JourneyInterlude.svelte.spec.ts
View File

@@ -27,6 +27,14 @@ describe('JourneyInterlude', () => {
expect(el).not.toBeNull(); expect(el).not.toBeNull();
}); });
it('has role="note" so the aria-label is announced by screen readers', async () => {
render(JourneyInterlude, { props: { note: 'Notiz' } });
const el = document.querySelector('[role="note"]');
expect(el).not.toBeNull();
expect(el?.getAttribute('aria-label')).toBe(m.journey_interlude_aria_label());
});
it('renders the section-break glyph ❦', async () => { it('renders the section-break glyph ❦', async () => {
render(JourneyInterlude, { props: { note: 'Notiz' } }); render(JourneyInterlude, { props: { note: 'Notiz' } });