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 6:33PM

The differences you describe between FF and Chrome when using NVDA sound
more like NVDA's responsibility rather than that of Google's, in the same
way that JAWS doesn't work well when using Chrome is the responsibility of
FS to implement this support. Since all browsers provide diferent APIs for
accessing the DOM, it's not surprising that there are differences. It's good
that all parties communicate to resolve issues though, which will
significantly speed up the process.

----- Original Message -----
From: "Kevin Chao" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Sunday, November 06, 2011 2:38 PM
Subject: Re: [WebAIM] How to make a sortable listbox using aria-grabbed and
other ARIA attributes


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