Set cards tabindex=-1 when selectOnly is enabled

Author: leekelleher

packages/uui-card-block-type/lib/uui-card-block-type.element.ts

@@ -56,11 +56,12 @@ export class UUICardBlockTypeElement extends UUICardElement {
   }
 
   #renderButton() {
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
     return html`
       <button
         id="open-part"
         class="uui-text"
-        tabindex=${this.disabled ? (nothing as any) : '0'}
+        tabindex=${ifDefined(tabIndex)}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
         ${this.#renderContent()}
@@ -69,11 +70,12 @@ export class UUICardBlockTypeElement extends UUICardElement {
   }
 
   #renderLink() {
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
     return html`
       <a
         id="open-part"
         class="uui-text"
-        tabindex=${this.disabled ? (nothing as any) : '0'}
+        tabindex=${ifDefined(tabIndex)}
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
         rel=${ifDefined(

packages/uui-card-content-node/lib/uui-card-content-node.element.ts

@@ -86,29 +86,35 @@ export class UUICardContentNodeElement extends UUICardElement {
   }
 
   #renderButton() {
-    return html`<button
-      id="open-part"
-      tabindex=${this.disabled ? (nothing as any) : 0}
-      @click=${this.handleOpenClick}
-      @keydown=${this.handleOpenKeydown}>
-      ${this.#renderContent()}
-    </button>`;
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    return html`
+      <button
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        ${this.#renderContent()}
+      </button>
+    `;
   }
 
   #renderLink() {
-    return html`<a
-      id="open-part"
-      tabindex=${this.disabled ? (nothing as any) : 0}
-      href=${ifDefined(!this.disabled ? this.href : undefined)}
-      target=${ifDefined(this.target || undefined)}
-      rel=${ifDefined(
-        this.rel ||
-          ifDefined(
-            this.target === '_blank' ? 'noopener noreferrer' : undefined,
-          ),
-      )}>
-      ${this.#renderContent()}
-    </a>`;
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    return html`
+      <a
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        href=${ifDefined(!this.disabled ? this.href : undefined)}
+        target=${ifDefined(this.target || undefined)}
+        rel=${ifDefined(
+          this.rel ||
+            ifDefined(
+              this.target === '_blank' ? 'noopener noreferrer' : undefined,
+            ),
+        )}>
+        ${this.#renderContent()}
+      </a>
+    `;
   }
 
   public render() {

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

@@ -71,10 +71,11 @@ export class UUICardMediaElement extends UUICardElement {
   }
 
   #renderButton() {
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
     return html`
       <button
         id="open-part"
-        tabindex=${this.disabled ? (nothing as any) : '0'}
+        tabindex=${ifDefined(tabIndex)}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
         ${this.#renderContent()}
@@ -83,10 +84,11 @@ export class UUICardMediaElement extends UUICardElement {
   }
 
   #renderLink() {
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
     return html`
       <a
         id="open-part"
-        tabindex=${this.disabled ? (nothing as any) : '0'}
+        tabindex=${ifDefined(tabIndex)}
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
         rel=${ifDefined(

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

@@ -40,29 +40,35 @@ export class UUICardUserElement extends UUICardElement {
   }
 
   #renderButton() {
-    return html`<div
-      id="open-part"
-      tabindex=${this.disabled ? (nothing as any) : '0'}
-      @click=${this.handleOpenClick}
-      @keydown=${this.handleOpenKeydown}>
-      ${this.#renderContent()}
-    </div>`;
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    return html`
+      <div
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        ${this.#renderContent()}
+      </div>
+    `;
   }
 
   #renderLink() {
-    return html`<a
-      id="open-part"
-      tabindex=${this.disabled ? (nothing as any) : '0'}
-      href=${ifDefined(!this.disabled ? this.href : undefined)}
-      target=${ifDefined(this.target || undefined)}
-      rel=${ifDefined(
-        this.rel ||
-          ifDefined(
-            this.target === '_blank' ? 'noopener noreferrer' : undefined,
-          ),
-      )}>
-      ${this.#renderContent()}
-    </a>`;
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    return html`
+      <a
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        href=${ifDefined(!this.disabled ? this.href : undefined)}
+        target=${ifDefined(this.target || undefined)}
+        rel=${ifDefined(
+          this.rel ||
+            ifDefined(
+              this.target === '_blank' ? 'noopener noreferrer' : undefined,
+            ),
+        )}>
+        ${this.#renderContent()}
+      </a>
+    `;
   }
 
   #renderContent() {