Nested interactivity in list view elements

[tanishqkancharla]

Hello, I wanted to ask a question about nested interactive elements. I'm specifically referring to this example in the ListView page: https://react-spectrum.adobe.com/react-spectrum/ListView.html#complex-items. I'm not interested in using the component, more so just details of the implementation that lead to it being accessible.

How is it ensured that nested interactive elements are accessible? I know that nested buttons and nested links are disallowed by the html spec. But is it okay if the parent container is a div.role="grid"? In that case, how is the action attached to the component so voice-only-users and keyboard-users can activate it (is attaching onKeyDown for Enter and onClick enough)? Using the accessibility inspector on the whole cell, I can see that the "press" action correctly shows up: what is needed to ensure that (in the case of a custom implementation)?

[snowystinger]

Hey, thanks for the interest! Before I go answering this. Have you read through our docs on grid lists as well as the spec that it links to and implements?
https://react-spectrum.adobe.com/react-aria/useGridList.html
https://www.w3.org/WAI/ARIA/apg/patterns/grid/

[tanishqkancharla]

Hello, I did read through. I believe the relevant sections are here about row actions: https://react-spectrum.adobe.com/react-aria/useGridList.html#row-actions and the section in the aria docs "Keyboard Interaction - Setting Focus and Navigating Inside Cells
".

However I don't believe the docs explain how to disambiguate with aria whether a row is "actionable" or not: i.e. whether clicking or activating on the row performs an action, and which action it performs. I see that implementations are supposed to bind Enter to activating the cell if such an activation is possible: are users supposed to just infer from context what the action is? There's nothing like an aria-action="Open File" to indicate what the action will do?

[snowystinger]

Great, thanks for having read those already and narrowing the question.

You shouldn't need to do anything with Enter yourself, the hook should take care of that for you.

As for how to determine what performs the action, it's a combination of

    selectionMode="multiple"
    selectionBehavior="replace"

For announcements, when you first enter the list, it announces the aria-label, which in this case says "with row actions". You could be more descriptive there if you needed.

[tanishqkancharla]

Oh, got it, thanks!