Missing keyboard focus on "more benefits" cards

What's expected

When using only a keyboard (no mouse) and tabbing into the "more benefits" options on the final step of the benefits finder app, the cards (which look like buttons) should receive a visible focus indicator as directed in WCAG 2.4.7. The indicator should match the other focus indicators which are a thicker red outline.

What happened

When using a keyboard to navigate through the final page of the app, I was unable to tell if I were actually on one of the two other benefits finder options at the bottom. If I hover over them with a mouse I can tell that they darken slightly but that effect doesn't happen when only using a keyboard. Here's a video: https://app.screencast.com/ksQLEtemKlSpU

I think the issue is that we're using the USWDS card component https://designsystem.digital.gov/components/card/ and in that component code the entire card doesn't receive focus. Rather, only the links INSIDE the card do. We don't have links inside the card thus the card isn't receiving focus.

I recommend we change that card component to a button component OR Add a clear button or link inside the card that receives focus.

Tagging @scottqueen-bixal

How to replicate

Use only a keyboard to navigate that final page of the form; note that there is no visible indicator when those cards receive focus.

GSA / px-benefit-finder