angucomplete-alt icon indicating copy to clipboard operation
angucomplete-alt copied to clipboard

screen reader friendly functionality

Open usernamefor opened this issue 8 years ago • 3 comments

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

usernamefor avatar Nov 28 '16 23:11 usernamefor

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?

usernamefor avatar Nov 29 '16 17:11 usernamefor

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.

10 results are available, use up and down arrow keys to navigate.

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.

results.length results are available, use up and down arrow keys to navigate.

Is it possible that angucomplete-alt project can take above issue into consideration list and possibly add the fix into next version?

usernamefor avatar Nov 29 '16 22:11 usernamefor

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

howlettga avatar Nov 30 '16 16:11 howlettga