ARIA Comboboxes, demo variations, implementation notes, code availability, testing and review.

Hello,
I've completed building an ARIA Combobox module that covers the most common implementation types for this functionality.

This is also a follow up to our last ARIA Practices Guide discussion where we were discussing the difficulty in quantifying specific guidance for differing implementation types, so I'll outline all of these points below.

For Comboboxes, there are three primary interactive variants, standard Input for direct editability, readonly Input, and readonly simulated active elements, all of which act differently and require slightly different interaction models to work as well as possible across various platforms such as desktop and mobile.

Demos:

1 Form with overlays:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm
(Where the State field opens an autosuggest list when you start typing, and the Country field has an arrow toggle to pull down the attached list)

2 Simple with overlay:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20with%20Substring%20Match)/demo.htm
(Where the edit field matches substrings to populate automatic suggestions.)

3 Simple with static inline rendering:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20with%20Word%20Match)/demo.htm
(Where the typing of full words like 'modem' or 'printer' will automatically match list items; using an inline display instead of a layer)

4 Simulated with toggleable overlay:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly)/demo.htm
(Where the simulated button opens a language dropdown when clicked or tapped, which can then be scrolled through)

Implementation criteria for the Combobox module variations:

For native Input elements that are Editable:
1. The attributes role=combobox, aria-expanded, and aria-autocomplete, are initially set accordingly.
2. The attribute aria-describedby is set to provide keyboard guidance for screen reader users, and automatically changes accordingly when viewed on desktop versus mobile touch screen devices.
3. The attribute aria-controls is programmatically set when the Listbox is rendered, and unset when removed.
4. The attribute aria-activedescendant is not set when the Listbox is rendered, allowing screen readers to read the content within the edit field as intended.
5. When the Down arrow is pressed, aria-activedescendant is then set, allowing Up/Down arrow navigation of the Listbox options.
6. When a character key or navigation key such as the Left or Right arrow key is pressed, aria-activedescendant will automatically be unset in order to re-allow standard edit mode for screen reader users without dismissing the Listbox.
7. Pressing Enter or Alt+Up while aria-activedescendant is set will cause the referenced value to be saved and the Listbox to be closed, or pressing Escape will cancel and close the Listbox.
8. On desktops, moving focus away from the Combobox will automatically close the Listbox, however moving focus away from the Combobox on mobile touch screen devices will not.
9. The attributes role=listbox and role=option are set as the structure for the rendered Listbox, and aria-activedescendant always points to an element node that includes role=option when set.
10. When the Listbox is rendered, the first matching option is automatically announced for screen reader users.
11. When the Listbox is rendered, an accessible Close icon is also provided that includes a valid role + label, which allows sighted mouse and mobile touch device users to intuitively dismiss the Listbox without requiring keyboard interaction.

For native Input elements that are Readonly:
1. The attributes role=combobox, aria-expanded, and aria-autocomplete, are initially set accordingly.
2. The attribute aria-describedby is set to provide keyboard guidance for screen reader users, and automatically changes accordingly when viewed on desktop versus mobile touch screen devices.
3. When the Down arrow is pressed, the Listbox is rendered.
4. The attributes aria-activedescendant and aria-controls are programmatically set when the Listbox is rendered, and unset when removed.
5. When aria-activedescendant is set, pressing the Up/Down arrow keys will traverse the Listbox options.
6. When a navigation key such as the Left or Right arrow key is pressed, nothing will happen.
7. When a character or digit key is pressed, the next Listbox option starting with that character or digit will be selected via aria-activedescendant and scrolled into view.
8. Pressing Enter or Alt+Up while aria-activedescendant is set will cause the referenced value to be saved and the Listbox to be closed, or pressing Escape will cancel and close the Listbox.
9. On desktops, moving focus away from the Combobox will automatically close the Listbox, however moving focus away from the Combobox on mobile touch screen devices will not.
10. The attributes role=listbox and role=option are set as the structure for the rendered Listbox, and aria-activedescendant always points to an element node that includes role=option when set.
11. An accessible Toggle icon is provided, which allows sighted mouse and mobile touch device users to intuitively open and close the Listbox without requiring keyboard interaction.

