I am building a container with nested sliding sub-containers - which themselves will have their own set of nested containers.
Basically it will behave very similar to how iOS handles settings (see attached image).
I need some advice on how to go about this. What ARIA properties would you use? And how would you structure keyboard navigation?
.. is there an existing W3C recommended pattern I can lean against? Or do I need to re-invent the wheel on this one?
The WAI-ARIA Authoring Practices Guide is intended to provide an understanding of how to use WAI-ARIA to create an accessible Rich Internet Application. It describes recommended WAI-ARIA usage patterns and provides an introduction to the concepts behind them.
Source: - https://www.w3.org/TR/wai-aria-practices-1.1/#intro
From this spec it looks like this is the most relevant:
A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a sub menu, or by invoking a command, such as Shift + F10 in Windows, that opens a context specific menu. When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
Although it seems this may be in reference to a 'context menu' that you usually get by right clicking. But I don't see how this could be used for your use case.
The spec also has advice and guidelines for Keyboard Interaction.
You may also want to look at the Web Content Accessibility Guidelines Working Group wiki, which has an article on 'Using ARIA menus'
