[EuiCheckableCard] Card body is not a click target

[Zacqary]

When creating <EuiCheckableCard>s with children, for example:

To select an option, you can click the radio button, the left side of the card, or the card title. Clicking the text body does not select the option.

[weronikaolejniczak]

Hey, @Zacqary 👋🏻 it's by design that children are not clickable. It's because children can be interactive. For accessibility and usability reasons, we cannot nest interactive elements.

[Zacqary]

Understand the need for interactive children. Problem is that when you don't have interactive children, the workaround is:

• Wrap entire body in a <div> with the same onClick handler as the parent EuiCheckableCard
• eslint-disable-next-line jsx-a11y/click-events-have-key-events because non-interactive elements with onClick handlers are expected to also have keyboard handlers (but in this case this is just a hack to increase the mouse target for the parent element)
• Due to unchangeable padding in the surrounding EuiPanel, have this small gap in the click target between the left side of the card and the inner div:

A prop like nonInteractiveChildren={true} could solve this

[weronikaolejniczak]

@Zacqary My instinct is telling me that nonInteractiveChildren is a weird interface. If anything, we could determine whether EuiCheckableCard has interactive children and not just take the consumers' word for it - it might lead to mistakes where nonInteractiveChildren is used because there's some text inside but there's also a small button in the end. I'm not a fan of overcomplicating the implementation though.

Let me benchmark this, see how other design systems handle it, discuss with my team and I will get back to you! Thank you for raising this!

[Zacqary]

I'd look into checking whether the click event target === the EuiCheckableCard, and if not, checking if the target is an interactive element with a click handler. Basically automagically add a stopPropogation to any child click handlers without requiring code changes.

Might be messy, might not work, but that's my instinct

[weronikaolejniczak]

@Zacqary there is a consensus that this has to be fixed. If the content is static then the user would expect the whole card to be clickable.

What is not agreed on is the implementation. 4 options are flying around and there might be some more:

1. Implement a nonInteractiveChildren prop; the consumer tells EuiCheckableCard whether the children are non-interactive and conditionally calls the onClick on the children wrapper
2. Implement a childIsClickable prop; the consumer tells EuiCheckableCard whether the children are interactive and conditionally calls the onClick on the children wrapper (mentioned in #eui-core on Slack)
3. EuiCheckableCard internally queries for interactive children (we already use tabbable for the purpose) and conditionally calls the onClick on the children wrapper
4. EuiCheckableCard checks whether the event target is EuiCheckableCard, if not it checks whether the event target is an interactive element with a click handler, it calls stopPropagation on any child click handlers

I would avoid 1 and 2 because it doesn't assure correct behavior and introduced a non-standard prop to the interface. I will try implementing 3) options but I'm open to opinions.