fix(a11y): add instant search advisory to homepage search field by knowler · Pull Request #1845 · npmx-dev/npmx.dev

knowler · 2026-03-02T18:12:53Z

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.

The homepage search field now with an advisory underneath it prefixed with a lightning bolt icon that reads “Instant search: navigate to results as you type. Turn off in settings or press Ctrl+/.”

vercel · 2026-03-02T18:12:57Z

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 11:58am

2 Skipped Deployments

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

github-actions · 2026-03-02T18:13:40Z

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 · 2026-03-02T18:21:35Z

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 · 2026-03-03T00:01:09Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds an InstantSearch Vue component, exposes settings via useSettings(), and updates the search page layout and input to include an ARIA advisory and conditional InstantSearch UI. Implements a Ctrl+/ keyboard handler that toggles settings.instantSearch while preserving the existing '/' behaviour. Adds i18n keys and schema entries for instant-search text and adds an accessibility test for the new component.

Possibly related issues

Making “search as you type” accessible #1653 — Targets the same instant-search behaviour: aria-describedby on the search input, a settings.instantSearch toggle and a keyboard shortcut to toggle it.

Possibly related PRs

feat: keyboard shortcuts switcher in Settings #1684 — Modifies global keyboard shortcut handling in app/app.vue and the '/' hotkey logic, which overlaps the Ctrl+/ shortcut changes in this PR.
feat: instant search becomes optional #1851 — Implements and wires the settings.instantSearch flag and related UI/i18n updates that this PR adds.
feat: add input component #1173 — Changes the search input and focus handling on app/pages/index.vue, overlapping the index page search UI refactor in this PR.

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, detailing the addition of an accessibility advisory to the search field and a new keyboard shortcut for toggling instant search.

_{✏️ 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
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

_{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

app/app.vue

app/pages/index.vue

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

app/pages/index.vue

alexdln · 2026-03-03T07:38:27Z

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

app/components/InstantSearch.vue

danielroe · 2026-03-03T11:31:53Z

I want to see if I can tweak the wording to be shorter/more succinct - maybe something like:

⚡ Instant search on - turn off

maybe we don't need anything in settings at all

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 ed977dc and 87fe071.

📒 Files selected for processing (4)

app/components/InstantSearch.vue
app/pages/index.vue
i18n/locales/en.json
i18n/schema.json

🚧 Files skipped from review as they are similar to previous changes (2)

i18n/schema.json
app/components/InstantSearch.vue

app/pages/index.vue

knowler · 2026-03-03T13:15:20Z

We’ll need to follow up with a few changes to the wording as it’s too vague.

There are two parts here: the description of the behaviour and the description of how to turn it off.

“Instant search” on its own is vague, but it might be fine if we can direct users to a more clear definition. Though this is the main part that is required by WCAG 2.2 SC 3.2.2.

What I think is almost more important is the description of how to turn it off. The problem with just using an action “turn off” is that this doesn’t make a whole lot of sense for screen reader users. aria-describedby does not convey semantics or even location of the description. So, whatever’s set for it needs to make sense on its own. This is why I had worded it to direct the user where to go (“Turn off in settings”) and gave them an immediate way to shut it off (the hotkey).

We could consider using a tooltip to reduce the visual noise here and then provide a screen reader only description for the control.

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

db5aa6f

knowler force-pushed the knowler/instant-search-advisory branch from 1c0ab37 to db5aa6f Compare March 2, 2026 23:49

vercel bot deployed to Preview – npmx.dev March 2, 2026 23:52 View deployment

knowler marked this pull request as ready for review March 2, 2026 23:57

knowler requested review from alexdln and danielroe March 2, 2026 23:58

coderabbitai bot reviewed Mar 3, 2026

View reviewed changes

app/app.vue Show resolved Hide resolved

app/pages/index.vue Show resolved Hide resolved

fix: only apply aria-describedby when instant search advisory is visible

76070c1

vercel bot deployed to Preview – npmx.dev March 3, 2026 00:08 View deployment

coderabbitai bot reviewed Mar 3, 2026

View reviewed changes

app/pages/index.vue Show resolved Hide resolved

serhalp added this to the Alpha announcement milestone Mar 3, 2026

alexdln mentioned this pull request Mar 3, 2026

fix: correct hydration for instant search #1866

Merged

fix: correct hydration for instant search (#1866)

824e152

vercel bot deployed to Preview – npmx.dev March 3, 2026 09:38 View deployment

coderabbitai bot reviewed Mar 3, 2026

View reviewed changes

app/components/InstantSearch.vue Show resolved Hide resolved

test: add a11y test for instant-search

ed977dc

vercel bot deployed to Preview – npmx.dev March 3, 2026 09:47 View deployment

danielroe approved these changes Mar 3, 2026

View reviewed changes

danielroe added this pull request to the merge queue Mar 3, 2026

danielroe removed this pull request from the merge queue due to a manual request Mar 3, 2026

chore: simplify and always keep tagline

87fe071

vercel bot deployed to Preview – npmx.dev March 3, 2026 11:51 View deployment

coderabbitai bot reviewed Mar 3, 2026

View reviewed changes

app/pages/index.vue Outdated Show resolved Hide resolved

chore: remove call

1579638

danielroe enabled auto-merge March 3, 2026 11:56

vercel bot deployed to Preview – npmx.dev March 3, 2026 11:58 View deployment

danielroe added this pull request to the merge queue Mar 3, 2026

Merged via the queue into main with commit 3700438 Mar 3, 2026
23 checks passed

danielroe deleted the knowler/instant-search-advisory branch March 3, 2026 12:03

Uh oh!

Conversation

knowler commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

codecov bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Possibly related issues

Possibly related PRs

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexdln commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

danielroe commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

knowler commented Mar 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

knowler commented Mar 2, 2026 •

edited

Loading

vercel bot commented Mar 2, 2026 •

edited

Loading

github-actions bot commented Mar 2, 2026 •

edited

Loading

codecov bot commented Mar 2, 2026 •

edited

Loading

coderabbitai bot commented Mar 3, 2026 •

edited

Loading

alexdln commented Mar 3, 2026 •

edited

Loading

danielroe commented Mar 3, 2026 •

edited

Loading