RE: Available Multiselect ARIA Comboboxes, AKA Typeaheads or Auto-Suggest fields

In case it's not clear, this uses the ARIA 1.0 design pattern for present day mapping support.


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
bryan.garaventa@ssbbartgroup.com
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: Bryan Garaventa 
Sent: Thursday, May 11, 2017 11:39 AM
Subject: Available Multiselect ARIA Comboboxes, AKA Typeaheads or Auto-Suggest fields

Hi,
This is a common control type, but one of the most difficult to implement due to the number of moving parts involved, so I've updated the ARIA Combobox Module to handle multiselect functionality automatically.

To recap what this is. Multiselect functionality occurs when you need to combine auto-suggest or typeahead functionality with the ability to select multiple options as part of this process within the same widget. Such as when typing the last name of a person so that you can choose who you want to send a message to in a To field, giving you the option to select or deselect multiple matches at one time to add their names to a group message.

The ARIA 1.0 and 1.1 specs already allow for this capability, and most of this is already available within the accessibility API mappings so that it can be used right now. This uses the ability to add aria-checked upon role="option" nodes so that the checked state can be added to Listbox Option nodes in the accessibility tree, which is dynamically referenced using aria-activedescendant on the focused Combobox control to reference the highlighted Option node.

Here are two implementations that use this new functionality for testing, which simply use a hidden HTML select element that includes a 'multiple' attribute to enable this functionality automatically. E.G <select multiple ... >

Editable Multiselect Combobox:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm 

Readonly Multiselect Simulated Combobox:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly%20Multiselect)/demo.htm 

The readonly example also now includes the ability to type consecutively ahead for quick jump ahead functionality, E.G typing "por" will jump to "Portuguese" etc.

These use the Combobox design pattern paradigm documented at http://whatsock.com/training/matrices/#combobox 

For a better understanding regarding how to build ARIA Comboboxes accessibly while maintaining the proper accessibility API mappings, view the blog post at https://www.ssbbartgroup.com/blog/differences-aria-1-0-1-1-changes-rolecombobox/ 

Some browser and screen reader issues still exist where bugs should be filed. One such is where when using an iOS touch screen device like an iPhone, the aria-checked state upon role="option" is not being conveyed by VoiceOver when toggling this state by tapping. When using NVDA in IE11, NVDA is not updating the virtual buffer properly when DOM nodes are dynamically added and removed. Within both Chrome and Chrome Canary, the checked state is not being set correctly in the accessibility tree when aria-checked is toggled.

This feedback however is correct when using JAWS 17 and 18 using IE11 and Firefox, and when using NVDA and Firefox. When better support for the checked state on Option nodes is added in Webkit for iOS Safari plus Chrome then it will work correctly there too.

In addition to this new functionality, more public methods have been added to allow for more control over each Combobox instance which are pasted below for reference. These projects can be downloaded from GitHub too.
Powered by jQuery: https://github.com/accdc/tsg Powered by MooTools: https://github.com/accdc/tsg-mootools
Powered by Dojo: https://github.com/accdc/tsg-dojo 

// Set a handler to execute every time a new value is saved to the Combobox control // This will override the default functionality myCombobox.onSelect(function(optionName, optionValue, comboboxControl, selectElement){ // this = comboboxControl // optionName = the visible string for the hidden Select option that is highlighted.
// optionValue = the value attribute for the hidden Select option that is selected. This parameter changes to an array of selected option nodes when multiple is set instead. (Only available when using the ARIA Combobox Module R2.0 or greater.) // comboboxControl = the Combobox control element // selectElement = the hidden Select element // Save the new value accordingly // then return the saved string to prevent auto reopening of the Combobox listbox return 'saved string'; });

// Set multiple divider to break up list item markup properly when updated.
// Automatically becomes available when the multiple attribute is set on the hidden select element. (Only available when using the ARIA Combobox Module R2.0 or greater.) myCombobox.setMultipleDivider(function(values){
// 'values' is an array of string names for the selected option nodes.
return values.join('	');
});

// Clear all selected options when multiple is set on the hidden select element.
// (Only available when using the ARIA Combobox Module R2.0 or greater.) myCombobox.clearAll();

// Set a character minimum when typing into an editable combobox before autosuggested options are rendered.
// (Only available when using the ARIA Combobox Module R2.0 or greater.) myCombobox.setCharMin(#); // Default = 0

// Get the current value of the hidden select element // Returns a value property string for single select elements, or an array of selected option DOM nodes when the multiple attribute is set on the select element.
// (Only available when using the ARIA Combobox Module R2.0 or greater.) myCombobox.getValue();

All other available properties and methods are listed in the ReadMe.txt file within the "Coding Arena\ARIA Comboboxes" folder within the above GitHub downloads.

Please let me know if you encounter any scripting or visual issues.

All the best,
Bryan


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
bryan.garaventa@ssbbartgroup.com
415.624.2709 (o)
www.SSBBartGroup.com

Received on Thursday, 11 May 2017 19:00:19 UTC