media card selectable solution

Author: nielslyngsoe

packages/uui-base/lib/mixins/SelectableMixin.ts

@@ -104,7 +104,9 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
 
     readonly #onKeydown = (e: KeyboardEvent) => {
       if (e.code !== 'Space' && e.code !== 'Enter') return;
-      this.#onClick(e);
+      if (e.composedPath().indexOf(this.#selectableTarget) === 0) {
+        this.#onClick(e);
+      }
     };
 
     readonly #onClick = (e: Event) => {

packages/uui-card-media/lib/uui-card-media.element.ts

@@ -94,7 +94,8 @@ export class UUICardMediaElement extends UUICardElement {
             ifDefined(
               this.target === '_blank' ? 'noopener noreferrer' : undefined,
             ),
-        )}>
+        )}
+        @click=${(e: MouseEvent) => e.stopPropagation()}>
         ${this.#renderContent()}
       </a>
     `;
@@ -120,7 +121,9 @@ export class UUICardMediaElement extends UUICardElement {
       <div id="select-border"></div>
 
       <slot name="tag"></slot>
-      <slot name="actions"></slot>`;
+      <slot
+        name="actions"
+        @click=${(e: MouseEvent) => e.stopPropagation()}></slot>`;
   }
 
   static styles = [

packages/uui-card-media/lib/uui-card-media.story.ts

@@ -64,6 +64,20 @@ export const Actions: Story = {
   },
 };
 
+export const Href: Story = {
+  args: {
+    'actions slot': html`<uui-button
+      slot="actions"
+      look="secondary"
+      label="Remove"
+      >Remove</uui-button
+    >`,
+    selectable: true,
+    href: 'https://umbraco.com',
+    target: '_blank',
+  },
+};
+
 export const Image: Story = {
   args: {
     slot: html`<img src="https://placedog.net/1447/?random" alt="" />`,