[BITV] 9.4.1.2/6.2 - All autocomplete combobox elements in the "Profile visibility" section have not been properly implemented with the ARIA, making them not truly accessible for screen reader users. (1)

[JuliaKirschenheuter]

[!IMPORTANT] For QA, see https://github.com/nextcloud/server/issues/41902#issuecomment-1838405393

Please think of adjusting every NcSelect in our code based on new changes in upstream library.

ToDo: https://github.com/nextcloud/server/issues/41902#issuecomment-1838405393

A working example can be found at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/

https://report.bitvtest.de/default-en/cbedb5ef-4815-4cba-a83d-995599c178c3.html#checkpoint-bfbf07e5c3-v6-n2

same issues:

• https://github.com/nextcloud/server/issues/41905
• https://github.com/nextcloud/server/issues/41909
• https://github.com/nextcloud/server/issues/41908
• https://github.com/nextcloud/server/issues/41893
• https://github.com/nextcloud/server/issues/41836
• https://github.com/nextcloud/server/issues/41838

[ShGKme]

Current issues

Requires changes in the fork of vue-select

• [x] role="combobox" should not be on <div>, but on <input> directly https://github.com/nextcloud-deps/vue-select/pull/30
• [x] aria-label="Search for options" should not be on this div[role=combobox] https://github.com/nextcloud-deps/vue-select/pull/30
  • [x] Labelling input:
    • [x] aria-label should be on input https://github.com/nextcloud-deps/vue-select/pull/30
    • [x] or aria-labelledby / <label> should be used https://github.com/nextcloud-libraries/nextcloud-vue/pull/4963
  • [x] The text "Search for options" should not be hardcoded and should be translatable https://github.com/nextcloud-deps/vue-select/pull/30) ❓ should have the default value in ncvue?
• [x] Wrapper div should not have aria-* attributes https://github.com/nextcloud-deps/vue-select/pull/30
• [x] aria-labelledby on input is not correct https://github.com/nextcloud-deps/vue-select/pull/30

Can be fixed @nextcloud/vue's wrapper <NcSelect>

• [x] Deselect button label and title are not translatable (managed by ariaLabelDeselectOption)
• [x] The clear button should not be fixed aria-label="Clear Selected" and should be translatable (managed by ariaLabelClearSelected)

Not sure if it is an issue

• [x] Open indicator probably should be a button, or at least have a label https://github.com/nextcloud-deps/vue-select/pull/30

---

Adjusting changes in the fork is required.

[JuliaKirschenheuter]

Thanks a lot @ShGKme for investigation!

[szaimen]

dependency update in stable28 seems to be missing

[JuliaKirschenheuter]

no "pending dependency update" anymore. Closing issue

[szaimen]

Seems to be present in vue 8.5.0 so should all be available in stable28. However not completely sure how to check all points because they are many...