@nectary/components 5.29.2 → 5.30.0

package/bundle.js

@@ -2348,9 +2348,12 @@ class Button extends NectaryElement {
     super.connectedCallback();
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    this.setAttribute("role", "button");
-    this.#internals.role = "button";
-    this.tabIndex = 0;
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "button");
+    }
     this.addEventListener("click", this.#onButtonClick, { signal });
     this.addEventListener("focus", this.#onButtonFocus, { signal });
     this.addEventListener("blur", this.#onButtonBlur, { signal });
@@ -2374,7 +2377,9 @@ class Button extends NectaryElement {
       "toggled",
       "size",
       "data-size",
-      "data-managed-aria-disabled"
+      "data-managed-aria-disabled",
+      "role",
+      "tabindex"
     ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
@@ -2412,6 +2417,33 @@ class Button extends NectaryElement {
         this.#onSizeUpdate();
         break;
       }
+      case "role": {
+        if (isAttrEqual(oldVal, newVal)) {
+          break;
+        }
+        const effectiveRole = newVal !== null && newVal !== "" ? newVal : "button";
+        this.#internals.role = effectiveRole;
+        if (newVal === null || newVal === "") {
+          this.setAttribute("role", "button");
+        }
+        break;
+      }
+      case "tabindex": {
+        if (newVal === null) {
+          if (this.isDomConnected) {
+            this.setAttribute("tabindex", "0");
+          }
+          break;
+        }
+        if (isAttrEqual(oldVal, newVal)) {
+          break;
+        }
+        const parsed = Number.parseInt(newVal, 10);
+        if (Number.isNaN(parsed)) {
+          this.setAttribute("tabindex", "0");
+        }
+        break;
+      }
     }
   }
   set type(value) {

package/button/index.js

@@ -1,5 +1,5 @@
 import { Context, subscribeContext } from "../utils/context.js";
-import { updateAttribute, isAttrEqual, updateBooleanAttribute, isAttrTrue, updateLiteralAttribute, getLiteralAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, updateLiteralAttribute, getLiteralAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { requestSubmitForm } from "../utils/form.js";
@@ -28,9 +28,12 @@ class Button extends NectaryElement {
     super.connectedCallback();
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    this.setAttribute("role", "button");
-    this.#internals.role = "button";
-    this.tabIndex = 0;
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "button");
+    }
     this.addEventListener("click", this.#onButtonClick, { signal });
     this.addEventListener("focus", this.#onButtonFocus, { signal });
     this.addEventListener("blur", this.#onButtonBlur, { signal });
@@ -54,7 +57,9 @@ class Button extends NectaryElement {
       "toggled",
       "size",
       "data-size",
-      "data-managed-aria-disabled"
+      "data-managed-aria-disabled",
+      "role",
+      "tabindex"
     ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
@@ -92,6 +97,33 @@ class Button extends NectaryElement {
         this.#onSizeUpdate();
         break;
       }
+      case "role": {
+        if (isAttrEqual(oldVal, newVal)) {
+          break;
+        }
+        const effectiveRole = newVal !== null && newVal !== "" ? newVal : "button";
+        this.#internals.role = effectiveRole;
+        if (newVal === null || newVal === "") {
+          this.setAttribute("role", "button");
+        }
+        break;
+      }
+      case "tabindex": {
+        if (newVal === null) {
+          if (this.isDomConnected) {
+            this.setAttribute("tabindex", "0");
+          }
+          break;
+        }
+        if (isAttrEqual(oldVal, newVal)) {
+          break;
+        }
+        const parsed = Number.parseInt(newVal, 10);
+        if (Number.isNaN(parsed)) {
+          this.setAttribute("tabindex", "0");
+        }
+        break;
+      }
     }
   }
   set type(value) {

package/button/types.d.ts

@@ -5,6 +5,10 @@ export type TSinchButtonType = 'primary' | 'secondary'
 /** @deprecated */
  | 'tertiary' | 'subtle-primary' | 'subtle-secondary' | 'cta-primary' | 'cta-secondary' | 'destructive';
 export type TSinchButtonProps = {
+    /** ARIA role, `button` by default. Curated union for common use cases; hosts can still set other roles in HTML. */
+    role?: 'button' | 'tab' | 'menuitem' | 'switch' | 'link' | 'option';
+    /** Keyboard navigation order, `0` by default */
+    tabIndex?: number;
     /** Button Type */
     type?: TSinchButtonType;
     /** Size, `m` by default */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.29.2",
+  "version": "5.30.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",