[Renderers/Web]: Make rendered output closer to internal hierarchy

[andylovescode]

The current clay website is a mess accessibility-wise, to put it nicely, this is because screen readers assume some amount of hierarchy and semantic data. To a screen reader, the feature list is just a bunch of random bits of text and boxes, instead of a list. There's a few big steps you can take towards improving accessibility:

1. Put elements under each other based on the internal hierarchy in Clay
2. Add attributes for elements for semantic roles like "unordered-list", and "item", which translate into <ol>, and <li> in the rendered output.

[nicbarker]

I agree! This has been on the list for a while. We made a little progress here by introducing native scrolling containers - if you look at the source you can see that at the very least, children of scrolling elements are nested inside them. It's worth mentioning though that managing a tree becomes a little difficult from a performance perspective, we would essentially end up reimplementing react's vdom / diffing algorithm 🙂

[andylovescode]

Yeah, although if you keep the code relatively simple, it can be pretty performant, here's some reference code from my framework (will need adaptation), if you need it.