fix: debounce search results & centralized live region

[RYGRIT]

🔗 Linked issue

resolves#1803

🧭 Context

📚 Description

• Centralized Live Region: Removed the role="status" tags scattered throughout the user interface. Now, all content is handled by a single sr-only element at the bottom.

• Debouncing Updates: Added debouncing for live region (250ms on desktop, 700ms on mobile).

• Less Noise: Hidden the "Updating..." message from screen readers

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 2, 2026 2:52am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 2, 2026 2:52am
npmx-lunaria	Ignored		Mar 2, 2026 2:52am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 041eea7 and a127bc3.

📒 Files selected for processing (1)

• app/pages/search.vue

---

📝 Walkthrough

Walkthrough

Adds a debounced live region announcement system to the search page for screen readers. Introduces computed properties for raw and debounced messages, two debounced updater functions with different delays (desktop ≈250ms, mobile ≈700ms), a watcher that selects the appropriate debouncer by viewport, and lifecycle cleanup to cancel pending debounced updates on unmount. Removes several role="status" attributes from other UI regions, converts one pending indicator to an aria-hidden element, and renders a persistent screen-reader-only live region container in the template for the debounced message.

Suggested reviewers

• knowler
• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description directly addresses the changeset by explaining the three main modifications: centralized live region, debounced updates, and hidden 'Updating' message.
Linked Issues check	✅ Passed	The pull request fully satisfies #1803 requirements: debounced live-region updates (250ms desktop, 700ms mobile), centralized sr-only element, and removal of 'Updating' message from screen readers.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the accessibility improvements outlined in #1803, with no unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

app/pages/search.vue (2)

558-649: Well-structured live region debouncing implementation.

The logic correctly coordinates mobile/desktop debouncing with proper cancellation of the opposite debounce when switching device types. Cleanup on unmount prevents memory leaks.

Minor observation: On line 579, $n(effectiveTotal.value) already returns a formatted string, so the subsequent .toString() call (line 584) is redundant.

Optional: Remove redundant toString()

 const pSize =
preferredPageSize.value === 'all'
? $n(effectiveTotal.value)
: Math.min(preferredPageSize.value, effectiveTotal.value)
return $t(
'filters.count.showing_paginated',
{
- pageSize: pSize.toString(),+ pageSize: String(pSize),
count: $n(effectiveTotal.value),
},
effectiveTotal.value,
)

,

---

860-863: Centralized live region correctly implemented.

The single role="status" element at the end of the template provides a clean centralised announcement point for screen readers.

Consider adding aria-atomic="true" to ensure the entire message is announced when updated, rather than just the changed portion:

Optional enhancement

- <div role="status" class="sr-only">+ <div role="status" aria-atomic="true" class="sr-only">
{{ debouncedLiveRegionMessage }}
</div>

,

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 168ddc6 and 041eea7.

📒 Files selected for processing (1)

• app/pages/search.vue

[knowler]

This is great—thank you! I was hoping a solution would use a single live region, so thank you for doing that.

I’ll let someone with more Vue experience review the code, but if that’s fine, this is good to merge.

[RYGRIT]

thank you very much for review!

[danielroe]

when the next nuxt version is out we might be able to use nuxt/nuxt#34318.

[RYGRIT]

when the next nuxt version is out we might be able to use nuxt/nuxt#34318.

Okay, I will continue to follow up.