feat(vue-starter-template): enhance CountrySearchSelect component

[Maciej D (mdanilowicz)]

closes #2697

This pull request improves the accessibility and usability of the CountrySearchSelect component by adding a toggle button for the country list and enhancing ARIA attributes. It also updates translations to support the new toggle button.

Component enhancements:

• Added a toggle button to open and close the country list, including keyboard and mouse accessibility improvements in CountrySearchSelect.vue. The toggle button uses appropriate ARIA attributes and disables itself when the component is disabled. [1] [2]
• Refactored the management of the listbox ID and ARIA attributes, ensuring that aria-controls is only set when the list is visible and is consistent across elements. [1] [2]

Localization updates:

• Added the toggleCountryList translation key in English, German, and Polish to support the new toggle button. [1] [2] [3]

[vercel]

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

Project	Deployment	Actions	Updated
frontends-starter-template-extended	Ready	Preview	Sep 10, 2026 6:29pm UTC
frontends-vue-starter-template	Ready	Preview	Sep 10, 2026 6:29pm UTC

[Copilot]

🟡 Changes recommended

The newly introduced toggle control is removed from keyboard tab navigation (tabindex="-1"), undermining the stated accessibility/usability improvement.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR updates the CountrySearchSelect in the vue-starter-template to address issue #2697 by making the dropdown chevron actionable and improving ARIA wiring for the combobox/listbox relationship.

Changes:

• Added a chevron toggle button and input click handling to open/close the country list, plus minor behavioral tweaks (e.g., Escape no longer blurs).
• Refactored listbox ID handling so aria-controls only points to an existing listbox element when it’s rendered.
• Added the new form.toggleCountryList translation key in en-GB, de-DE, and pl-PL.

File summaries

File	Description
templates/vue-starter-template/app/components/form/CountrySearchSelect.vue	Adds toggle button + click-to-open behavior and refines ARIA/listbox ID management.
templates/vue-starter-template/i18n/en-GB/form.json	Adds toggleCountryList label for the new toggle button.
templates/vue-starter-template/i18n/de-DE/form.json	Adds toggleCountryList label for the new toggle button.
templates/vue-starter-template/i18n/pl-PL/form.json	Adds toggleCountryList label for the new toggle button.

Review details

• Files reviewed: 4/4 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Patryk Tomczyk (patzick)]

Changes requested: CI is green, but this adds user-facing toggle behavior without regression coverage. I left one inline comment.

[cursor]

Security review

No medium, high, or critical vulnerabilities in this update.

The delta is a CountrySearchSelect toggle/ARIA change plus static form.toggleCountryList strings. New click/toggle paths only open or close the list and reuse the existing readCountry search. Labels, errors, and ARIA/data-testid values are Vue-bound (no v-html). No new dependencies, secrets, or authz changes.

Prior automation security threads: none.

  

_{Sent by Cursor Automation: Review pull requests for exploitable security issues and flag only validated findings before merge}