Review a11y for design system and primitive Web Components

[NoelDeMartin]

As part of #769, a bunch of Web Components have been implemented that may not be completely accessible. In particular, these could be the Menu, Combobox, and Dialog components.

Before looking into this, though, we still have to consider whether we can use 3rd party components from Web Awesome or other libraries. If we do, maybe we can end up removing all the new functionality that has been implemented without an a11y review.

To clarify, the reason why these weren't implemented with full a11y support from the beginning is because doing that requires a lot more work. I preferred to get a basic version going, and once we decide whether we're using 3rd party components or not we can improve them.

[timea-solid]

What would be some suggested 3rd party web components to reuse? Can you share a link to a WebAwesome such component? So we have alternatives in the community?

[NoelDeMartin]

For the Dialog, we could look at <wa-dialog>, although I think the <dialog> element is pretty well supported nowadays and maybe we can get away with our own implementation.

For the Menu, we could look at <wa-dropdown>, although I've done some tests with ARIA DevTools and I'm not completely sure it is accessible :(. However, I'm very skeptic that these components aren't accessible (it's one of the main points of Web Awesome), and talking with Gemini it seems like these aria roles are not "that important" as long as the focus management, roles, and labels are used properly... So I don't know, we need to spend a bit more time thinking about this one.

And Combobox is probably the more troublesome, because <wa-combobox> is a paid component 😅. We could look at other 3rd party libraries, but I'm not familiar with any that works with web components. So maybe we need to do some more research here, or end up implementing it ourselves (their <wa-select> is open source, so we could look at it for inspiration).