[webcomponents] clearer, more accessible code (#336)

Using role="img" and aria-label on end nodes that don't contain text, (because proper SVG support is still rubbish in accessibility terms, although nodes that contain text are navigable by default) makes the whole thing a lot more navigable e.g. with a screenreader.

Using aria-hidden on the defs stops them being read at the beginning (another bug in browsers)

Adding aria tree navigation markup, and reordering the tree, would mean the navigation even makes sense, but I'll do that later.
You can view, comment on, or merge this pull request online at:

  https://github.com/w3c/webcomponents/pull/336

-- Commit Summary --

  * clearer, more accessible

-- File Changes --

    M assets/images/composed-tree.svg (96)

-- Patch Links --

https://github.com/w3c/webcomponents/pull/336.patch
https://github.com/w3c/webcomponents/pull/336.diff

---
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/pull/336