[BITV] Enhance Multiselect A11Y

[Pytal]

• aria-label needs to be removed for unclickable avatars Do not add aria-label when avatar is not interactive #3618
• Add aria-multiselectable sagalbot/vue-select#1726 Using fork https://github.com/nextcloud-deps/vue-select
• Fix dropdown not opening after closing sagalbot/vue-select#1742 Using fork https://github.com/nextcloud-deps/vue-select
• Add aria-multiselectable vue-select#1
• Fix dropdown not opening after closing vue-select#2
• v3.21.2 vue-select#8
• Use @nextcloud/vue-select #3703
• Fix return focus after keyboard deselect vue-select#9
• Use browser agnostic handling for keyboard deselect focus vue-select#10
• v3.21.3 vue-select#11
• v7.6.0 #3755
• Bump @nextcloud/vue from 7.5.0 to 7.7.0 and add node-polyfill-webpack-plugin nextcloud/server#36813
• [stable25] Bump @nextcloud/vue from 7.5.0 to 7.7.0 and add node-polyfill-webpack-plugin nextcloud/server#36841

[Pytal]

@michaelnissenbaum when there are potentially many options to pick from in a multiselect dropdown do we need to add pagination like in https://vue-select.org/guide/pagination.html? Would the user need to be able to jump to a specific page i.e. page 5 out of 10 available pages?

Or is making the option list filterable by typing sufficient to pass the accessibility audit?

[michaelnissenbaum]

Which kind of pagination navigation you select/implement is up to you. "all" of them could be implemented in accessible way. If you have already something in mind let's discuss whether it is accessible or not and if not, what must be done. Provide me some screenshots and HTML code and I'd analyse it and provide you my feedback.

[Pytal]

Currently we do not have any pagination but do have filtering

Our current implementation is available to test in https://nextcloud-vue-components.netlify.app/#/Components/NcSelect?id=ncselect-1, you may scroll down to the "User select examples" section specifically

Feel free to test it out by typing to filter the available options and let us know whether this is sufficient to pass the audit? Or if adding some buttons similar to https://vue-select.org/guide/pagination.html

would be necessary?

[michaelnissenbaum]

I took a look at those examples. What I can say - they are not accessible.

1. ARIA roles/attributes were not used as expected. Screen reader does not provide expected/required information. A working example could be found at https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-both.html.
2. Combobox itself (border) does not meet contrast requirements
3. Keyboard focus (within listbox) does not meet contrast requirements

Regarding multi select combobox take a look at this example at http://accessibleculture.org/misc/aria/combobox/combobox.html. At least it works quite well with screen reader. Additionally take a loot at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable. The current vue version for multi select does not really support screen readers. It provides incorrect information to the users.

[Pytal]

For the multi select combobox specifically, would the current structure

with the non-comma separated selected options display and without the per-option checkboxes seen below,

be accessible if the ARIA and contrast adjustments are made but without the same structure?

[michaelnissenbaum]

The implementation without checkboxes could be an accessible one in case proper ARIA roles/attributes are used, text and keyboard focus meet contrast requirements and keyboard support is provided. An example could be found at https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/accessibility/.

[Pytal]

What contrast ratio is required for the focused dropdown option @michaelnissenbaum?

[michaelnissenbaum]

The contrast ration between focused and unfocussed state should be at least 3:1. Please don't forget that in case that keyboard focus is implemented using background colour change the contrast ration between text and its background has to be at least 4,5:1.

[Pytal]

Would something like this work?

[michaelnissenbaum]

I guess you mean keyboard focus borders. It would work but only in case the contrast ratio between border and its background is at least 3:1. At the moment we have appr. 2:1.

[Pytal]

Transferred "Focus of search suggestions is not clearly visible, needs border instead of background"

• [BITV] Focus of search suggestions is not clearly visible, needs border instead of background #3642