bootstrap-select VS aria-practices

I have a multiselect widget in a modal. Because the multiselect has dynamically generated values, I need to call $('select').selectpicker(); when the modal code is injected.

I want to replace the crispy-forms default bootstrap select with the bootstrap-select (https://developer.snapappointments.com/bootstrap-select/)

Our project uses bootstrap-select so you need to implement your solution with that plugin.

I'm trying to add Alpine to an existing project that uses bootstrap-select to create select boxes. I'm having issues triggering actions when a selection is made.

I am using the npm module bootstrap-select (https://www.npmjs.com/package/bootstrap-select) and I don't understand the instructions nor can i find anything online about dropdown.js.

Emphatic agreement.

Today, even apparently trivial widgets require ridiculous amounts of effort to attain a "natural" UX. To become so good you don't notice. That holy grail of being "invisible".

--

Epochs ago, I created custom controls for Win32. The one I was most proud of was a direct manipulation sundial picker for a raytracer. I obsessed over the details. Like being pixel perfect, both mouse and arrow keys (for fine grained increments), live updates between dial widget and text fields. Damn, I was proud of that control. I gushed and preened whenever a user complimented the effort.

Ages ago, I started using bootstrap-select. It's a nifty dropdown w/ type ahead (search). Modest, no big deal, right? Nope! That project received so many PRs, tweaks, fit & finish, finesse, and all around TLC. I was transfixed, fascinated. I haven't done UI for years, but remained subscribed to their project announcements, mostly out of awe and respect.

https://github.com/snapappointments/bootstrap-select

Observing the bootstrap-select project over time humbled me. I used to think I had some UX juice. Now I know that I'm just banging the rocks together.

I tried following this guide, and added the cdn and js available here, but I cant seem to get it working in my Google Apps Script Webapp. All I am getting is a dropdown with no option to serach.

The source: https://github.com/snapappointments/bootstrap-select

W3C Aria Practices

I should apologize off-the-bat for not digging in too deeply, but how does this handle keyboard and screenreader accessibility?

W3C has some in-depth list of expected keyboard interactions, though I'm not sure how complete they are:

https://w3c.github.io/aria-practices/#TreeView

https://w3c.github.io/aria-practices/examples/treeview/treev...

I ask because I've tried to implement a [TreeGrid](https://w3c.github.io/aria-practices/#treegrid) myself before and... it's a lot of work. I'd love an accessible, keyboard-friendly React tree :).

Yep I totally agree with this.

There are however a bunch of ARIA tags & best practices etc (https://w3c.github.io/aria-practices/) that exist to make popups and dialogs (and other things e.g. tree views or "email-inbox-style" "treegrids" etc) accessible (if implemented correctly).

I am conflicted about these - it is nice that there are ARIA tags for this, but it would also be nice if browsers "understood" aria tags and added some default behaviors (e.g. keyboard navigation). As it is, ARIA tags are essentially "pointless" to anyone who doesn't use an assistive technology, and so non-assitive-technology users nor developers benefit from using ARIA tags so they are often forgotten. If the browsers saw that there was an A11y-tree that matched a treeview or a treegrid, it would be really really nice if they applied some default common keyboard navigation implementation, rather than do nothing and leave it up to the developer to decide what keys do what on each and every site. .... Or on the other hand, is that too prescriptive and should we give developers and UX designers more leeway to design something better, rather than rely on browser-enforced defaults? I guess we are happy with browser defaults for basic inputs, but would we be for a treegrid?

The ARIA practices GitHub is a good resource to see where certain patterns fall short.