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

feat(comment): expose comment id + focus ring on CommentMessage wrapper

Browse Source 
Notification deep-link scroll targets #comment-{id}. Add the id to
the article wrapper along with tabindex="-1" so scrollIntoView +
.focus({preventScroll:true}) can land screen-reader and keyboard
focus on the specific comment. A focus-visible ring appears only
for keyboard users so mouse clicks don't trigger a visible outline.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-21 13:32:04 +02:00
parent 251eb9c3fc
commit 20ae85f879
2 changed files with 27 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/lib/components/CommentMessage.svelte
View File

@@ -32,7 +32,12 @@ const wasEdited = $derived(message.updatedAt > message.createdAt);
const parsed = $derived(extractQuote(message.content));
</script>
<div role="article" class="flex gap-2">
<div
id="comment-{message.id}"
role="article"
tabindex="-1"
class="flex gap-2 rounded outline-none focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2"
>
<!-- Avatar circle with initials -->
<div
class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-fg"

21
frontend/src/lib/components/CommentMessage.svelte.spec.ts
View File

@@ -82,4 +82,25 @@ describe('CommentMessage', () => {
await expect.element(textarea).toBeInTheDocument();
await expect.element(textarea).toHaveValue('current edit text');
});
it('exposes id="comment-{message.id}" on the article wrapper for deep-link scroll', async () => {
render(CommentMessage, defaultProps());
const article = page.getByRole('article').element();
expect(article.getAttribute('id')).toBe('comment-msg-1');
});
it('is focusable but not in tab order (tabindex="-1")', async () => {
render(CommentMessage, defaultProps());
const article = page.getByRole('article').element();
expect(article.getAttribute('tabindex')).toBe('-1');
});
it('shows a focus-visible ring when focused via keyboard', async () => {
render(CommentMessage, defaultProps());
const article = page.getByRole('article').element();
const classes = article.className;
expect(classes).toMatch(/focus-visible:ring-2/);
expect(classes).toMatch(/focus-visible:ring-brand-navy/);
expect(classes).toMatch(/outline-none/);
});
});