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: Bryan Garaventa
Date: Nov 6, 2011 3:12PM

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
>>