feat(EuiCheckableCard): toggle on children if non-interactive #8907

weronikaolejniczak · 2025-07-24T16:14:18Z

Summary

Resolve #8900

We check whether children are interactive. If no, we trigger the click event on the whole card, including the children wrapper.

Why are we making this change?

When using EuiCheckableCard with children, e.g.:

to select an option, user has to be more precise and click on the radio / checkbox wrapper or the label:

There's a consensus that the expected behavior is if there is static content, clicking on it toggles the radio / checkbox.

Impact to users

🟢 None. All users will benefit from this behavior out-of-box.

QA

Specific checklist

Storybook
- Verify that non-interactive children wrapper is clickable
- Verify that interactive children wrapper is not clickable
CI is green and the added Cypress tests pass
EuiCheckableCard doc example works as expected

General checklist

Browser QA
- ~~Checked in both light and dark modes~~
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, ~~Edge, and Firefox~~
- ~~Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated ~~jest and~~ cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

tkajtoch · 2025-07-25T22:14:03Z

packages/eui/src/components/card/checkable_card/checkable_card.tsx

            id={`${id}-details`}
            className="euiCheckableCard__children"
            css={childStyles}
+            onClick={disabled ? undefined : onChildrenClick}


I checked the accessibility of this and I think we're good here thanks to the focusable radio input serving the same role.

@tkajtoch Yes, the changes don't affect accessibility because we're not adding a new focusable element. We're only making a non-interactive div clickable (which is generally recommended against but here we have the focusable input that has an accessible name).

tkajtoch · 2025-07-25T22:15:29Z

