♿️(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: +1 B (0%)

Total Size: 4.33 MB

📦 View Changed

Filename	Size	Change
apps/impress/out/_next/static/646e8707/_buildManifest.js	674 B	+674 B (new file)	🆕
apps/impress/out/_next/static/c2550b2a/_buildManifest.js	0 B	-673 B (removed)	🏆

_{compressed-size-action}

[coderabbitai]

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: 63235da1-aa9a-4685-b999-4814c1eb562f

📥 Commits

Reviewing files that changed from the base of the PR and between 055a543 and ab3e2df.

📒 Files selected for processing (1)

• src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts

---

Walkthrough

This PR aligns search input field labels with their placeholder text across document search and move modals. The QuickSearchInput component removes its internal aria-label attribute, allowing parent components to provide context-specific labels. DocSearchModal now passes "Type the name of a document" as the label, while DocMoveModal passes "Search for a doc". Playwright e2e tests update their combobox selectors to match these new accessible names. The change is documented in the changelog.

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 clearly and concisely describes the main change: aligning search modal field labels with placeholders for accessibility purposes, which matches the core objective of the pull request.
Description check	✅ Passed	The description is directly related to the changeset, providing clear context about the accessibility issue being fixed and listing the specific changes made across multiple files.
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

---

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