Accessibility: Make sidebar accessible by default

[TobyKLight]

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]

Screen.Recording.2024-11-28.at.09.56.17.mov

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

[TobyKLight]

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.

https://youtu.be/OzgLJhdJ-04

[pandrr]

sidebar slider, button and toggle now have aria label. toggle can now be accessed with tab and enter