[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 #41902 (comment)

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

ToDo: #41902 (comment)

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:

• [BITV] 9.4.1.2/8.2 - The autocomplete combobox "Time zone" has not been properly implemented with the ARIA, making them not truly accessible for screen reader users (1) #41905
• [BITV] 9.4.1.2/10.2 - Both autocomplete comboboxes "Enforced groups" and "Excluded groups" were not implemented in the right way using ARIA, making them not really accessible for screen reader users. (1) #41909
• [BITV] 9.4.1.2/9.4 - Both autocomplete comboboxes in the "Groups" and "Quota" table columns were not implemented in the right way using ARIA, making them not fully accessible for all screen reader users.(1) #41908
• [BITV] 9.4.1.2/3.5 - "Details" section - The combobox for selecting "Tags" has not been implemented correctly, rendering it inaccessible for non-visual users who cannot understand how this element functions. (2) #41893
• [BITV] 9.1.3.1h/6.1 - All comboboxes under "Profile visibility" have visual labels. However, these labels have all been overridden by the use of the "aria-label" attribute, resulting in all elements having the same accessible name, which is "Search for options." (1) #41836
• [BITV] 9.1.3.1h/9.1 - Modal dialog "User Management Setting": The input field "Default quota" has a visual label. (1) #41838

[ShGKme]

Current issues

Requires changes in the fork of vue-select

• role="combobox" should not be on <div>, but on <input> directly
  enh(a11y): Improve accessibility with correct attributes nextcloud-libraries/vue-select#30
• aria-label="Search for options" should not be on this div[role=combobox]
  enh(a11y): Improve accessibility with correct attributes nextcloud-libraries/vue-select#30
  • Labelling input:
    • aria-label should be on input
      enh(a11y): Improve accessibility with correct attributes nextcloud-libraries/vue-select#30
    • or aria-labelledby / <label> should be used
      enh(NcSelect): Add visible input label nextcloud-libraries/nextcloud-vue#4963
  • The text "Search for options" should not be hardcoded and should be translatable
    enh(a11y): Improve accessibility with correct attributes nextcloud-libraries/vue-select#30)
    ❓ should have the default value in ncvue?
• Wrapper div should not have aria-* attributes
  enh(a11y): Improve accessibility with correct attributes nextcloud-libraries/vue-select#30
• aria-labelledby on input is not correct
  enh(a11y): Improve accessibility with correct attributes nextcloud-libraries/vue-select#30

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

• Deselect button label and title are not translatable (managed by ariaLabelDeselectOption)
• 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

• Open indicator probably should be a button, or at least have a label
  enh(a11y): Improve accessibility with correct attributes nextcloud-libraries/vue-select#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...