For simulated active elements that are Readonly:
1. The attributes role=combobox, aria-expanded, and aria-autocomplete, are initially set accordingly.
2. The attribute aria-describedby is set to provide keyboard guidance for screen reader users, and automatically changes accordingly when viewed on desktop versus mobile touch screen devices.
3. When Enter or the Down arrow key is pressed, the Listbox is rendered.
4. The attributes aria-activedescendant and aria-controls are programmatically set when the Listbox is rendered, and unset when removed.
5. When aria-activedescendant is set, pressing the Up/Down arrow keys will traverse the Listbox options.
6. When a navigation key such as the Left or Right arrow key is pressed, nothing will happen.
7. When a character or digit key is pressed, the next Listbox option starting with that character or digit will be selected via aria-activedescendant and scrolled into view.
8. Pressing Enter or Alt+Up while aria-activedescendant is set will cause the referenced value to be saved and the Listbox to be closed, or pressing Escape will cancel and close the Listbox.
9. On desktops, moving focus away from the Combobox will automatically close the Listbox, however moving focus away from the Combobox on mobile touch screen devices will not.
10. The attributes role=listbox and role=option are set as the structure for the rendered Listbox, and aria-activedescendant always points to an element node that includes role=option when set.
11. The simulated active element also acts as a Toggle, which allows sighted mouse and mobile touch device users to intuitively open and close the Listbox without requiring keyboard interaction.

The code for all of these demos has been added to the relevant GitHub project at
https://github.com/accdc/tsg
Or direct download at
https://github.com/accdc/tsg/archive/master.zip

Within the archive, the new files are located at:
*2 Accessible Component Modules\aria_combobox_module.js
*Coding Arena\ARIA Comboboxes

If you would like to use this code or the archive for any reason, you are welcome to, it's all open source.

I know that, during the last ARIA-APG call, it was said that jQuery is preferred for coding samples. I would like to point something out though, which might be helpful if I clarified a bit, because there still appears to be a lot of confusion about it. All of the above ARIA Combobox demos, including all those within the referenced GitHub project, are powered by jQuery.

The AccDC API, which is what the Combobox module plugs into, is a jQuery plugin.

Actually, to be accurate, it's a jQuery extension, because the API module interfaces with jQuery in order to utilize all of the available rendering, AJAX, event handling, and associated processes, and extends them, so that any relevant command that is processed using the $A namespace, is automatically powered by jQuery core processes.

This is also true for Dojo, and MooTools, using the same feature extension, as seen in the relevant GitHub projects for each:
Powered by Dojo: https://github.com/accdc/tsg-dojo
Powered by MooTools: https://github.com/accdc/tsg-mootools

So basically, any widget that uses AccDC API methods such as the following, will automatically normalize equally across jQuery, Dojo, and MooTools, without requiring any coding changes to work correctly.

$A.getEl
$A.createEl
$A.getAttr
$A.setAttr
$A.remAttr
$A.getText
(Documentation: WhatSock.com > Core API > Misc)

$A.css
$A.hasClass
$A.addClass
$A.remClass
(Documentation: WhatSock.com > Core API > CSS)

$A.bind
$A.unbind
$A.trigger
(Documentation: WhatSock.com > Core API > Events)

$A.load
$A.get
$A.getJSON
$A.getScript
$A.post
$A.ajax
(Documentation: WhatSock.com > Core API > AJAX)

$A.announce
(Documentation: WhatSock.com > Core API > Accessibility)

And so on.

So, going back to the original ARIA Combobox demo at the beginning, the following three variants use the same ARIA Combobox module code, by plugging into this interface:

Powered by jQuery:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

Powered by Dojo:
http://whatsock.com/tsg/dojo/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

Powered by MooTools:
http://whatsock.com/tsg/mootools/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

All of which share the same module and setup code, normalizing equally across jQuery, Dojo, and MooTools.

E.G Module code:
http://whatsock.com/tsg/2%20Accessible%20Component%20Modules/aria_combobox_module.js
Setup code:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/js/setup.js

If it's of interest which properties and methods are available to control the ARIA Combobox control, these are documented at:
http://whatsock.com/tsg/tsg.htm#tgl-2-22

So like I said, if you want to use any of this archive for any reason, please feel free to do so. It just helps to understand how it all works before deciding one way or the other.

Please let me know if you encounter any issues.

Best wishes,
Bryan

Received on Tuesday, 18 November 2014 23:39:51 UTC