WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to make a sortable listbox using aria-grabbed and other ARIA attributes

for

From: Kevin Chao
Date: Nov 6, 2011 3:39PM

Ok. I've retested with the sort button activated and it's working in
Firefox+NVDA exceptionally well and Chrome+NVDA to a great degree.

A few things, which are missing from the Chrome experience, which I'm
thinking it's a Google issue, but want confirmation, and the technical
information to provide in a bug report.
* When selecting sort button and activating it, Chrome+NVDA will
switch to focus mode, but Firefox+NVDA will not.
* ARROWING through listed items, Chrome+NVDA will speak item+selected,
while Firefox+NVDA will speak number+item+draggable+index
* When dropping/moving an item, Chrome+NVDA will speak grabbed item
moved and Firefox+NVDA will speak draggable+done
dragging+number+item+moved

Kevin

On 11/6/11, Bryan Garaventa < <EMAIL REMOVED> > wrote:
> Did you press the Sort button first?
>
> If you don't, it's just a standard list such as:
> <ol>
> <li>
> <span> ... </span>
> </li>
> </ol>
>
> The sort functionality has to be initiated before you can use it, which is
> why the Sort button is a toggle. When off, all ARIA functionality is removed
> to avoid accidental editing.
>
> I just tried this using IE8 with JAWS12/13 and NVDA2011.2 and Firefox with
> JAWS12-13 and NVDA2011.2 and everything works fine, though JAWS works best
> in IE and NVDA works best in Firefox.
>
> Adding an item when Sort is active will automatically disable sort, so you
> have to press the Sort button again at that point. When Sort is pressed,
> focus will automatically be moved to the first list item.
>
>
>
> ----- Original Message -----
> From: "Kevin Chao" < <EMAIL REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
> Sent: Sunday, November 06, 2011 1:50 PM
> Subject: Re: [WebAIM] How to make a sortable listbox using aria-grabbed and
> other ARIA attributes
>
>
>> Thanks Brian for creating this ARIA Sortable Listbox Module Demo.
>> Unfortunately, it doesn't seem to be working properly. It's not
>> possible to add, navigate through listed item, select an item to grab,
>> or drop. I've attempted this using the various methods outlined in the
>> instructions.
>>
>> Windows 7 x86
>> Firefox 10.0a1 (2011-11-06) Nightly
>> Chrome 17.0.931.0 canary
>> NVDA 2011.3-4762 Snapshot
>>
>> http://whatsock.com/modules/aria_sortable_listbox_module/demo.htm
>> CTRL+HOME to go to top of page, E for edit field, ENTER to switch to focus
>>
>> mode;
>> DOWN, UP, HOME, or END
>> Expected: navigate through listed item by one item or to go to top or
>> bottom of listed item
>> Actual: Nothing at all, NVDA reports "blank"
>>
>> TAB to "add button, add item to list" and ENTER or SPACE
>> Expected: some message or focus change, which will allow adding item to
>> list
>> Actual: nothing at all
>>
>> TAB several times to listed items, DOWN ARROW through items, and
>> SPACEBAR on items that you want to grab
>> Expected:When arrowing, some message alerting NVDA that it's possible
>> to grab, when SPACEBAR is pressed, a message indicating that item was
>> grabbed
>> Actual: Nothing at all, silence
>>
>> ESC to swithc to browse mode, SHIFT+E to move back to edit field
>> Expected: These are a few of my favorite things:, multiline edit
>> field, grabbed items to be in edit field
>> Actual: These are a few of my favorite things: , multiline edit field,
>> and its empty
>>
>> Next/previous heading/ARIA-Landmark
>> Expected: different sections, one to drop the selected items
>> Actual: There are no other sections/area to drop item(s)
>>
>> Kevin
>>
>> On 11/6/11, Bryan Garaventa < <EMAIL REMOVED> > wrote:
>>> Hi,
>>> I wanted to explore aria-grabbed in the context of a practical
>>> application,
>>> so came up with this.
>>>
>>> The ARIA Sortable Listbox Module dynamically converts standard list
>>> markup
>>> into a keyboard accessible sortable listbox control.
>>> Demo: http://whatsock.com/modules/aria_sortable_listbox_module/demo.htm
>>>
>>> In addition to aria-grabbed, various other ARIA attributes are used,
>>> including role=dialog, role=listbox, role=option (plus associated listbox
>>> attributes), and unobtrusive status messages to provide additional
>>> feedback.
>>>
>>> Hopefully this helps with the research of ARIA-based implementations.
>>>
>>> Instructions:
>>> . Press Enter on the edit field or activate the Add button to add a new
>>> list
>>> item;
>>> Activate Clear to empty the list, or activate Sort to toggle sortability
>>> of
>>> the list.
>>> . Using the mouse, click a list item to make a selection,
>>> then click any other list item to move the selected item to that
>>> location.
>>> . Using the keyboard, use the Up/Down/Home/End keys to navigate listed
>>> items.
>>> . Press the Spacebar to grab the selected item for moving;
>>> Press the Spacebar again after navigating to another location to move the
>>> grabbed item.
>>> . Press Delete on a selected item to remove it from the list.
>>> . Press Escape to cancel a previous grab action;
>>> Press Escape again or press Enter to close the listbox and disable
>>> sortability.
>>>
>>> All the best,
>>> Bryan
>>>