fix(notification): add role=link and touch target to view-all button
Some checks failed
CI / Unit & Component Tests (push) Failing after 1m50s
CI / OCR Service Tests (push) Successful in 17s
CI / Backend Unit Tests (pull_request) Successful in 4m10s
CI / fail2ban Regex (pull_request) Successful in 38s
CI / Compose Bucket Idempotency (pull_request) Failing after 10s
CI / Backend Unit Tests (push) Successful in 4m13s
CI / fail2ban Regex (push) Successful in 38s
CI / Compose Bucket Idempotency (push) Failing after 11s
CI / Unit & Component Tests (pull_request) Failing after 1m51s
CI / OCR Service Tests (pull_request) Successful in 17s
Some checks failed
CI / Unit & Component Tests (push) Failing after 1m50s
CI / OCR Service Tests (push) Successful in 17s
CI / Backend Unit Tests (pull_request) Successful in 4m10s
CI / fail2ban Regex (pull_request) Successful in 38s
CI / Compose Bucket Idempotency (pull_request) Failing after 10s
CI / Backend Unit Tests (push) Successful in 4m13s
CI / fail2ban Regex (push) Successful in 38s
CI / Compose Bucket Idempotency (push) Failing after 11s
CI / Unit & Component Tests (pull_request) Failing after 1m51s
CI / OCR Service Tests (pull_request) Successful in 17s
- role="link" restores screen reader link semantics (Leonie blocker)
- min-h-[44px] px-1 meets WCAG 2.2 §2.5.8 and our 44×48px target size
- Comment in handleViewAll explains close-before-navigate ordering
- Tests updated to getByRole('link') + new call-order assertion
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -14,7 +14,7 @@ type Props = {
|
|||||||
let { notifications, onMarkRead, onMarkAllRead, onClose }: Props = $props();
|
let { notifications, onMarkRead, onMarkAllRead, onClose }: Props = $props();
|
||||||
|
|
||||||
function handleViewAll() {
|
function handleViewAll() {
|
||||||
onClose();
|
onClose(); // close first — avoids stale dropdown during navigation transition
|
||||||
goto('/aktivitaeten');
|
goto('/aktivitaeten');
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -135,8 +135,9 @@ function handleViewAll() {
|
|||||||
<div class="border-t border-line px-4 py-2">
|
<div class="border-t border-line px-4 py-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
role="link"
|
||||||
onclick={handleViewAll}
|
onclick={handleViewAll}
|
||||||
class="text-xs font-medium text-ink-2 transition-colors hover:text-ink"
|
class="min-h-[44px] px-1 text-xs font-medium text-ink-2 transition-colors hover:text-ink"
|
||||||
>
|
>
|
||||||
{m.chronik_view_all()}
|
{m.chronik_view_all()}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -159,7 +159,7 @@ describe('NotificationDropdown', () => {
|
|||||||
expect(onMarkAllRead).toHaveBeenCalledOnce();
|
expect(onMarkAllRead).toHaveBeenCalledOnce();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('calls onClose when the view-all button is clicked', async () => {
|
it('calls onClose when the view-all link is clicked', async () => {
|
||||||
const onClose = vi.fn();
|
const onClose = vi.fn();
|
||||||
render(NotificationDropdown, {
|
render(NotificationDropdown, {
|
||||||
props: {
|
props: {
|
||||||
@@ -170,12 +170,12 @@ describe('NotificationDropdown', () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
await page.getByRole('button', { name: /alle aktivitäten|view all/i }).click();
|
await page.getByRole('link', { name: /alle aktivitäten|view all/i }).click();
|
||||||
|
|
||||||
expect(onClose).toHaveBeenCalledOnce();
|
expect(onClose).toHaveBeenCalledOnce();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('navigates to /aktivitaeten when the view-all button is clicked', async () => {
|
it('navigates to /aktivitaeten when the view-all link is clicked', async () => {
|
||||||
render(NotificationDropdown, {
|
render(NotificationDropdown, {
|
||||||
props: {
|
props: {
|
||||||
notifications: [],
|
notifications: [],
|
||||||
@@ -185,11 +185,29 @@ describe('NotificationDropdown', () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
await page.getByRole('button', { name: /alle aktivitäten|view all/i }).click();
|
await page.getByRole('link', { name: /alle aktivitäten|view all/i }).click();
|
||||||
|
|
||||||
expect(goto).toHaveBeenCalledWith('/aktivitaeten');
|
expect(goto).toHaveBeenCalledWith('/aktivitaeten');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('calls onClose before navigating to /aktivitaeten', async () => {
|
||||||
|
const callOrder: string[] = [];
|
||||||
|
const onClose = vi.fn(() => callOrder.push('close'));
|
||||||
|
(goto as ReturnType<typeof vi.fn>).mockImplementation(() => callOrder.push('goto'));
|
||||||
|
render(NotificationDropdown, {
|
||||||
|
props: {
|
||||||
|
notifications: [],
|
||||||
|
onMarkRead: () => {},
|
||||||
|
onMarkAllRead: () => {},
|
||||||
|
onClose
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
await page.getByRole('link', { name: /alle aktivitäten|view all/i }).click();
|
||||||
|
|
||||||
|
expect(callOrder).toEqual(['close', 'goto']);
|
||||||
|
});
|
||||||
|
|
||||||
it('renders MENTION items with the mention verb text', async () => {
|
it('renders MENTION items with the mention verb text', async () => {
|
||||||
render(NotificationDropdown, {
|
render(NotificationDropdown, {
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
Reference in New Issue
Block a user