`ExpandableTile` doesn't reduce click target to chevron icon

[Alexey1100]

There's an issue with ExpandableTile logic. Clicking on an item inside the tile collapses or expands the tile, but according to the reference:

Expandable tiles can contain internal CTAs (like links to docs) if they are given their own click targets and the click target is reduced to only the chevron icon.

Could be reproduced with:

<script>
  import { ExpandableTile } from "carbon-components-svelte";
</script>

<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
  <a slot="above" href="#" style="height: 10rem">Above</a>
  <a slot="below" href="#" style="height: 10rem">Below</a>
</ExpandableTile>

[metonym]

Thanks for flagging this. This indeed is an unsupported feature.

The "interactive" Expandable Tile is supported in v11; the corresponding --tile-expandable-interactive classes do not exist in carbon-components@10.

As a workaround, if you intend for interactive content not to trigger the expand behavior, use the stopPropagation modifier. In the following example, clicking the link will not expand the tile and will log "Hello world" in the browser console.

REPL

<script>
  import { ExpandableTile } from "carbon-components-svelte";
</script>

<ExpandableTile>
  <div slot="above" style="height: 10rem">
    Above the fold content here This is a
    <a
      href="/"
      on:click|preventDefault|stopPropagation={() => console.log("Hello world")}
    >
      Link
    </a>
  </div>
  <div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>