packages/eui/src/components/card/checkable_card/checkable_card.tsx

        </label>
        {children && (
          <div
+            ref={childrenEl}


nit: this name confused me for a sec. Could we rename it to childrenWrapperEl? I prefer not to use abbreviations like el, but I'm okay with it here since it just expands on pre-existing code 👍🏻

Yes, I did expand on the pre-existing code and decided to go with the somethingEl naming but actually, we can change it. How would you rename them?

I also agree with childrenWrapper.

tkajtoch · 2025-07-25T22:27:22Z

packages/eui/src/components/card/checkable_card/checkable_card.tsx

+
  const classes = classNames('euiCheckableCard', className);

+  const [interactiveChildren, setInteractiveChildren] = useState<


Since we're only checking the length of the interactiveChildren array to determine the existence of at least one tabbable child, could we just store it as a binary value here (e.g., hasInteractiveChildren) and save some memory?

I wish tabbable would provide a way to check whether the passed container has any tabbable elements, so it could return on the first match and save even more here.

@tkajtoch ah, you're absolutely right, we can store a boolean. Refactoring...

@tkajtoch addressed on 4eb547e, thank you for raising this, what a derp am I... 🙈

…children

…kableCard`

tkajtoch

Thank you for addressing my comments @weronikaolejniczak! 🎉 LGTM

elasticmachine · 2025-07-28T12:11:28Z

💚 Build Succeeded

History

💚 Build #877 succeeded 024232f
💚 Build #874 succeeded 5b77f3d

cc @weronikaolejniczak

elasticmachine · 2025-07-28T12:22:56Z

💚 Build Succeeded

Buildkite Build
Commit: e3b99ac

History

💚 Build #4455 succeeded 024232f
💔 Build #4452 failed 5b77f3d

cc @weronikaolejniczak

`106.1.0` ⏩ `106.2.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v106.2.0`](https://github.com/elastic/eui/releases/v106.2.0) - Enhanced `EuiCheckableCard` to make non-interactive children clickable for card selection ([#8907](elastic/eui#8907)) - Added `showFooter` and `toolbarProps.right` props to `EuiMarkdownEditor` for more flexible layout control. ([#8889](elastic/eui#8889)) ([#8889](elastic/eui#8889)) **Bug fixes** - Fixed `EuiPopover` not closing on outside click after multiple fast clicks on the trigger element ([#8882](elastic/eui#8882)) **Accessibility** - Added accessible labels to virtualized `EuiCodeBlock` ([#8887](elastic/eui#8887)) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Marta Bondyra <[email protected]>

`106.1.0` ⏩ `106.2.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v106.2.0`](https://github.com/elastic/eui/releases/v106.2.0) - Enhanced `EuiCheckableCard` to make non-interactive children clickable for card selection ([elastic#8907](elastic/eui#8907)) - Added `showFooter` and `toolbarProps.right` props to `EuiMarkdownEditor` for more flexible layout control. ([elastic#8889](elastic/eui#8889)) ([elastic#8889](elastic/eui#8889)) **Bug fixes** - Fixed `EuiPopover` not closing on outside click after multiple fast clicks on the trigger element ([elastic#8882](elastic/eui#8882)) **Accessibility** - Added accessible labels to virtualized `EuiCodeBlock` ([elastic#8887](elastic/eui#8887)) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Marta Bondyra <[email protected]>

weronikaolejniczak self-assigned this Jul 24, 2025

weronikaolejniczak force-pushed the fix/8900-eui-checkable-card-card-body-is-not-a-click-target branch 2 times, most recently from d68821c to 024232f Compare July 24, 2025 17:16

weronikaolejniczak marked this pull request as ready for review July 24, 2025 17:19

weronikaolejniczak requested a review from a team as a code owner July 24, 2025 17:19

tkajtoch reviewed Jul 25, 2025

View reviewed changes

weronikaolejniczak added 5 commits July 28, 2025 13:52

feat(EuiCheckableCard): toggle on children if non-interactive

f317558

chore: add changelog

07d37d0

chore: update snapshot test

b233dd7

refactor(eui): use boolean state in EuiCheckableCard for interactive …

4eb547e

…children

refactor(eui): rename childrenEl to childrenWrapperEl in `EuiChec…

e3b99ac

…kableCard`

weronikaolejniczak force-pushed the fix/8900-eui-checkable-card-card-body-is-not-a-click-target branch from 024232f to e3b99ac Compare July 28, 2025 11:52

tkajtoch approved these changes Jul 28, 2025

View reviewed changes

weronikaolejniczak merged commit 2cb75c6 into elastic:main Jul 28, 2025
5 checks passed

tkajtoch mentioned this pull request Jul 28, 2025

Upgrade EUI to v106.2.0 elastic/kibana#229725

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(EuiCheckableCard): toggle on children if non-interactive #8907

feat(EuiCheckableCard): toggle on children if non-interactive #8907

Uh oh!

weronikaolejniczak commented Jul 24, 2025 •

edited by tkajtoch

Loading

Uh oh!

tkajtoch Jul 25, 2025

Uh oh!

weronikaolejniczak Jul 28, 2025

Uh oh!

tkajtoch Jul 25, 2025

Uh oh!

weronikaolejniczak Jul 28, 2025

Uh oh!

tkajtoch Jul 25, 2025 •

edited

Loading

Uh oh!

weronikaolejniczak Jul 28, 2025

Uh oh!

weronikaolejniczak Jul 28, 2025

Uh oh!

tkajtoch left a comment

Uh oh!

elasticmachine commented Jul 28, 2025

Uh oh!

elasticmachine commented Jul 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		const classes = classNames('euiCheckableCard', className);

		const [interactiveChildren, setInteractiveChildren] = useState<

feat(EuiCheckableCard): toggle on children if non-interactive #8907

feat(EuiCheckableCard): toggle on children if non-interactive #8907

Uh oh!

Conversation

weronikaolejniczak commented Jul 24, 2025 • edited by tkajtoch Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Impact to users

QA

Specific checklist

General checklist

Uh oh!

tkajtoch Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Jul 28, 2025

Choose a reason for hiding this comment

Uh oh!

tkajtoch Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Jul 28, 2025

Choose a reason for hiding this comment

Uh oh!

tkajtoch Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Jul 28, 2025

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Jul 28, 2025

Choose a reason for hiding this comment

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jul 28, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jul 28, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

weronikaolejniczak commented Jul 24, 2025 •

edited by tkajtoch

Loading

tkajtoch Jul 25, 2025 •

edited

Loading