Bug - [Card] - `isSelectable` not working in webkit 122

[christianvogt]

Describe the problem
Card component are no longer clickable / selectable in chrome / webkit 122.

How do you reproduce the problem?
Use the Card Single Selectable example (or any other example with clickable cards) on the patternfly website. With the latest chrome or edge (v 122), the card is no longer selectable. You must use the radio button in the top right corner.

Visit the same page with Firefox and it works.

Expected behavior
Expected card to be selectable.

Is this issue blocking you?
Yes.

What is your environment?

• OS: mac intel
• Browser: Chrome, edge
• Version: 122

What is your product and what release date are you targeting?
RHOAI

Any other information?

[gitdallas]

styling is also affected, this can be seen in the HTML examples as well. Styling is strange (as seen below) and there are no hover or cursor changes.

[christianvogt]

The problem occurs with the styling on this label:

while it has position: absolute; inset: 0; it does not occupy the available space of the parent tile anymore which has position: relative.

[gitdallas]

ah, that makes sense for why the click would also be affected. looks like an issue for core.

[gitdallas]

fyi @mcoker @srambach @mattnolting

[mattnolting]

@gitdallas @christianvogt Looks like the issue is that the background-color of label and z-index are causing the issue.

[christianvogt]

If a card also contains interactive body content, such as a link, should that link also be clickable even when the card itself is selectable?

[gitdallas]

This may require some stopPropagation but should be possible. I think there may be some design guidelines against it. This discussion is more suited for slack if you'd like to discuss further.

[christianvogt]

We can work around this issue by adding the following css. It seems that inset: 0 is no longer working to make the label occupy the parent content box.

.pf-v5-c-card__selectable-actions .pf-v5-c-radio__label {
  width: 100%;
  height: 100%;
}