search

mbrown1413 / Mechanical-Puzzle-Studio

The Swiss Army knife of mechanical puzzle design.
https://puzzlestudio.io/
Mozilla Public License 2.0
1 stars 0 forks source link

[UI] Support grouped items in ListSelect #36

Closed mbrown1413 closed 2 months ago

mbrown1413 commented 8 months ago

Change ListSelect component to be vuetify table based. They support selectable rows and row groups. This will be needed for piece generators and problem generators.

mbrown1413 commented 2 months ago

I've implemented groups in the ListSelect component in 7302eee5adf540fe85d043042dd78ee907bbe6f0 (although it hasn't reached the main branch yet).

I looked into a vuetify component that would do this and didn't find anything that fit well enough. Tables could work but I wanted something more compact for the sidebar. I looked into writing my own, but that's quite a bit of work. See the w3 listbox example for what it would take to implement all the aria attributes and keyboard shortcuts correctly: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/

In the end, I kind of faked it by putting groups in bold and items under that group indented. It works well for the most part, but I'll need to put effort into making screen-readers and mobile work better.