nextcloud-vue
nextcloud-vue copied to clipboard
nextcloud-libraries
[BITV/A11Y] Multiselect accessibility
From workshop:
- [ ] See https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html
- [x] Focus needs to be clearly visible
- [ ] Icons on right need to be read out, and should be grouped with the name
- [ ] After adding a person/group, focus should stay on the input field
Found by Vincent in another ticket:
- [x] multiselect should enable focus mode like other controls ? (still in browse mode when entering with tab)
- [ ] multiselect entries are not read when moving with arrow keys in share dropdown (observed in right sidebar in files app)
- [ ] multiselect should set the aria-describedby attribute to the input instead of leaving it on the main div?
More issues:
- [ ] https://github.com/nextcloud/nextcloud-vue/issues/2951
any taker ? (even if just sub-items) @skjnldsv @Pytal @vinicius73 @raimund-schluessler
as discussed, it is likely that we'll need to find a new library
@CarlSchwan pointed out that vue-select might be suitable, however we will likely need to contribute accessibility fixes upstream
After searching around it seems the aforementioned https://github.com/sagalbot/vue-select is the best library for our purposes, the API seems pretty extensible and covers all if not most of our existing use cases as far as I can see
note: will need backport to 25 (the matching nextcloud-vue version used there)
there would be breaking changes if we impose this component to be a replacement of the old one
so, like for the date time picker, let's make it a new multiselect component and let it be opt-in and deprecate the old one which is not accessible
then we find the places in server and apps where we use it and then adjust to the new one
Tested and works with new component API @PVince81 https://github.com/nextcloud/nextcloud-vue/pull/3435#issuecomment-1325399075
Transferred "After adding a person/group, focus should stay on the input field"
- https://github.com/nextcloud/nextcloud-vue/issues/3570
Transferred "User status dialog "Clear status after" menu entries need border for focus feedback"
- https://github.com/nextcloud/server/issues/35763