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="scProjects.data.qrProjectsAllSearch" 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("SearchResults").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