I'm trying to use the Outsystems UI Interaction/DropdownSearch widget in a reactive web app. In order to pass accessibility requirements, users who require screen readers need to be able to use all parts of the application.
When using the DropdownSearch widget with a screen reader, using the arrow keys to move up and down through the list of options only causes the screen reader to say 'blank' (if the user has entered no characters in the search bar), or whatever characters the user has entered. Also when a selection is made, nothing is read out to the user, so they would have no way of knowing which selection has just been made.
Is it possible to customise this widget in some way (maybe through use of aria-labels) so that a screen reader would be read out the options in the dropdown as they are focused, and after an option has been selected?
I have provided a simple .oml file with this widget, and I have been using NVDA screen reader to test this.
Thanks,
James
Hi James,
That's a good idea for a future improvement, indeed.
In the meanwhile and as an alternative, you can leverage on JavaScript to set the attribute for each one of the options.
I am sharing the OML as it is easier to understand, but basically it will set in each one of the options the aria-label tag with the label value.
For an expression or text, like the selected value, you can just add it on the properties pane, under the Attributes section:
Kind Regards,João
Thank you for the reply.I have tried implementing this and although it is successful in setting the aria-labels of each of the options, other aspects of the InputSearch widget functionality still seem to be the underlying issue for me.
While moving between options using the arrow keys, nothing is read out by the screen reader still, as the widget's focus remains on the search bar. Tabbing through the options (after setting the "tabindex" of each option in the same way as the aria-labels) still didn't quite achieve the intended result.
I have found a workaround by making a web-block using a combination of a standard text Input widget, along with a list displaying the results which are filtered as the input text is updated.
Hi @James Quinn
We are already aware of this.We're trying to find a workaround since this is an issue with the underlying provider (Virtual Select) we use for that component and for dropdown tags as well. It was also reported on their GitHub repo. But still under investigation and no ETA. For future reference on release notes, you can refer to the task code ROU-4277.
Cheers,GM