1874286 - Create icon card variant of moz-card

Status: NEW

(Toolkit :: UI Widgets, enhancement, P3)

Description

[Tim Giles [:tgiles]]

We want to continue utilizing moz-card where we can. One use case is the "icon card" pattern. This pattern can be seen on the new tab page in the top sites bar. There may be other places that can use this pattern as well, but the top sites place seems to be the most visibility location for this change.

This card variant needs to display a rounded square icon within a rounded container. When hovering over either the text, the rounded square icon, or rounded container itself, another rounded container must appear that encapsulates all of the previous elements/the card element (see current behavior on new tab for hover behavior). There is still an open question about what to do with the ellipsis button within each card. If I recall correctly, having the ellipsis button always be present would be a beneficial thing to do for accessibility reasons. This is something that should be verified during this work. Additionally, the ellipsis buttons themselves are pretty small and thus can be difficult for people with motor disabilities to precisely line up a pointing device to click/activate said buttons. We should determine if we can increase the size of these buttons to assist more users.

Something else that should be investigated on the hover case is the fact that you can hover over these existing cards and get the hover state but also not be able to click/activate said card. For example, all the Pocket stories can be clicked/activated as soon as you hover over any part of the card. This issue can most likely be fixed by following the pattern in the Pocket cards (if we want to have buttons inside of other interactive content). Maybe we should remove the hover state around the entire card (the case where you can hover the card but there's nothing to click) and only show the hover state when hovering the rounded icon container and link below it, and then show the hover state when hovering over the (always shown in the ideal world) ellipsis button

I believe there are still some open questions around focus behavior though. For example, the current focus behavior puts the focus inside of the inner rounded container followed by the ellipsis button. Maybe we should continue doing that and not put the focus/border on the container around it.

There are open questions that should be investigated before really digging into this work. Either that or this bug should be broken down into more discreet tasks in order to move at a faster pace.