♿️(frontend) align search modal field label with placeholder

[Ovgodd]

Purpose

The search modal input exposed three inconsistent names (aria-label, <label>, and placeholder). Screen reader users heard a different label than the visible placeholder

Proposal

• Remove redundant aria-label on QuickSearchInput so the accessible name comes from cmdk's <label> (aria-labelledby) instead of overriding it
• Align DocSearchModal label and placeholder on Type the name of a document
• Add optional listLabel on QuickSearch so the results listbox keeps Search results as aria-label when the input label changes
• Update e2e selectors in doc-search.spec.ts to match the new combobox accessible name

[github-actions]

Size Change: 0 B

Total Size: 4.33 MB

📦 View Changed

Filename	Size	Change
apps/impress/out/_next/static/8d73debf/_buildManifest.js	675 B	+675 B (new file)	🆕
apps/impress/out/_next/static/b4b4a1e4/_buildManifest.js	0 B	-675 B (removed)	🏆

_{compressed-size-action}

[coderabbitai]

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

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 510b9b1b-7caf-404b-8206-55ec17a4c4d4

📥 Commits

Reviewing files that changed from the base of the PR and between ab3e2df and 6a39f7f.

📒 Files selected for processing (7)

• CHANGELOG.md
• src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts
• src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts
• src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx
• src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
• src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
• src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx

---

Walkthrough

This PR aligns search input field labels with their placeholder text across document search and move modals. QuickSearchInput no longer sets an internal aria-label and drops its label prop; consumers (DocSearchModal, DocMoveModal) now pass explicit label strings ("Type the name of a document" and "Search for a doc..."). Playwright e2e tests update combobox selectors to match the new accessible names. CHANGELOG documents the change.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• AntoLC

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and accurately summarizes the main change: aligning the search modal field's label with its placeholder for accessibility compliance.
Description check	✅ Passed	The description is clearly related to the changeset, explaining the accessibility problem being fixed and listing the specific changes made to address the issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/a11y-2347-search-modal-label

Warning

Tools execution failed with the following error:

Failed to run tools: 13 INTERNAL: Received RST_STREAM with code 2 (Internal server error)

---

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: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts (1)

39-39: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Consider updating for consistency with other tests.

Line 39 uses getByPlaceholder while the other tests in this file (lines 110, 123, 171, 173, 195) were updated to use getByRole('combobox', { name: 'Type the name of a document' }). Using getByRole with the accessible name is the recommended approach for accessibility testing and aligns with the PR's objective to update test selectors to match the new combobox accessible name.

♻️ Proposed refactor

-    const inputSearch = page.getByPlaceholder('Type the name of a document');
+    const inputSearch = page.getByRole('combobox', { name: 'Type the name of a document' });

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts` at line 39,
Replace the use of getByPlaceholder for the document search input with the
accessible-role selector to match other tests: change the code that sets
inputSearch (currently using page.getByPlaceholder) to use
page.getByRole('combobox', { name: 'Type the name of a document' }) so the test
queries the combobox by its accessible name; update any references to the
inputSearch variable if needed to reflect the new selector usage.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts`:
- Around line 171-174: Extract the repeated combobox selector into a local
variable to avoid duplication: create a constant (e.g., docCombobox) assigned to
page.getByRole('combobox', { name: 'Type the name of a document' }) and then
call docCombobox.click() and docCombobox.fill('sub page search'); update uses in
the test (the code surrounding the existing await page.getByRole(...) calls) to
reference that variable.

---

Outside diff comments:
In `@src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts`:
- Line 39: Replace the use of getByPlaceholder for the document search input
with the accessible-role selector to match other tests: change the code that
sets inputSearch (currently using page.getByPlaceholder) to use
page.getByRole('combobox', { name: 'Type the name of a document' }) so the test
queries the combobox by its accessible name; update any references to the
inputSearch variable if needed to reflect the new selector usage.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 436f1646-45a4-4c82-a71b-83c7384fd146

📥 Commits

Reviewing files that changed from the base of the PR and between a78269a and 865afc8.

📒 Files selected for processing (6)

• CHANGELOG.md
• src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts
• src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts
• src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx
• src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
• src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx

💤 Files with no reviewable changes (1)

• src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx