Summary: | Replace the use of jQueryUI autocomplete | ||
---|---|---|---|
Product: | Koha | Reporter: | Owen Leonard <oleonard> |
Component: | Templates | Assignee: | Owen Leonard <oleonard> |
Status: | NEW --- | QA Contact: | Testopia <testopia> |
Severity: | enhancement | ||
Priority: | P5 - low | CC: | dcook, jonathan.druart, stephanie.leary, testopia |
Version: | Main | ||
Hardware: | All | ||
OS: | All | ||
GIT URL: | Change sponsored?: | --- | |
Patch complexity: | --- | Documentation contact: | |
Documentation submission: | Text to go in the release notes: | ||
Version(s) released in: | Circulation function: | ||
Bug Depends on: | |||
Bug Blocks: | 29222 |
Description
Owen Leonard
2023-06-23 14:36:06 UTC
Linking to bug 29222 comment 3 and bug 29222 comment 4, and https://gitlab.com/joubu/Koha/-/commits/bootstrap-autocomplete There is also https://iqbalfn.github.io/bootstrap-autocomplete/ The Bootstrap autocomplete components are generally not accessible. In accessibility circles, the Alphagov Autocomplete component (developed for the UK.gov design system) is considered the best. https://alphagov.github.io/accessible-autocomplete/examples/ Adam Silver, who worked on that design system, has a variation on it that supports aliases (see the Demo link at the end): https://adamsilver.io/blog/building-an-accessible-autocomplete-control/ These are the only two autocomplete components I've ever heard screen reader users describe as a good user experience. Both can be styled with Bootstrap classes. Cheers, Stephanie. I'm planning on replacing jQueryUI on another project of mine soon, so I'll take a look at the Alphagov Autocomplete for that too. On a non-Koha project, I just replaced a jQueryUI autocomplete with the Alphagov "accessible-autocomplete", and it went pretty well. The parameters are very similar, and it's pretty easy to style. I like its default styling as well. That said, there is 1 major difference. Instead of binding to an input element, you bind it to a container element and it dynamically creates the input element. Dealing with this difference is probably where most of the work would be, especially for cases where we're using Template::Toolkit to put a value into the "value" attribute for the input. We'll have to do something like put it in a hidden field and then pass it as default value or something using Javascript (which is part of the accessible-autocomplete API). -- The Alphagov folk say that they don't support the autocomplete, but they actively maintain it, and it has current releases. One problem with "accessible-autocomplete" is that the "source" has to return a list of strings, while jQueryUI can handle a list of strings, or an "array of objects with label and value properties". That said, we can implement this functionality on our own. It's something to be aware of though... |