@nectary/components 5.1.2 → 5.1.3

package/bundle.js

@@ -10494,12 +10494,80 @@ class SegmentedControlOption extends NectaryElement {
   };
 }
 defineCustomElement("sinch-segmented-control-option", SegmentedControlOption);
+function getActualActiveElement() {
+  let activeElement = document.activeElement;
+  while (activeElement?.shadowRoot?.activeElement != null) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement;
+}
+function createKeyboardNavigation() {
+  return {
+    navigateToNextOption(enabledOptions, forward) {
+      const optionsLength = enabledOptions.length;
+      if (optionsLength === 0) {
+        return;
+      }
+      const currentIndex = enabledOptions.findIndex((option) => option === getActualActiveElement());
+      let nextIndex;
+      if (currentIndex !== -1) {
+        if (forward) {
+          nextIndex = (currentIndex + 1) % optionsLength;
+        } else {
+          nextIndex = currentIndex === 0 ? optionsLength - 1 : currentIndex - 1;
+        }
+      } else {
+        nextIndex = forward ? 0 : optionsLength - 1;
+      }
+      this.navigateToOption(enabledOptions, nextIndex);
+    },
+    navigateToOption(enabledOptions, index) {
+      const optionsLength = enabledOptions.length;
+      if (enabledOptions.length === 0 || index < 0 || index >= optionsLength) {
+        return;
+      }
+      const option = enabledOptions[index];
+      option.focus();
+    },
+    handleKeyboardNavigation(e, enabledOptions) {
+      switch (e.code) {
+        case "Space":
+        case "Enter": {
+          e.preventDefault();
+          const target = getTargetByAttribute(e, "value");
+          if (target !== null) {
+            target.click();
+          }
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowRight": {
+          e.preventDefault();
+          this.navigateToNextOption(enabledOptions, e.code === "ArrowRight");
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          this.navigateToOption(enabledOptions, 0);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          this.navigateToOption(enabledOptions, enabledOptions.length - 1);
+          break;
+        }
+      }
+    }
+  };
+}
 const templateHTML$k = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
 const template$k = document.createElement("template");
 template$k.innerHTML = templateHTML$k;
 class SegmentedControl extends NectaryElement {
   #$slot;
   #controller = null;
+  #enabledOptions = [];
+  #keyboardNav = createKeyboardNavigation();
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -10511,10 +10579,12 @@ class SegmentedControl extends NectaryElement {
     const { signal } = this.#controller;
     const options = { signal };
     this.setAttribute("role", "tablist");
+    this.setAttribute("aria-orientation", "horizontal");
     this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
     this.#$slot.addEventListener("click", this.#onOptionClick, options);
     this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
     this.addEventListener("-change", this.#onChangeReactHandler);
+    this.#updateEnabledOptions();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -10537,8 +10607,14 @@ class SegmentedControl extends NectaryElement {
   get value() {
     return getAttribute(this, "value", "");
   }
+  #updateEnabledOptions = () => {
+    this.#enabledOptions = Array.from(this.#$slot.assignedElements()).filter(
+      (option) => !getBooleanAttribute(option, "disabled")
+    );
+  };
   #onSlotChange = () => {
     this.#onValueChange(this.value);
+    this.#updateEnabledOptions();
   };
   #onOptionClick = (e) => {
     const target = getTargetByAttribute(e, "value");
@@ -10551,16 +10627,7 @@ class SegmentedControl extends NectaryElement {
     );
   };
   #onOptionKeydown = (e) => {
