Card - Add ref forwarding

[rebeccaalpert]

Describe the problem The card component doesn't have ref forwarding. We want to add ref forwarding for work in Chatbot: https://github.com/patternfly/chatbot/pull/409

We need to add focus to the card for accessibility purposes. We have a short term work around, but would appreciate a built-in solution.

How do you reproduce the problem? See https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Card/Card.tsx; there is no ref forwarding.

Expected behavior We would appreciate ref forwarding.

Is this issue blocking you? No.

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

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[thatblindgeye]

@rebeccaalpert what was the original use-case for needing to focus a Card? Is it a card that can be clicked for some action? Just wondering if focusing a Card makes sense if it's just a plain card without any "full card" action or anything

[rebeccaalpert]

Hey @thatblindgeye - It's for these (message feedback cards):

• https://chatbot-pr-chatbot-409.surge.sh/patternfly-ai/chatbot/messages#message-feedback
• https://chatbot-pr-chatbot-409.surge.sh/patternfly-ai/chatbot/messages#message-feedback-with-timeouts

[thatblindgeye]

What would the expected interaction be for those examples? Is it us shifting focus to the Card when it appears or when a user initiates some action, or more to make the Card itself focusable if a user is navigating through message history?

[rebeccaalpert]

Shifting focus to the card when it appears after the 👍 or 👎 is clicked!

[thatblindgeye]

Ah gotcha. For those examples specifically:

• If there's some other interactive content, it may make more sense to focus one of those elements instead; it might be a matter of what's least destructive or what's more relevant. Are there any examples/demos setup where clicking the thums up/down button renders the feedback card?
• In the case of a simple "Feedback submitted" card, if there's a close button then focusing that would make sense, otherwise there may not be a need to focus the card itself (maybe move focus back to the message text area)

Not to say we shouldn't add ref forwarding, though; probably still worth implementing that in Card (fully clickable/selectable cards for example)

[rebeccaalpert]

Yup, right here: https://www.patternfly.org/patternfly-ai/chatbot/messages/demo. The problem is that there is not always an interactive element in the thank-you card. (Sometimes there is no close button.)

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.