Accessibility: Make default interactive HTML elements accessible.

[TobyKLight]

Currently DivElement and Element ops can be set to interactive mode where they are effectively buttons (or links if they subsequently open a hyperlink).

These have two accessibility issues at the moment

• Semantically they are just divs. Ideally they would identify themselves as buttons or links when they function as buttons or links. Then screen reader users have a better expectation what they do (in particular they expect links navigate them off the current page). This can be achieved by either
  • Changing their tags to <button> or <a>
  • Adding an ARIA role attribute of "button" or "link"
  • See full list of ARIA roles here
• They only listen for pointer events. This works for mice and touch but not everything.
  • In my tests they also need to listen for click events to be able to be used by ios voiceover.
  • For keyboard users they should be able to be activated
    • By SPACE and ENTER when they work as buttons
    • By ENTER when they work as links
    • Full list of default keyboard shortcuts here
    • However I think in most browsers you don't need to add these as explicit keydown listeners as long as you have the correct semantic tags and you have click listeners,

This would also go for any other HTML ops in future.
It also may be that different 'ButtonElement' 'LinkElement' ops are a better approach.

[pandrr]

[x] sidebar button is now a button element and has an outline and can be used with enter

[pandrr]

where do you see links that are not <a> ?

[TobyKLight]

This feature request is not just the sidebar or cables editor UI but for end-user created UI.
When end-user creates a HTML element with DivElement or Element op and they set it to be interactive then 90% of the time it effectively becomes a button or a link, depending on what it ultimately triggers.

But if in the DOM it's a <div> and not a <button> or a <link> then it won't have default accessible behaviour that the browser would assign to it. To make a <div> equivalent to a <link> in terms of accessibility I think it has to have role="link" and tabindex="0" and register an event handler for click.

I advocate that this should just be the default behaviour without needing a special ElementAccessibility op. It should be that if the end user creates an interactive HTML element that is as accessible as possible by default and they have to work to mess it up, as opposed to adding extra ops to make it accesible.

So specifically would suggest

• That the Element op and DivElement ops also trigger on click event handlers
• And this should also be true for any future interactive elements

And then in terms of the default semantic behaviour it's about what should the default easy way for cables.gl users to create buttons and links be?

If they should be using the Element op then I think should have a tag dropdown between <link>, <button>, <div> and other (with then a user field for other)

OR perhaps there should be simple LinkElement and ButtonElement ops fixed to the appropriate tags.

[pandrr]

when an element op is interactive, they now (on dev.cables.gl) get a tabindex attribute and are "clickable" by keyboard space/enter keys

[TobyKLight]

Sounds good! Does it use the 'click' event handler?
When I tested I found that ios safari voiceover would only trigger buttons with this handler. (Important for accessibility as ios voiceover is most popular mobile screen reader)

Unfortunately I don't have an ios device any more.