-    switch (e.code) {
-      case "Space":
-      case "Enter": {
-        e.preventDefault();
-        const target = getTargetByAttribute(e, "value");
-        if (target !== null) {
-          target.click();
-        }
-      }
-    }
+    this.#keyboardNav.handleKeyboardNavigation(e, this.#enabledOptions);
   };
   #onValueChange(value) {
     for (const $option of this.#$slot.assignedElements()) {
@@ -10656,6 +10723,8 @@ template$i.innerHTML = templateHTML$i;
 class SegmentedIconControl extends NectaryElement {
   #$slot;
   #controller = null;
+  #keyboardNav = createKeyboardNavigation();
+  #enabledOptions = [];
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -10667,10 +10736,12 @@ class SegmentedIconControl extends NectaryElement {
     const { signal } = this.#controller;
     const options = { signal };
     this.setAttribute("role", "tablist");
+    this.setAttribute("aria-orientation", "horizontal");
     this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
     this.#$slot.addEventListener("click", this.#onOptionClick, options);
     this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
     this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.#updateEnabledOptions();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -10699,8 +10770,14 @@ class SegmentedIconControl extends NectaryElement {
   get multiple() {
     return getBooleanAttribute(this, "multiple");
   }
+  #updateEnabledOptions = () => {
+    this.#enabledOptions = Array.from(this.#$slot.assignedElements()).filter(
+      (option) => !getBooleanAttribute(option, "disabled")
+    );
+  };
   #onSlotChange = () => {
     this.#onValueChange(this.value);
+    this.#updateEnabledOptions();
   };
   #onOptionClick = (e) => {
     const target = getTargetByAttribute(e, "value");
@@ -10714,16 +10791,7 @@ class SegmentedIconControl extends NectaryElement {
     );
   };
   #onOptionKeydown = (e) => {
-    switch (e.code) {
-      case "Space":
-      case "Enter": {
-        e.preventDefault();
-        const target = getTargetByAttribute(e, "value");
-        if (target !== null) {
-          target.click();
-        }
-      }
-    }
+    this.#keyboardNav.handleKeyboardNavigation(e, this.#enabledOptions);
   };
   #onValueChange(csv) {
     if (this.multiple) {

package/package.json

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

package/segmented-control/index.js

@@ -2,12 +2,15 @@ import { updateAttribute, getAttribute, getBooleanAttribute, updateBooleanAttrib
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { getTargetByAttribute } from "../utils/event-target.js";
+import { createKeyboardNavigation } from "../utils/control-keyboard-navigation.js";
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SegmentedControl extends NectaryElement {
   #$slot;
   #controller = null;
+  #enabledOptions = [];
+  #keyboardNav = createKeyboardNavigation();
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -19,10 +22,12 @@ class SegmentedControl extends NectaryElement {
     const { signal } = this.#controller;
     const options = { signal };
     this.setAttribute("role", "tablist");
+    this.setAttribute("aria-orientation", "horizontal");
     this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
     this.#$slot.addEventListener("click", this.#onOptionClick, options);
     this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
     this.addEventListener("-change", this.#onChangeReactHandler);
+    this.#updateEnabledOptions();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -45,8 +50,14 @@ class SegmentedControl extends NectaryElement {
   get value() {
     return getAttribute(this, "value", "");
   }
+  #updateEnabledOptions = () => {
+    this.#enabledOptions = Array.from(this.#$slot.assignedElements()).filter(
+      (option) => !getBooleanAttribute(option, "disabled")
+    );
+  };
   #onSlotChange = () => {
     this.#onValueChange(this.value);
+    this.#updateEnabledOptions();
   };
   #onOptionClick = (e) => {
     const target = getTargetByAttribute(e, "value");
@@ -59,16 +70,7 @@ class SegmentedControl extends NectaryElement {
     );
   };
   #onOptionKeydown = (e) => {
-    switch (e.code) {
-      case "Space":
-      case "Enter": {
-        e.preventDefault();
-        const target = getTargetByAttribute(e, "value");
-        if (target !== null) {
-          target.click();
-        }
-      }
-    }
+    this.#keyboardNav.handleKeyboardNavigation(e, this.#enabledOptions);
   };
   #onValueChange(value) {
     for (const $option of this.#$slot.assignedElements()) {

package/segmented-icon-control/index.js

@@ -3,12 +3,15 @@ import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttrib
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { getTargetByAttribute } from "../utils/event-target.js";
+import { createKeyboardNavigation } from "../utils/control-keyboard-navigation.js";
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SegmentedIconControl extends NectaryElement {
   #$slot;
   #controller = null;
+  #keyboardNav = createKeyboardNavigation();
+  #enabledOptions = [];
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -20,10 +23,12 @@ class SegmentedIconControl extends NectaryElement {
     const { signal } = this.#controller;
     const options = { signal };
     this.setAttribute("role", "tablist");
+    this.setAttribute("aria-orientation", "horizontal");
     this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
     this.#$slot.addEventListener("click", this.#onOptionClick, options);
     this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
     this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.#updateEnabledOptions();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -52,8 +57,14 @@ class SegmentedIconControl extends NectaryElement {
   get multiple() {
     return getBooleanAttribute(this, "multiple");
   }
+  #updateEnabledOptions = () => {
+    this.#enabledOptions = Array.from(this.#$slot.assignedElements()).filter(
+      (option) => !getBooleanAttribute(option, "disabled")
+    );
+  };
   #onSlotChange = () => {
     this.#onValueChange(this.value);
+    this.#updateEnabledOptions();
   };
   #onOptionClick = (e) => {
     const target = getTargetByAttribute(e, "value");
