ubuntu
feat: improve selectable containers and yarubanners
@Jupi007 @Muqtxdir @juanruitina @madsrh @larsb24
Currently we have the YaruBanner and YaruSelectableContainer as "convenience widgets" with the same UI for tapping, focusing and selecting any child element
It paints a 4px border around the child widget and as I already mentioned provides callbacks for hovering/tapping and provides the option to focus the child with the keyboard.
Advantages of this UI:
- the focused element is quite accessability / discoverable
Disadvantages:
- layouts always need to take the 4px (or more if changed) offset * 2 * item cound into account, for example in gridviews, to have a correct aligment of other rows above / below etc
- it limits the whole UI a little bit and blocks ideas like scale transitions for hover effects because this wouldnt be consitent with those banners
Are you happy with the current design and if not what would be some go-to UI you could think of?
Thank you for bringing this up, I've also been thinking about this. I would feel inclined to align ourselves with the Material states for cards: use overlays for hover/tapping, and use the border as a focus ring only. As far as I can see, this is also the approach in GNOME/Adwaita (for instance, in the Software app).
I'd use the accent colour as the border colour, with no transparency, so it meets 3:1 contrast and hence WCAG AAA. Instead of a 4px border, I suggest to go for a 2px border but with a 2px offset: this would make the focus ring more noticeable if for some reason the card/container/banner has content that is close to the accent colour. See for instance how the focus ring is barely noticeable in this button in the GNOME Software app:
All this aligns with my proposal for focus states (https://github.com/ubuntu/yaru.dart/issues/979)
(FYI @ashuntu)
