Seeking Assistance with Accessible Autocomplete Implementation in Wappler

Hi all,
I hope this post finds you well. I am currently facing an issue with implementing an accessible autocomplete feature in Wappler using the dmx-autocomplete library. I have been striving to make my application inclusive and user-friendly, and accessibility is a top priority for me. However, I am encountering a challenge in ensuring the proper accessibility of the autocomplete element.

The issue I am facing is that when using the keyboard to navigate through the autocomplete suggestions, only the letters that were typed in the input field are being read, making it difficult for users relying on assistive technologies to access the complete list of options.

Here is the current code snippet for the autocomplete element:

<input type="text" class="form-control" placeholder="Search for..." aria-controls="datatables-responsive" aria-autocomplete="list" id="search" name="search" is="dmx-autocomplete" dmx-bind:data="" optiontext="pr_ID+'-'+pr_name" optionvalue="pr_name" dmx-on:changed="qrmSortTable.remove('offset');var_pr_project_type.setValue();var_pr_status.setValue()" onchanged="document.getElementById(&quot;SearchResults&quot;).focus();">

I have reviewed the accessibility guidelines and recommendations for autocomplete elements, such as using appropriate ARIA attributes and ensuring proper keyboard interaction. However, I am uncertain about how to dynamically set the aria-activedescendant attribute to indicate the selected option from the suggestion list.

I would greatly appreciate any guidance or suggestions from the Wappler community on how to address this accessibility issue with the autocomplete element in my Wappler project. Specifically, I would like to know if there are any built-in features or techniques in Wappler or the dmx-autocomplete library that can help me ensure the complete accessibility of the autocomplete suggestions for users relying on assistive technologies.

Additionally, if anyone has successfully implemented an accessible autocomplete feature in Wappler, I would be grateful if you could share any code examples or insights on how you achieved it.

@Teodor @patrick @George Will appreciate if you have any suggestions on this. Thanks

@patrick @Teodor wondering if you have any suggestions?

To get the correct attributes on the list items you have to extend the component or rewrite it. I’m currently working on the new betas for all App Connect components, I’ve added several aria attributes to the autocomplete component based on your post.

The updated autocomplete only works with the new App Connect 2 Beta, it is still WIP. It will be included with the next Wappler update when you use the Beta channel for extensions. Please be aware that these are not stable. (2.3 KB)

These have been added in Wappler 5.8.2

@Teodor @patrick thank you so much for your help! this is amazing.
Really love the support.

This topic was automatically closed after 2 days. New replies are no longer allowed.