@@ -67,16 +78,7 @@ class SegmentedIconControl extends NectaryElement {
     );
   };
   #onOptionKeydown = (e) => {
-    switch (e.code) {
-      case "Space":
-      case "Enter": {
-        e.preventDefault();
-        const target = getTargetByAttribute(e, "value");
-        if (target !== null) {
-          target.click();
-        }
-      }
-    }
+    this.#keyboardNav.handleKeyboardNavigation(e, this.#enabledOptions);
   };
   #onValueChange(csv) {
     if (this.multiple) {

package/utils/control-keyboard-navigation.d.ts

@@ -0,0 +1,5 @@
+export declare function createKeyboardNavigation(): {
+    navigateToNextOption(enabledOptions: Element[], forward: boolean): void;
+    navigateToOption(enabledOptions: Element[], index: number): void;
+    handleKeyboardNavigation(e: KeyboardEvent, enabledOptions: Element[]): void;
+};

package/utils/control-keyboard-navigation.js

@@ -0,0 +1,70 @@
+import { getTargetByAttribute } from "./event-target.js";
+function getActualActiveElement() {
+  let activeElement = document.activeElement;
+  while (activeElement?.shadowRoot?.activeElement != null) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement;
+}
+function createKeyboardNavigation() {
+  return {
+    navigateToNextOption(enabledOptions, forward) {
+      const optionsLength = enabledOptions.length;
+      if (optionsLength === 0) {
+        return;
+      }
+      const currentIndex = enabledOptions.findIndex((option) => option === getActualActiveElement());
+      let nextIndex;
+      if (currentIndex !== -1) {
+        if (forward) {
+          nextIndex = (currentIndex + 1) % optionsLength;
+        } else {
+          nextIndex = currentIndex === 0 ? optionsLength - 1 : currentIndex - 1;
+        }
+      } else {
+        nextIndex = forward ? 0 : optionsLength - 1;
+      }
+      this.navigateToOption(enabledOptions, nextIndex);
+    },
+    navigateToOption(enabledOptions, index) {
+      const optionsLength = enabledOptions.length;
+      if (enabledOptions.length === 0 || index < 0 || index >= optionsLength) {
+        return;
+      }
+      const option = enabledOptions[index];
+      option.focus();
+    },
+    handleKeyboardNavigation(e, enabledOptions) {
+      switch (e.code) {
+        case "Space":
+        case "Enter": {
+          e.preventDefault();
+          const target = getTargetByAttribute(e, "value");
+          if (target !== null) {
+            target.click();
+          }
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowRight": {
+          e.preventDefault();
+          this.navigateToNextOption(enabledOptions, e.code === "ArrowRight");
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          this.navigateToOption(enabledOptions, 0);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          this.navigateToOption(enabledOptions, enabledOptions.length - 1);
+          break;
+        }
+      }
+    }
+  };
+}
+export {
+  createKeyboardNavigation
+};