Interactive controls in a list

[geom3trik]

I have a list view with the proper keyboard navigation setup, so tab to focus the list then arrow keys to select items in the list etc. But what if I have let’s say buttons on each list item. Typically these are focusable with tab key but ordinarily this would move focus away from the list, so what is the correct keyboard navigation behaviour for this case? This is perhaps more of a general accessibility question rather than specific to accesskit but I figured someone here might know the answer.

[mwcampbell]

What I'd suggest is this: Only the interactive controls for the currently selected list item should be focusable. In the tab order, those controls should come between the list and whatever comes after the list.

[geom3trik]

Ah interesting, so tab to focus the list, then arrow keys to navigate the list items, and tab to move focus between controls in the selected item only. How do I make it obvious to screen readers that there are controls within the list item? I could auto focus the first control but in that case how do I make it obvious the user is still within a list and can still use the arrow keys?

[DataTriny]

What you'd do is set a label on the item itself with a summary of the content followed by "press Tab for more actions". A context menu is also a popular choice if the actions are just activatable.

Activating the item to unlock tab navigation inside it is another possibility. In that case it could be useful to mark the items as expandable.

If this is in the context of Vizia, one thing I noticed is that Role::List and Role::ListItem are used. Usually for focusable elements you want Role::ListBox and Role::ListBoxOption. The formers are more appropriate for bulleted or numbered lists inside paragraphs.

[geom3trik]

In this case it’s currently just a single button per item. Thanks for letting me know about the incorrect list roles in Vizia.