How to make jquery ui sortable wai-aria compliant? - jquery-ui

What is the best procedure to make jquery ui sortable keyboard accessible? Ideally the user should be able to assign a position/number to each item in a list in an accessible way. The only info I can find is here https://medium.com/salesforce-ux/how-to-describe-complex-designs-for-users-with-disabilities-ba05f5224130#.o9kitc408 but the implementation specifics are not included.
Thanks

Related

How to disable textbox dropdown suggestions on certain websites?

I am trying to make my job easier by creating simple AHK scrips to auto-fill certain forms online.
Im not really good at explaining, but hopefully someone will understand what Im saying. The problem is that this website has certain textboxes with dropdown auto-suggestions turned on, and it has a delay when selecting those textboxes. I assume when selecting textbox it is pulling data from some database which is causing delay. Now my question is. Is it possible to turn off dropdown menu on websites or even in entire browser if necessary? I really want to my script to tab-in, wright down whats needed, tab-out without delay.
Autocomplete dropdown lists are just JS scripts. So there is no way, I think, to disable them by clicking checkbox in browser settings.
First, try to disable JS completely.
Also, if only few sites are involved, you could try to find out what JS libraries are used and disable them in browser JS console.
Are you planning to do this via keypresses or via COM?
I imagine that via keypresses you could not avoid focusing the elements and triggering the information lookup.
AutoHotkey can interact with webpages on Internet Explorer using COM (Component Object Model).
COM can launch/latch onto an IE instance, detect if the page is loading/has loaded, navigate to a particular url, and set the text of web elements,
quite possibly without triggering the drop-down lists. I haven't tested if COM can disable elements, it's possible.
Also, Acc.ahk may be able to set the text of elements.

Why do I need to have site unique form element id's when using jQuery Mobile?

Why do I need to have site unique form element id's when using jQuery Mobile? I would really like to know how the DOM works in order to create my app memory efficient.
I get this information about the DOM cache:
http://demos.jquerymobile.com/1.3.2/widgets/pages/
Whenever it loads a page via AJAX, it flags the page to be removed
from the DOM when you navigate away from it later (technically, on the
pagehide event).
So this information about Markup conventions seems to be contradicting, or at least incomplete:
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/forms/
...the id attributes of form
controls need to be not only unique on a given page, but also unique
across the pages in a site.
This is because jQuery Mobile's single-page navigation model allows
many different "pages" to be present in the DOM at the same time. You
must be careful to use unique id attributes so there will be only one
of each in the DOM.

Does jQuery Mobile have a (true) combo-box?

I am searching for a way to create a combo-box in jQuery Mobile, but there seems to be a lot of confusion between a combo-box and a select (drop-down) box.
My definition, which I learned back when dinosaurs were using Windows 3.0, is that a select box allows you to choose from a drop-down list. A combo-box does this, but adds the ability to type anything at all (a 'combo' of a selection drop-down and a text input). These days, from my searching, the distinction seems to have been lost, which is making it extremely difficult to track down info about true combo-boxes.
I like jQuery Mobile's over-all simplicity, and I love the auto-search/complete feature that displays matching options as you type which is 90% of what I need, but I want to capture whatever the user enters, whether it is on the list of options or not. Can I do this without headache / major work / another plug-in?
jQuery has combo box, but not JQM...
try this url: devcurry.com/2011/05/jquery-editable-combo-box.html maybe u can customize it...

Managing dynamic lists with jQuery Mobile and Phonegap

I have a list to display from a database. Each item in the list is associated with an ID. I want to know the best way to keep track of the ID of each item in the list. So when I click on the item, I can use the ID to map to other attributes of the item in the database.
I don't know about the "best way", but one way you can do this is through embedding the id in the anchor tag and then using a client side routing solution to work with that (check out jQuery mobile router).
Alternatively you can maintain a reference in a js object for each item in your list, keeping the id in the object. The easiest way to do so is probably by using some sort of javascript mvc type framework like backbone.js where you would have a collection of models representing each item and a view for each item that is hooked up to a particular element in the DOM (in your case an li) and can be wired to respond to events on that element (for example when you click the item that items view responds to its click event and acts accordingly).
Edit:
Personally I've been using backbone.js to structure my own code, if your interested in it you should be able to find many tutorials for it. Anyway here's a jsfiddle with the basic idea of using backbone.js to maintain a reference to each item in the list. Of course you can do this also in vanilla JavaScript.

Jquery-mobile's Multiselect control

How can we achieve to select all options in a multiselect control of the jquery-mobile framework?
Let us ask the question another way. How can we best give users a way to select multiple related items in jquery mobile. Select dropdowns present their own UX failings to begin with in that they require work on the part of the user to see what the options even are. Mobile devices only compound the issue with their differing implementations of the control.
Instead, try this using grouped checkboxes. http://jquerymobile.com/demos/1.0/docs/forms/checkboxes/
You will have more control over how the information is displayed and users will find it easier to see all the options at once.

Resources