@nectary/components 5.1.2 → 5.1.4

package/bundle.js

@@ -1054,7 +1054,7 @@ class CodeTag extends NectaryElement {
   }
 }
 defineCustomElement("sinch-code-tag", CodeTag);
-const templateHTML$13 = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span> <span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
+const templateHTML$13 = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer"><span id="content"></span> <span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
 const template$13 = document.createElement("template");
 template$13.innerHTML = templateHTML$13;
 class Link extends NectaryElement {
@@ -1068,7 +1068,6 @@ class Link extends NectaryElement {
     this.#$text = shadowRoot.querySelector("#content");
   }
   connectedCallback() {
-    this.setAttribute("role", "link");
     this.#$anchor.addEventListener("click", this.#onAnchorClick);
     this.#$anchor.addEventListener("focus", this.#onAnchorFocus);
     this.#$anchor.addEventListener("blur", this.#onAnchorBlur);
@@ -10494,12 +10493,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 +10578,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 +10606,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 +10626,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 +10722,8 @@ template$i.innerHTML = templateHTML$i;
 class SegmentedIconControl extends NectaryElement {
   #$slot;
   #controller = null;
+  #keyboardNav = createKeyboardNavigation();
+  #enabledOptions = [];
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -10667,10 +10735,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 +10769,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 +10790,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/link/index.js

@@ -2,7 +2,7 @@ import "../icon/index.js";
 import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, getAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span> <span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer"><span id="content"></span> <span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Link extends NectaryElement {
@@ -16,7 +16,6 @@ class Link extends NectaryElement {
     this.#$text = shadowRoot.querySelector("#content");
   }
   connectedCallback() {
-    this.setAttribute("role", "link");
     this.#$anchor.addEventListener("click", this.#onAnchorClick);
     this.#$anchor.addEventListener("focus", this.#onAnchorFocus);
     this.#$anchor.addEventListener("blur", this.#onAnchorBlur);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.1.2",
+  "version": "5.1.4",
   "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
+};