Code Editors: Better design for folders

[melchoyce]

This is related to (and relies on) #6531.

Let's make the file list easier to scan and introduce a way to collapse folders. See attached mockup.

and introduce a way to collapse folders

Adding the accessibility focus because any UI component that is not "native" in HTML and that is implemented as a sort of "widget" with non-standard semantics and interaction needs some special accessibility treatment. Assistive technologies, and people using them, need to understand how a special "widget" works to be able to use it.

Seems to me this should be implemented as an ARIA "Tree View". More details, expected keyboard interaction, and examples available on the ARIA Authoring Practices: ​https://www.w3.org/TR/wai-aria-practices/#TreeView

Worth noting how keyboard interaction works just with the arrow keys (the whole tree view has just one Tab stop).

From a visual perspective, I'd say the currently selected folder/file needs a way to indicate it's the current item that doesn't rely on color alone.

From a visual perspective, I'd say the currently selected folder/file needs a way to indicate it's the current item that doesn't rely on color alone.

Related: #31604

Bumping priority to high for visibility and alignment with 4.9 goals, and given proximity to beta 1 deadline.

This I feel needs to be a little more obvious than just icons. What about a rough idea of:

Trying out a v2 in Structure v2.png per ​yesterday's design triage in Slack.

@melchoyce I think this should be closed as a duplicate of #24048, and your designs can be provided there.

Duplicate of #24048.

Sure, I'll move that over now.