fix(a11y): add instant search advisory to homepage search field

[knowler]

A major step towards resolving #1653, builds on @alex-key’s awesome work in #1851.

This adds an advisory to the search field on the main page that fulfills the requirement of WCAG 2.2 Success Criterion 3.2.2 On Input (Level A). I added a “lightning bolt” icon to make it seem more like a feature.

This also include a new shortcut to toggle instant search. I have it set to Ctrl+/. I am open to other suggestions. I found Alt did not work.

There is a slight layout shift at the start if the settings has been disabled… perhaps someone could help me with that.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 3, 2026 9:47am

2 Skipped Deployments

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

[github-actions]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[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 824e152 and ed977dc.

📒 Files selected for processing (1)

• test/nuxt/a11y.spec.ts

---

📝 Walkthrough

Walkthrough

Adds an instant-search UI and behaviour: exposes settings via useSettings(), adds a Ctrl+/ keyboard handler to toggle settings.instantSearch while preserving existing '/' behaviour, widens and refactors the search form layout, conditionally renders an InstantSearch component and an ARIA advisory on the search input, and adds corresponding i18n keys and schema entries for the new strings.

Possibly related issues

• Making “search as you type” accessible #1653 — Modifies the same instant-search UI behaviour (aria-describedby, settings.instantSearch and a keyboard shortcut toggle), so this PR may address that issue.

Possibly related PRs

• feat: keyboard shortcuts switcher in Settings #1684 — Changes global keyboard shortcut handling in app/app.vue and alters '/' hotkey logic; overlaps with this PR’s Ctrl+/ shortcut changes.
• feat: instant search becomes optional #1851 — Implements and wires the instantSearch setting and related UI/i18n updates across the index page and settings, matching this PR’s changes.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, describing the addition of an instant search advisory to satisfy WCAG requirements and the implementation of a keyboard shortcut.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch knowler/instant-search-advisory

---

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]

Actionable comments posted: 2

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2786639 and db5aa6f.

📒 Files selected for processing (4)

• app/app.vue
• app/pages/index.vue
• i18n/locales/en.json
• i18n/schema.json

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/pages/index.vue (1)

110-137: Consider reducing initial layout shift from advisory toggling

If settings.instantSearch hydrates client-side, v-if here can produce a small first-paint shift. Consider reserving space or toggling visibility instead of mounting/unmounting.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between db5aa6f and 76070c1.

📒 Files selected for processing (1)

• app/pages/index.vue

[alexdln]

Hydration mismatch with disabled option, 👀

UPD: #1866

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 76070c1 and 824e152.

📒 Files selected for processing (2)

• app/components/InstantSearch.vue
• app/pages/index.vue