Bug - Card - Actions menu unclickable in selectable cards

[jenny-s51]

Describe the problem
A clear and concise description of the problem. Which components are affected?

When using an actions toggle in a selectable card, the actions toggle cannot be triggered by click (though it does seem to be keyboard accessible)

How do you reproduce the problem?
Provide steps to reproduce. A codepen or codesandbox demonstrating the problem is appreciated.

Copy and paste this code into the Selectable card demo:

<div class="pf-v5-l-gallery pf-m-gutter">
  <div class="pf-v5-c-card pf-m-selectable" id="card-selectable-example">
    <div class="pf-v5-c-card__header">
      <div class="pf-v5-c-card__actions pf-m-no-offset">
      <div class="pf-v5-c-dropdown">
        <button
          class="pf-v5-c-dropdown__toggle pf-m-plain"
          id="card-action-example-1-dropdown-kebab-button"
          aria-expanded="false"
          type="button"
          aria-label="Actions"
        >
          <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
        </button>
        <ul
          class="pf-v5-c-dropdown__menu pf-m-align-right"
          aria-labelledby="card-action-example-1-dropdown-kebab-button"
          hidden
        >
          <li>
            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
          </li>
          <li>
            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
          </li>
          <li>
            <a
              class="pf-v5-c-dropdown__menu-item pf-m-disabled"
              href="#"
              aria-disabled="true"
              tabindex="-1"
            >Disabled link</a>
          </li>
          <li>
            <button
              class="pf-v5-c-dropdown__menu-item"
              type="button"
              disabled
            >Disabled action</button>
          </li>
          <li class="pf-v5-c-divider" role="separator"></li>
          <li>
            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
          </li>
        </ul>
      </div>
        <div class="pf-v5-c-card__selectable-actions">
          <div class="pf-v5-c-check pf-m-standalone">
            <input
              class="pf-v5-c-check__input"
              type="checkbox"
              id="card-selectable-example-check"
              name="card-selectable-example-check"
              aria-labelledby="card-selectable-example"
            />

            <label
              class="pf-v5-c-check__label"
              id="card-selectable-example-check-label"
              name="card-selectable-example-check"
              for="card-selectable-example-check"
            ></label>
          </div>
        </div>
      </div>
      <div class="pf-v5-c-card__header-main">
        <div class="pf-v5-c-card__title">
          <h2 class="pf-v5-c-card__title-text">Title</h2>
        </div>
      </div>
    </div>
    <div class="pf-v5-c-card__body">Body</div>
    <div class="pf-v5-c-card__footer">Footer</div>
  </div>
</div>

Expected behavior
A clear and concise description of the expected behavior.
Hover state is triggered

Is this issue blocking you?
List the workaround if there is one.

https://patternfly-react-pr-9322.surge.sh/patterns/card-view/react-demos/card-view/

See patternfly/patternfly-react#9322, can be fixed in react by hardcoding the z-index but this is not ideal

[thatblindgeye]

Using the newer implementation of the selectable/clickable cards, we'd have to use the markup from the "clickable and selectable" example when we want both a checkbox/radio selection of the card and clickable card actions. There was some conversation in the original issue about this when @srambach was working on the core implementation (from #5409 (review) and the couple of comments after it)

[nicolethoen]

It looks to me that the card-view demo might be using the wrong selectable card implementation. We'd want it to be using the 'clickable and selectable' implementation like @thatblindgeye mentioned.

[mcoker]

Created a new issue for that #5744