fix(NcSelect): announce selected option to screen readers

[pringelmann]

☑️ Resolves

• Fix NcSelect: selected option not announced to screen readers #8322

🖼️ Screenshots

N/A - behavioural fix, no visual change

🚧 Tasks

• Add aria-describedby on the search input pointing to a hidden span with the selected value. Screen readers announce it on focus.
• Inject a visually-hidden <item>, selected marker into the #option slot for the currently selected option. Screen readers pick this up via aria-activedescendant while navigating the list.

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

Note on aria-selected:

vue-select sets aria-selected on the <li> elements in its own render function - NcSelect can't control these attributes from the wrapper level without fragile DOM manipulation that gets overwritten on re-renders. The visually-hidden text approach works within Vue's reactivity and doesn't fight the upstream library.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.68%. Comparing base (6eec54e) to head (4a32b69).
⚠️ Report is 15 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8342      +/-   ##
==========================================
+ Coverage   52.37%   54.68%   +2.31%     
==========================================
  Files         104      104              
  Lines        3393     3394       +1     
  Branches      989      990       +1     
==========================================
+ Hits         1777     1856      +79     
+ Misses       1360     1300      -60     
+ Partials      256      238      -18     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[susnux]

Seems to work 👍
But I wonder if this should directly implemented in vue-select?
https://github.com/nextcloud-libraries/vue-select/

[pringelmann]

Seems to work 👍 But I wonder if this should directly implemented in vue-select? https://github.com/nextcloud-libraries/vue-select/

Good question: the aria-selected bug in vue-select (it uses typeAheadPointer instead of actual selection state) is worth filing upstream - happy to open an issue there. That said, the visually-hidden ", selected" text needs to live here regardless, since it goes through the translation system.

[pringelmann]

Seems to work 👍 But I wonder if this should directly implemented in vue-select? https://github.com/nextcloud-libraries/vue-select/

Turns out this was already fixed in the fork, but seems we can't use that here since it still targets Vue 2

[susnux]

Why not use native markup like aria-selected and role="option"?

[pringelmann]

vue-select already puts role="option" and aria-selected on the <li> elements, but sets aria-selected based on keyboard focus position (typeAheadPointer) rather than actual selection - that's the root bug. The #option slot we use only controls the content inside each <li>, not the <li> attributes, so we can't override aria-selected from here without DOM manipulation that gets stomped on re-render.

This is already solved in our fork of vue-select, but we can't use that until it is migrated to Vue 3.

[susnux]

This is already solved in our fork of vue-select, but we can't use that until it is migrated to Vue 3.

Ah wait too fast... 🙈

Then we should push forward the migration instead of tinker with our usage of it, as we will fail the other accessibility issues as well (those we fixed in the fork).
nextcloud-libraries/vue-select#25

[pringelmann]

I will review effort required to bring it to completion

[pringelmann]

Not quite a drop-in replacement, but is doable. Will revert the fix and switch to nextcloud/vue-select