Accessibility: Make sidebar accessible by default

TobyKLight commented 4 days ago

Request is to make the sidebar accessible to keyboard users and assistive technology like screen readers.

The advantage of doing this from cables.gl side is that every single patch using sidebar already has a massive increase in accessibility.

I think that would include

Every interactive widget can be selected with TAB
Ensure Widgets respond to standard keyboard shortcuts.
- See this web aim guide
Widgets are semantically correct in the DOM (E.g. buttons are either \<button> tag or have role="button")
The interactive part of each widget has aria-labelledby attribute set to the ID of the element that captions it.
- This means screen reader users that TAB to an input field also hear what the label of that field is.
The whole widget panel has an appropriate role (eg role="dialog") and then an aria-labelledby attribute that points to the title element.
- This should mean that when a screen reader user moves their focus initially into the panel that it's announced as 'Patch visualisation dialog" and then the widget label.

pandrr commented 3 days ago

this looks quite good now... also outline is only set using focus-visible, so will not show when just clicking on it

TobyKLight commented 1 day ago

that's a great start

In terms of the roles and aria-labelledby attribute here is a video demonstrating what I'm talking about with the screen reader.

cables-gl / cables_docs