E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Frederik Creemers
Date: Fri, Apr 14 2023 6:39PM
Subject: Keyboard navigation within list items.
No previous message | Next message →

Hi.

I'm implementing a generic keyboard-navigable list component. Currently,
it's implemented such that at any point in time, only one element in the
list is focusable. When this element is focused, the user can use the up
and down arrow keys to move focus to the previous or next item.

There might be focuseable elements within a list item, so the way I've made
that work, is that they're only focuseable when the current list item is
focuseable, so once an item has focus, the user can press tab to navigate
through the items within it. I based this design on the way Slack's message
list works.

But now I've been playing with WhatsApp's web UI, and it works slightly
differently. Once a list has focus you can use the left and right arrow
keys to focus things within the list item. Pressing tab moves focus away
from the list. I personally find this slightly confusing for things like
links in messages.

Are there any recommendations for how a web application should deal with
this? is there any publicly available user research information on this?

Best regards,
Frederik Creemers.

From: glen walker
Date: Sat, Apr 15 2023 6:48PM
Subject: Re: Keyboard navigation within list items.
← Previous message | Next message →

Is there much difference between what you're doing and a data grid?

https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-grids/

While yours is a list, could it be thought of as a table? Are the elements
in your list aligned in columns? Using the arrow keys to navigate across a
row in a grid is a common behavior, although the arrow keys navigate to
every cell and not just interactive elements. It sounds like you only want
to navigate to interactive elements in your list row.

From: Alan Zaitchik
Date: Sat, Apr 15 2023 8:34PM
Subject: Re: Keyboard navigation within list items.
← Previous message | Next message →

Have you checked out the recommendations in the W3C APG (“ARIA Authoring Practices Guide”) for the listbox pattern?
Not that the APG is always perfect, but you asked about publicly available recommendations.
A

From: Frederik Creemers
Date: Sun, Apr 16 2023 7:48AM
Subject: Re: Keyboard navigation within list items.
← Previous message | No next message

Yep, I did, but my use case is more of a navigation/content list, so it
doesn't really fit as a combobox. To give you the full context, I work on a
chat application, and this list component is used for the list of
conversations. I'm now also adding it to make the list of messages within a
conversation easily keyboard navigable.

On Sun, Apr 16, 2023 at 4:34 AM Alan Zaitchik < = EMAIL ADDRESS REMOVED = >
wrote:

> Have you checked out the recommendations in the W3C APG (“ARIA Authoring
> Practices Guide”) for the listbox pattern?
> Not that the APG is always perfect, but you asked about publicly available
> recommendations.
> A