va-checkbox | interactive elements in internal description

[Mottie]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

When an internal-description slot is included with a va-checkbox, it includes the content within the label and the div wrapping both the input and label has a click handler attached. This combination makes interactive elements toggle the checkbox, but not perform their intended function.

What I expected to happen

Clicking on a link or button will perform the intended interaction. In this screenshot, I attempted to change the internal structure of va-checkbox such that the internal-description slot is rendered outside the label, and wrapping div, but clicking on the internal-description text does not change the checkbox state, but clicking on a button does open the modal, as intended.

Reproducing

• CSS Library version: Any CSS version, v49.3.0 of later component library version (v17.3.0 web components)
• Device: (e.g. iPhone 8, Macbook): Any
• Browser: (e.g. Firefox, IE 11): Any

Steps to reproduce:

1. Run web components/storybook locally
2. Add an interactive button inside the va-checkbox internal description slot
3. Test the button

// Storybook code with interactive button
export const TitleWithCustomContent = () => {
  const [isVisible, setIsVisible] = useState(false);
  const onCloseEvent = () => setIsVisible(!isVisible);
  const openModal = () => setIsVisible(true);
  return (
    <>
      <VaModal visible={isVisible} clickToClose onCloseEvent={onCloseEvent}>
        <p>This is a succinct, helpful {status} message</p>
      </VaModal>
      <va-checkbox label="Issue 1" tile onBlur={e => console.log(e)}>
        <div slot="internal-description">
          <div className="vads-u-margin-top--0p5">
            <strong>Detail</strong>: Internal description slot for issue 1
          </div>
          <div className="vads-u-margin-top--1">
            <strong>Date</strong> Jan 2, 2025
          </div>
        </div>
      </va-checkbox>
      <va-checkbox label="Issue 2" tile onBlur={e => console.log(e)}>
        <div slot="internal-description">
          <div className="vads-u-margin-top--0p5">
            <strong>Detail</strong>: Internal description slot for issue 2
          </div>
          <div className="vads-u-margin-top--1">
            <strong>Date</strong> Jan 4, 2025
          </div>
          <div className="vads-u-margin-top--1">
            <va-button onClick={openModal} text="Open modal" />
          </div>
        </div>
      </va-checkbox>
    </>
  );
};

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Details

• Working on this to satisfy this staging review finding ticket - #102160