angucomplete-alt
angucomplete-alt copied to clipboard
screen reader friendly functionality
Hi,
Is there any better way to code the input field with angucomplete so it is more screen reader friendly? I tried adding aria-autocomplete="list" role="combobox" to a autocomplete input field, and it seems not working as expected. When running a screen reader against this input field, it only reads "Search user combo box, change users using arrow keys". But I was expecting something like "10 result is available, use up and down arrow keys to navigate", which can be implemented with JQuery ui-autocomplete-input easily. ui-autocomplete-input can dynamically add/remove/modify a ui-helper-hidden-accessible div with a dynamic message, which shows the result number in the list. Is there any better way to do the same thing with angucomplete?
Thanks a lot
Further information: I also added ui-autocomplete-input into input field's class list and was expecting below line automatically added with number of the result in pull down list. But this is not happening. Is there something in angularJs blocking it from working as expected?
We have specific requirement from client that we need to make sure screen reader can reads the number of the available results in autocomplete pull down list. Just adding JQuery ui-autocomplete-input class seems not working. Below line was not dynamically added/updated.
But there seem to be a bug with AngularJs angu-autocomplete directive and it is not working with JQuery well. From what I see, the JQuery built in with Angular Js doesn't contains necessary classes. To make it work, I had to customize the angucomplete plugin code (angucomplete-alt.min.js) by adding following div after the input field. This custom fix works well.
Is it possible that angucomplete-alt project can take above issue into consideration list and possibly add the fix into next version?
Is any data binding available to access the results object from outside the angucomplete directive? I was trying to get results through localData or selectedObject bindings without success. If I can access the results object directly myself I can write screenreader accessibility code myself without having to rely on it being implemented in angucomplete. Thanks