Offload components to third party libraries

[vincerubinetti]

The more I think about it, the more I think that, for long term maintainability, it is essential that I make things in the frontend app as simple as possible. I'd like to scrap as much custom component code and logic as I can, and use third party solutions instead.

If possible, I want to use "headless" libraries, where they provide the accessibility and logic and such, and you just provide the styles. Here are some:

• Oruga
• TanStack Table
• Headless UI
• Radix Vue
• Zag Js

Worst case, I can use pre-styled libraries and override them to make them look consistent.

A note in my defense: At the time I was first developing this app, most of things things didn't exist yet, or were still nascent. It took a long time after Vue 3's release for third party libraries supporting it to appear, I think because of covid. There were a few third-party components (e.g. multi-select dropdowns) for Vue 3 at the time, but when I investigated them I found that they were not accessible at all (accessibility not even considered, seemingly), with one exception iirc that didn't have the features we needed. So, at the time, I decided to make my own and accessibility test them with Deque Axe. But those components ended up being pretty big and unruly. Not the best to maintain, especially for people not familiar with accessibility requirements. This is really something you want to outsource if you can.

[vincerubinetti]

Make less use of display: contents, especially for doing tables as grids. This takes the element out of the accessibility tree, and although that's technically a bug according to the spec, it's been years and browsers have still not remedied this.