openkeynav
Version:
OpenKeyNav: A JavaScript plugin for enhancing keyboard navigation and accessibility on web pages.
1 lines • 87.5 kB
JavaScript
(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):(global=typeof globalThis!=="undefined"?globalThis:global||self,global.OpenKeyNav=factory())})(this,(function(){"use strict";function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,"default")?x["default"]:x}var OpenKeyNav$1={};var version={};Object.defineProperty(version,"__esModule",{value:true});version.version=void 0;version.version="0.1.229";var signals={};Object.defineProperty(signals,"__esModule",{value:true});signals.derived=derived;signals.effect=effect;signals.signal=signal;var subscriber=null;function signal(value){var subscriptions=new Set;return{get value(){if(subscriber){subscriptions.add(subscriber)}return value},set value(updated){value=updated;subscriptions.forEach((function(fn){return fn()}))}}}function effect(fn){subscriber=fn;fn();subscriber=null}function derived(fn){var derived=signal();effect((function(){derived.value=fn()}));return derived}var toolbar={};var keyButton={};Object.defineProperty(keyButton,"__esModule",{value:true});keyButton.keyButton=void 0;keyButton.keyButton=function keyButton(keyCodes,text,reverseOrder){var styledKeyCodes=keyCodes.map((function(keyCode){return'<span class="keyButton">'.concat(keyCode,"</span>")})).join("");if(!text){return"".concat(styledKeyCodes)}if(reverseOrder){return'\n <span class="keyButtonContainer"> \n <span>\n '.concat(styledKeyCodes,'\n </span>\n <span class="keyButtonLabel">').concat(text,"</span> \n </span>\n ")}return'\n <span class="keyButtonContainer"> \n <span class="keyButtonLabel">'.concat(text,"</span> \n <span>\n ").concat(styledKeyCodes,"\n </span>\n </span>\n ")};var keypress={};var clicking={};var hasRequiredClicking;function requireClicking(){if(hasRequiredClicking)return clicking;hasRequiredClicking=1;Object.defineProperty(clicking,"__esModule",{value:true});clicking.placeCursorAndScrollToCursor=clicking.handleTargetClickInteraction=void 0;_interopRequireDefault(requireOpenKeyNav());function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}clicking.handleTargetClickInteraction=function handleTargetClickInteraction(openKeyNav,target,e){var doc=target.ownerDocument;var win=doc.defaultView||doc.parentWindow;var target_tagName=target.tagName.toLowerCase();if(target_tagName==="input"||target_tagName==="textarea"||target.contentEditable==="true"||target.contentEditable==="plaintext-only"||target.hasAttribute("tabindex")&&target.tabIndex>-1){placeCursorAndScrollToCursor(openKeyNav,target)}else{if(e.shiftKey&&target.tagName.toLowerCase()==="a"&&target.href){win.open(target.href,"_blank")}else{openKeyNav.focus(target);if(!openKeyNav.config.modesConfig.click.modifier){var clickEvent=new MouseEvent("click",{bubbles:true,cancelable:true,view:win});target.dispatchEvent(clickEvent)}}}openKeyNav.removeOverlays();openKeyNav.clearMoveAttributes()};var placeCursorAndScrollToCursor=clicking.placeCursorAndScrollToCursor=function placeCursorAndScrollToCursor(openKeyNav,target){var targetTagName=target.tagName.toLowerCase();setTimeout((function(){openKeyNav.focus(target);if(targetTagName==="input"&&["text","search","url","tel","email","password"].indexOf(target.type)>-1||targetTagName==="textarea"){var valueLength=target.value.length;target.selectionStart=valueLength;target.selectionEnd=valueLength;target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}else if(target.contentEditable==="true"||target.contentEditable==="plaintext-only"){var range=document.createRange();var sel=window.getSelection();range.selectNodeContents(target);range.collapse(false);sel.removeAllRanges();sel.addRange(range);var rect=range.getBoundingClientRect();if(rect.bottom>window.innerHeight||rect.top<0){target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}}}),0)};return clicking}var dragAndDrop={};Object.defineProperty(dragAndDrop,"__esModule",{value:true});dragAndDrop.simulateDragAndDrop=dragAndDrop.endDrag=dragAndDrop.beginDrag=void 0;function _createForOfIteratorHelper(r,e){var t="undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(!t){if(Array.isArray(r)||(t=_unsupportedIterableToArray$1(r))||e){t&&(r=t);var _n=0,F=function F(){};return{s:F,n:function n(){return _n>=r.length?{done:!0}:{done:!1,value:r[_n++]}},e:function e(r){throw r},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,u=!1;return{s:function s(){t=t.call(r)},n:function n(){var r=t.next();return a=r.done,r},e:function e(r){u=!0,o=r},f:function f(){try{a||null==t.return||t.return()}finally{if(u)throw o}}}}function _unsupportedIterableToArray$1(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray$1(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray$1(r,a):void 0}}function _arrayLikeToArray$1(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}dragAndDrop.simulateDragAndDrop=function simulateDragAndDrop(openKeyNav,sourceElement,targetElement){var handleStickyMove=function handleStickyMove(){function findMatchingElementByHTML(htmlString){function removeComments(htmlString){return htmlString.replace(/<!--[\s\S]*?-->/g,"")}var cleanedHTMLString=removeComments(htmlString);var allElements=document.querySelectorAll("*");var _iterator=_createForOfIteratorHelper(allElements),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var element=_step.value;var cleanedElementHTML=removeComments(element.innerHTML);if(cleanedElementHTML===cleanedHTMLString){return element}}}catch(err){_iterator.e(err)}finally{_iterator.f()}return null}if(!openKeyNav.config.modesConfig.move.modifier){return false}openKeyNav.config.typedLabel.value="";openKeyNav.config.modesConfig.move.selectedDropZone=false;if(!document.contains(openKeyNav.config.modesConfig.move.selectedMoveable)){var matchingElement=findMatchingElementByHTML(openKeyNav.config.modesConfig.move.selectedMoveableHTML);var selectedConfig=openKeyNav.config.modesConfig.move.config[openKeyNav.config.modesConfig.move.selectedConfig];var passesInclusionCriteria=matchingElement&&matchingElement.matches(selectedConfig.fromElements)||matchingElement.matches(selectedConfig.fromContainer+" > *");var passesExclusionCriteria=matchingElement&&!matchingElement.matches(selectedConfig.fromExclude);if(passesInclusionCriteria&&passesExclusionCriteria){console.log("Matching element found:",matchingElement);openKeyNav.config.modesConfig.move.selectedMoveable=matchingElement;openKeyNav.config.modesConfig.move.selectedMoveableHTML=matchingElement.innerHTML;openKeyNav.updateOverlayPosition(matchingElement,openKeyNav.config.modesConfig.move.selectedLabel);beginDrag(openKeyNav)}else{console.log("No matching element found.");openKeyNav.removeOverlays(true);openKeyNav.clearMoveAttributes()}}};endDrag(openKeyNav,targetElement);handleStickyMove()};var endDrag=dragAndDrop.endDrag=function endDrag(openKeyNav,targetElement){var dataTransfer=new DataTransfer;var clientX=0;var clientY=0;var sourceElement=openKeyNav.config.modesConfig.move.selectedMoveable;if(typeof TouchEvent==="undefined"){openKeyNav.setupTouchEvent()}if(!sourceElement){sourceElement=document.body}if(!targetElement){targetElement=document.body}var rectTarget=targetElement.getBoundingClientRect();if(targetElement!=document){clientX=rectTarget.left+rectTarget.width/2;clientY=rectTarget.top+rectTarget.height/2}var mouseMoveEvent=new MouseEvent("mousemove",{bubbles:true,cancelable:true,clientX:clientX,clientY:clientY});var touchMoveEvent=new TouchEvent("touchmove",{bubbles:true,cancelable:true,touches:[new Touch({identifier:Date.now(),target:targetElement,clientX:clientX,clientY:clientY})]});var dragEnterEvent=new DragEvent("dragenter",{bubbles:true,cancelable:true,clientX:clientX,clientY:clientY,dataTransfer:dataTransfer});Object.defineProperty(dragEnterEvent,"dataTransfer",{value:dataTransfer});var dragOverEvent=new DragEvent("dragover",{bubbles:true,cancelable:true,clientX:clientX,clientY:clientY,dataTransfer:dataTransfer});Object.defineProperty(dragOverEvent,"dataTransfer",{value:dataTransfer});var dropEvent=new DragEvent("drop",{bubbles:true,cancelable:true,clientX:clientX,clientY:clientY,dataTransfer:dataTransfer});Object.defineProperty(dropEvent,"dataTransfer",{value:dataTransfer});var dragEndEvent=new DragEvent("dragend",{bubbles:true,cancelable:true,clientX:clientX,clientY:clientY,dataTransfer:dataTransfer});Object.defineProperty(dragEndEvent,"dataTransfer",{value:dataTransfer});var mouseUpEvent=new MouseEvent("mouseup",{bubbles:true,cancelable:true,clientX:clientX,clientY:clientY});var touchEndEvent=new TouchEvent("touchend",{bubbles:true,cancelable:true,changedTouches:[new Touch({identifier:Date.now(),target:targetElement,clientX:clientX,clientY:clientY})]});try{document.dispatchEvent(mouseMoveEvent)}catch(error){console.log(error)}try{document.dispatchEvent(touchMoveEvent)}catch(error){console.log(error)}try{targetElement.dispatchEvent(dragEnterEvent)}catch(error){console.log(error)}try{targetElement.dispatchEvent(dragOverEvent)}catch(error){console.log(error)}try{if(targetElement!=document){targetElement.dispatchEvent(dropEvent)}}catch(error){console.log(error)}try{sourceElement.dispatchEvent(dragEndEvent)}catch(error){console.log(error)}targetElement.dispatchEvent(mouseUpEvent);targetElement.dispatchEvent(touchEndEvent)};var beginDrag=dragAndDrop.beginDrag=function beginDrag(openKeyNav){var sourceElement=openKeyNav.config.modesConfig.move.selectedMoveable;var rectSource=sourceElement.getBoundingClientRect();var dataTransfer=new DataTransfer;if(typeof TouchEvent==="undefined"){openKeyNav.setupTouchEvent()}var mouseDownEvent=new MouseEvent("mousedown",{bubbles:true,cancelable:true,clientX:rectSource.left+rectSource.width/2,clientY:rectSource.top+rectSource.height/2});sourceElement.dispatchEvent(mouseDownEvent);var touchStartEvent=new TouchEvent("touchstart",{bubbles:true,cancelable:true,touches:[new Touch({identifier:Date.now(),target:sourceElement,clientX:rectSource.left+rectSource.width/2,clientY:rectSource.top+rectSource.height/2})]});sourceElement.dispatchEvent(touchStartEvent);var mouseMoveEvent=new MouseEvent("mousemove",{bubbles:true,cancelable:true,clientX:rectSource.left+rectSource.width/2+10,clientY:rectSource.top+rectSource.height/2+10});document.dispatchEvent(mouseMoveEvent);var dragStartEvent=new DragEvent("dragstart",{bubbles:true,cancelable:true,clientX:rectSource.left+rectSource.width/2+10,clientY:rectSource.top+rectSource.height/2+10,dataTransfer:dataTransfer});Object.defineProperty(dragStartEvent,"dataTransfer",{value:dataTransfer});sourceElement.dispatchEvent(dragStartEvent)};var _escape$1={};Object.defineProperty(_escape$1,"__esModule",{value:true});_escape$1.handleEscape=void 0;var _dragAndDrop=dragAndDrop;_escape$1.handleEscape=function handleEscape(openKeyNav,e){var returnFalse=false;if(openKeyNav.config.modes.clicking.value||openKeyNav.config.modes.moving.value||openKeyNav.config.modes.menu.value){e.preventDefault();e.stopPropagation();(0,_dragAndDrop.endDrag)(openKeyNav);openKeyNav.removeOverlays();openKeyNav.clearMoveAttributes();returnFalse=true}if(openKeyNav.isTextInputActive()){document.activeElement.blur()}if(returnFalse){return false}else{if(document.activeElement!=document.body){document.activeElement.blur()}}};var focus={};Object.defineProperty(focus,"__esModule",{value:true});focus.focusOnScrollables=focus.focusOnHeadings=void 0;focus.focusOnHeadings=function focusOnHeadings(openKeyNav,headings,e){openKeyNav.config.headings.list=Array.from(document.querySelectorAll(headings)).filter((function(el){var style=getComputedStyle(el);if(style.display==="none"||style.visibility==="hidden")return false;if(!openKeyNav.config.debug.screenReaderVisible){if(!openKeyNav.isAnyCornerVisible(el)){return false}}return true}));if(openKeyNav.config.headings.list.length==0){return true}if(e.shiftKey){if(openKeyNav.config.headings.currentHeadingIndex>0){openKeyNav.config.headings.currentHeadingIndex--}else{openKeyNav.config.headings.currentHeadingIndex=openKeyNav.config.headings.list.length-1}}else{if(openKeyNav.config.headings.currentHeadingIndex<openKeyNav.config.headings.list.length-1){openKeyNav.config.headings.currentHeadingIndex++}else{openKeyNav.config.headings.currentHeadingIndex=0}}var nextHeading=openKeyNav.config.headings.list[openKeyNav.config.headings.currentHeadingIndex];if(!nextHeading.hasAttribute("tabindex")){nextHeading.setAttribute("tabindex","-1");nextHeading.setAttribute("data-openkeynav-tabIndexed",true)}openKeyNav.focus(nextHeading);nextHeading.addEventListener("blur",(function handler(){if(nextHeading.hasAttribute("data-openkeynav-tabIndexed")){nextHeading.removeAttribute("tabindex");nextHeading.removeAttribute("data-openkeynav-tabIndexed")}nextHeading.removeEventListener("blur",handler)}))};focus.focusOnScrollables=function focusOnScrollables(openKeyNav,e){openKeyNav.config.scrollables.list=openKeyNav.getScrollableElements();if(openKeyNav.config.scrollables.list.length==0){return}{if(e.shiftKey){openKeyNav.config.currentScrollableIndex=openKeyNav.config.currentScrollableIndex>0?openKeyNav.config.currentScrollableIndex-1:openKeyNav.config.scrollables.list.length-1}else{openKeyNav.config.currentScrollableIndex=openKeyNav.config.currentScrollableIndex<openKeyNav.config.scrollables.list.length-1?openKeyNav.config.currentScrollableIndex+1:0}}var currentScrollable=openKeyNav.config.scrollables.list[openKeyNav.config.currentScrollableIndex];if(!currentScrollable.hasAttribute("tabindex")){currentScrollable.setAttribute("tabindex","-1");currentScrollable.setAttribute("data-openkeynav-tabIndexed",true)}openKeyNav.focus(currentScrollable);currentScrollable.addEventListener("blur",(function handler(){if(currentScrollable.hasAttribute("data-openkeynav-tabIndexed")){currentScrollable.removeAttribute("tabindex");currentScrollable.removeAttribute("data-openkeynav-tabIndexed")}currentScrollable.removeEventListener("blur",handler)}))};var isTabbable={};Object.defineProperty(isTabbable,"__esModule",{value:true});isTabbable.isTabbable=void 0;var isHiddenByOverflow=function isHiddenByOverflow(element){var parent=element.parentNode;var doc=element.ownerDocument;var body=doc.body;while(parent&&parent!==body){var parentStyle=getComputedStyle(parent);if(["scroll","auto"].includes(parentStyle.overflow)||["scroll","auto"].includes(parentStyle.overflowX)||["scroll","auto"].includes(parentStyle.overflowY)){var parentRect=parent.getBoundingClientRect();var rect=element.getBoundingClientRect();if(rect.bottom<parentRect.top||rect.top>parentRect.bottom||rect.right<parentRect.left||rect.left>parentRect.right){return true}}parent=parent.parentNode}return false};var inViewport=function inViewport(el){var rect=el.getBoundingClientRect();var isInViewport=rect.top<window.innerHeight&&rect.left<window.innerWidth&&rect.bottom>0&&rect.right>0;return isInViewport};isTabbable.isTabbable=function isTabbable(el,openKeyNav){var clickableElements=["a","button","textarea","select","input","iframe","summary","[onclick]"];var interactiveRoles=["button","link","menuitem","option","tab","treeitem","checkbox","radio"];var isTypicallyClickableElement=function isTypicallyClickableElement(el){if(el.matches(clickableElements.join())){return true}var role=el.getAttribute("role");if(role&&interactiveRoles.includes(role)){return true}return false};if(!(el instanceof Element)){return false}var style=getComputedStyle(el);if(style.display==="none"){return false}if(isHiddenByOverflow(el)){return false}if(el.matches("details:not([open]) *")&&!el.matches("details:not([open]) > summary, details:not([open]) > summary *")){return false}var tabIndex=el.getAttribute("tabindex");if(tabIndex&&parseInt(tabIndex,10)>-1){return true}if(style.visibility==="hidden"){return false}if(!openKeyNav.isNonzeroSize(el)){return false}if(!inViewport(el)){return false}if(!openKeyNav.config.debug.screenReaderVisible){if(!openKeyNav.isAnyCornerVisible(el)){return false}}if(el.tagName.toLowerCase()==="summary"){var details=el.parentElement;if(details&&details.tagName.toLowerCase()==="details"&&details.querySelector("summary")!==el){return false}}if(tabIndex&&parseInt(tabIndex,10)==-1){if(isTypicallyClickableElement(el)){openKeyNav.flagAsInaccessible(el,"\n <h2>Inaccessible Element</h2>\n <h3>Problem: </h3>\n <p>This element is not keyboard-focusable.</p>\n <h3>Solution: </h3>\n <p>Since this element has a tabindex attribute set to -1, it cannot be keyboard focusable.</p>\n <p>It must have a tabindex set to a value > -1, ideally 0.</p>\n <p>You can ignore this warning if this element is not meant to be clickable.</p>\n ","keyboard")}}var role=el.getAttribute("role");switch(el.tagName.toLowerCase()){case"a":if(!el.hasAttribute("href")||el.getAttribute("href")===""){if(!interactiveRoles.includes(role)){openKeyNav.flagAsInaccessible(el,"\n <h2>Inaccessible Button</h2>\n <h3>Problem: </h3>\n <p>This clickable button is not keyboard-focusable.</p>\n <p>As a result, only mouse users can click on it.</p>\n <p>This usability disparity can create an accessibility barrier.</p>\n <h3>Solution: </h3>\n <p>Since it is an anchor tag (<a>), it needs a non-empty <em>href</em> attribute.</p>\n <p>Alternatively, it needs an ARIA <em>role</em> attribute set to something like 'button' or 'link' AND a tabindex attribute set to a value > -1, ideally 0.</p>\n ","keyboard")}}break;case"button":case"textarea":case"select":case"input":case"iframe":case"summary":break;default:if(!!role&&!interactiveRoles.includes(role)){if(openKeyNav.config.modesConfig.click.clickEventElements.has(el)){openKeyNav.flagAsInaccessible(el,"\n \x3c!--\n !el(a,button,textarea,select,input,iframe,summary)\n !el[role('button', 'link', 'menuitem', 'option', 'tab', 'treeitem', 'checkbox', 'radio')]\n fromClickEvents\n --\x3e\n <h2>Possibly Inaccessible Clickable Element</h2>\n <h3>Problem: </h3>\n <p>This element has a mouse click event handler attached to it, but it is not keyboard-focusable.</p>\n <p>As a result, only mouse users can click on it.</p>\n <p>This usability disparity can create an accessibility barrier.</p>\n <h3>Solution Options: </h3>\n <ol>\n <li>\n <p>If clicking this element takes the user to a different location, convert this element to an anchor link (<a>) with a non-empty <em>href</em> attribute.</p>\n </li>\n <li>\n <p>Otherwise if clicking this element triggers an action on the page, convert this element to a <button> without a <em>disabled</em> attribute.</p>\n <p>Alternatively, it needs an ARIA <em>role</em> attribute set to something like 'button' or 'link' AND a tabindex attribute set to a value > -1, ideally 0.</p>\n </li>\n <li>\n <p>Otherwise, if clicking this element does not do anything, then consider removing the click event handler attached to this element.</p>\n </li>\n </ol>\n ","keyboard")}}break}return true};var keylabels={};var scrolling={};Object.defineProperty(scrolling,"__esModule",{value:true});scrolling.disableScrolling=void 0;scrolling.disableScrolling=function disableScrolling(openKeyNav){var disableScrollingForEl=function disableScrollingForEl(el){el.addEventListener("scroll",openKeyNav.preventScroll,{passive:false});el.addEventListener("wheel",openKeyNav.preventScroll,{passive:false});el.addEventListener("touchmove",openKeyNav.preventScroll,{passive:false})};var disableScrollingForScrollableElements=function disableScrollingForScrollableElements(){disableScrollingForEl(window);openKeyNav.getScrollableElements().forEach((function(el){disableScrollingForEl(el)}))};disableScrollingForScrollableElements()};Object.defineProperty(keylabels,"__esModule",{value:true});keylabels.showMoveableFromOverlays=keylabels.showClickableOverlays=keylabels.generateValidKeyChars=keylabels.generateLabels=keylabels.filterRemainingOverlays=void 0;var _escape=_escape$1;var _isTabbable=isTabbable;var _scrolling=scrolling;function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}var generateLabels=keylabels.generateLabels=function generateLabels(openKeyNav,count){var labels=[];var chars=generateValidKeyChars(openKeyNav);var maxLength=Math.pow(chars.length,2);var useThirdChar=count>maxLength;if(useThirdChar){maxLength=Math.pow(chars.length,3)}for(var i=0;i<count&&labels.length<maxLength;i++){var firstChar=chars[i%chars.length];var secondChar=chars[Math.floor(i/chars.length)%chars.length]||"";var thirdChar=useThirdChar?chars[Math.floor(i/Math.pow(chars.length,2))%chars.length]:"";labels.push(firstChar+secondChar+thirdChar)}var labelCounts={};labels.forEach((function(label){var firstChar=label[0];labelCounts[firstChar]=(labelCounts[firstChar]||0)+1}));labels=labels.map((function(label){var firstChar=label[0];if(labelCounts[firstChar]===1&&!label.includes(".")){return firstChar}return label}));return labels};keylabels.showClickableOverlays=function showClickableOverlays(openKeyNav){(0,_scrolling.disableScrolling)(openKeyNav);setTimeout((function(){var clickables=_getAllCandidateElements(openKeyNav,document).filter((function(el){return(0,_isTabbable.isTabbable)(el,openKeyNav)}));var labels=generateLabels(openKeyNav,clickables.length);clickables.forEach((function(element,index){element.setAttribute("data-openkeynav-label",labels[index])}));clickables.forEach((function(element,index){openKeyNav.createOverlay(element,labels[index])}))}),0)};keylabels.showMoveableFromOverlays=function showMoveableFromOverlays(openKeyNav){var moveables=[];var fromElementSelectors=_toConsumableArray(new Set(openKeyNav.config.modesConfig.move.config.filter((function(config){return config.fromElements})).map((function(config){return config.fromElements}))));if(!!fromElementSelectors.length){document.querySelectorAll(fromElementSelectors.join(", ")).forEach((function(element){var config=openKeyNav.config.modesConfig.move.config.find((function(c){return element.matches(c.fromElements)}));if(config){var configKey=openKeyNav.config.modesConfig.move.config.indexOf(config);if(openKeyNav.isNonzeroSize(element)&&(!config.fromExclude||!element.matches(config.fromExclude))){element.setAttribute("data-openkeynav-moveconfig",configKey);moveables.push(element)}}}))}var fromContainerSelectors=_toConsumableArray(new Set(openKeyNav.config.modesConfig.move.config.filter((function(config){return config.fromContainer})).map((function(config){return config.fromContainer}))));if(!!fromContainerSelectors.length){var fromContainers=document.querySelectorAll(fromContainerSelectors.join(", "));fromContainers.forEach((function(container){var config=openKeyNav.config.modesConfig.move.config.find((function(c){return container.matches(c.fromContainer)}));if(config){var configKey=openKeyNav.config.modesConfig.move.config.indexOf(config);var children=Array.from(container.children);children.forEach((function(child){if(openKeyNav.isNonzeroSize(child)&&(!config.fromExclude||!child.matches(config.fromExclude))){child.setAttribute("data-openkeynav-moveconfig",configKey);moveables.push(child)}}))}}))}openKeyNav.config.modesConfig.move.config.forEach((function(config){if(config.resolveFromElements){var resolvedElements=config.resolveFromElements();resolvedElements.forEach((function(element){var configKey=openKeyNav.config.modesConfig.move.config.indexOf(config);if(openKeyNav.isNonzeroSize(element)&&(!config.fromExclude||!element.matches(config.fromExclude))){element.setAttribute("data-openkeynav-moveconfig",configKey);moveables.push(element)}}))}}));moveables=moveables.filter((function(el){return(0,_isTabbable.isTabbable)(el,openKeyNav)}));var labels=generateLabels(openKeyNav,moveables.length);moveables.forEach((function(element,index){element.setAttribute("data-openkeynav-label",labels[index])}));moveables.forEach((function(element,index){openKeyNav.createOverlay(element,labels[index]);element.setAttribute("data-openkeynav-draggable","true")}))};keylabels.filterRemainingOverlays=function filterRemainingOverlays(openKeyNav,e){document.querySelectorAll(".openKeyNav-label").forEach((function(overlay){var label=overlay.textContent;if(!label.startsWith(openKeyNav.config.typedLabel.value)){var targetElement=document.querySelector('[data-openkeynav-label="'.concat(label,'"]'));targetElement&&targetElement.removeAttribute("data-openkeynav-label");overlay.remove()}}));if(document.querySelectorAll(".openKeyNav-label").length==0){(0,_escape.handleEscape)(openKeyNav,e);return true}};var generateValidKeyChars=keylabels.generateValidKeyChars=function generateValidKeyChars(openKeyNav){var chars="abcdefghijklmnopqrstuvwxyz";chars=chars.replace(openKeyNav.config.keys.escape,"");return chars};var _getAllCandidateElements=function getAllCandidateElements(openKeyNav,doc){var allElements=Array.from(doc.querySelectorAll("a,"+"button:not([disabled]),"+"textarea:not([disabled]),"+"select:not([disabled]),"+"input:not([disabled]),"+"iframe,"+"details > summary,"+"[role=button],"+"[role=link],"+"[role=menuitem],"+"[role=option],"+"[role=tab],"+"[role=treeitem],"+"[role=checkbox],"+"[role=radio],"+"[aria-checked],"+"[contenteditable=true],"+"[contenteditable=plaintext-only],"+"[tabindex],"+"[onclick]"));var iframes=doc.querySelectorAll("iframe");iframes.forEach((function(iframe){try{var iframeDoc=iframe.contentDocument||iframe.contentWindow.document;var iframeElements=_getAllCandidateElements(openKeyNav,iframeDoc);allElements=allElements.concat(Array.from(iframeElements))}catch(error){console.log("Access denied to iframe content:",error)}}));var mergedSet=new Set([].concat(_toConsumableArray(allElements),_toConsumableArray(openKeyNav.config.modesConfig.click.clickEventElements)));return Array.from(mergedSet)};var lifecycle={};Object.defineProperty(lifecycle,"__esModule",{value:true});lifecycle.enable=lifecycle.disable=void 0;lifecycle.enable=function enable(){};lifecycle.disable=function disable(){};var hasRequiredKeypress;function requireKeypress(){if(hasRequiredKeypress)return keypress;hasRequiredKeypress=1;Object.defineProperty(keypress,"__esModule",{value:true});keypress.modiferKeyString=keypress.handleKeyPress=void 0;var _clicking=requireClicking();var _dragAndDrop=dragAndDrop;var _escape=_escape$1;var _focus=focus;var _isTabbable=isTabbable;var _keylabels=keylabels;var _keyButton=keyButton;function getMetaKeyName(){var userAgent=window.navigator.userAgent.toLowerCase();if(userAgent.indexOf("mac")>=0)return"Cmd";if(userAgent.indexOf("win")>=0)return"Win";if(userAgent.indexOf("linux")>=0)return"Super";return"Meta"}var modiferKeyString=keypress.modiferKeyString=function modiferKeyString(openKeyNav){switch(openKeyNav.config.keys.modifierKey){case"shiftKey":return"Shift";case"altKey":return"Alt";case"metaKey":return getMetaKeyName();default:return openKeyNav.config.keys.modifierKey}};keypress.handleKeyPress=function handleKeyPress(openKeyNav,e){var isTextInputActive=openKeyNav.isTextInputActive();if(e[openKeyNav.config.keys.modifierKey]&&openKeyNav.config.keys.menu.toLowerCase()==e.key.toLowerCase()){if(isTextInputActive){if(!e[openKeyNav.config.keys.inputEscape]){return true}}if(!openKeyNav.meta.enabled.value){openKeyNav.enable();var message="openKeyNav enabled. Press ".concat((0,_keyButton.keyButton)([modiferKeyString(openKeyNav),openKeyNav.config.keys.menu])," to disable.");openKeyNav.emitNotification(message);return true}else{(0,_escape.handleEscape)(openKeyNav,e);openKeyNav.disable();var _message="openKeyNav disabled. Press ".concat((0,_keyButton.keyButton)([modiferKeyString(openKeyNav),openKeyNav.config.keys.menu])," to enable.");openKeyNav.emitNotification(_message);return true}}switch(e.key){case"Shift":case"Control":case"Alt":case"Meta":case" ":return true;case"Escape":(0,_escape.handleEscape)(openKeyNav,e);break}if(openKeyNav.config.modes.clicking.value){return handleClickMode(openKeyNav,e)}if(openKeyNav.config.modes.moving.value){return handleMoveMode(openKeyNav,e)}if(openKeyNav.config.modes.menu.value){handleMenuMode()}if(isTextInputActive){if(!e[openKeyNav.config.keys.inputEscape]){return true}}if(!openKeyNav.meta.enabled.value){return true}switch(e.key){case openKeyNav.config.keys.escape:(0,_escape.handleEscape)(openKeyNav,e);return true}switch(e.key){case openKeyNav.config.keys.click:case openKeyNav.config.keys.click.toUpperCase():e.preventDefault();openKeyNav.config.modes.clicking.value=true;if(e.key==openKeyNav.config.keys.click.toUpperCase()){openKeyNav.config.modesConfig.click.modifier=true}(0,_keylabels.showClickableOverlays)(openKeyNav);return true;case openKeyNav.config.keys.move:case openKeyNav.config.keys.move.toUpperCase():e.preventDefault();openKeyNav.config.modes.moving.value=true;if(e.key==openKeyNav.config.keys.move.toUpperCase()){openKeyNav.config.modesConfig.move.modifier=true}(0,_keylabels.showMoveableFromOverlays)(openKeyNav);return true;case openKeyNav.config.keys.menu:case openKeyNav.config.keys.menu.toUpperCase():openKeyNav.config.modes.menu.value=true;if(e.key==openKeyNav.config.keys.menu.toUpperCase()){openKeyNav.config.modesConfig.menu.modifier=true}return true}switch(e.key.toLowerCase()){case openKeyNav.config.keys.heading.toLowerCase():e.preventDefault();(0,_focus.focusOnHeadings)(openKeyNav,"h1, h2, h3, h4, h5, h6",e);return true;case openKeyNav.config.keys.scroll.toLowerCase():e.preventDefault();(0,_focus.focusOnScrollables)(openKeyNav,e);return true}var numberMap={Digit1:"1",Digit2:"2",Digit3:"3",Digit4:"4",Digit5:"5",Digit6:"6",Digit7:"7",Digit8:"8",Digit9:"9",Digit0:"0"};if(e.code){var numberPressed=numberMap[e.code];switch(numberPressed){case openKeyNav.config.keys.heading_1:e.preventDefault();(0,_focus.focusOnHeadings)(openKeyNav,"h1",e);break;case openKeyNav.config.keys.heading_2:e.preventDefault();(0,_focus.focusOnHeadings)(openKeyNav,"h2",e);break;case openKeyNav.config.keys.heading_3:e.preventDefault();(0,_focus.focusOnHeadings)(openKeyNav,"h3",e);break;case openKeyNav.config.keys.heading_4:e.preventDefault();(0,_focus.focusOnHeadings)(openKeyNav,"h4",e);break;case openKeyNav.config.keys.heading_5:e.preventDefault();(0,_focus.focusOnHeadings)(openKeyNav,"h5",e);break;case openKeyNav.config.keys.heading_6:e.preventDefault();(0,_focus.focusOnHeadings)(openKeyNav,"h6",e);break}}};var handleClickMode=function handleClickMode(openKeyNav,e){e.preventDefault();openKeyNav.config.typedLabel.value+=e.key.toLowerCase();var target=document.querySelector('[data-openkeynav-label="'.concat(openKeyNav.config.typedLabel.value,'"]'));if(!target){document.querySelectorAll("iframe").forEach((function(iframe){addKeydownEventListenerToIframe(openKeyNav,iframe)}))}if(target){setTimeout((function(){(0,_clicking.handleTargetClickInteraction)(openKeyNav,target,e)}),0)}else{(0,_keylabels.filterRemainingOverlays)(openKeyNav,e);return false}return true};var handleMoveMode=function handleMoveMode(openKeyNav,e){var showMoveableToOverlays=function showMoveableToOverlays(selectedMoveable){var modifer=openKeyNav.config.modesConfig.move.modifier;openKeyNav.removeOverlays();openKeyNav.config.modes.moving.value=true;openKeyNav.config.modesConfig.move.selectedMoveable=selectedMoveable;openKeyNav.config.modesConfig.move.selectedMoveableHTML=selectedMoveable.innerHTML;openKeyNav.config.modesConfig.move.modifier=modifer;var configIndex=selectedMoveable.getAttribute("data-openkeynav-moveconfig");if(configIndex===null)return;var configKeyForSelectedMoveable=parseInt(configIndex,10);openKeyNav.config.modesConfig.move.selectedConfig=configKeyForSelectedMoveable;var moveConfig=openKeyNav.config.modesConfig.move.config[configKeyForSelectedMoveable];if(!moveConfig)return;function tabbableFilter(openKeyNav){return function(el){return(0,_isTabbable.isTabbable)(el,openKeyNav)}}var targetElements=[].filter.call(document.querySelectorAll(moveConfig.toElements),tabbableFilter(openKeyNav));var labels=(0,_keylabels.generateLabels)(openKeyNav,targetElements.length);targetElements.forEach((function(element,index){element.setAttribute("data-openkeynav-label",labels[index])}));targetElements.forEach((function(element,index){if(!openKeyNav.isNonzeroSize(element))return;openKeyNav.createOverlay(element,labels[index]);element.setAttribute("data-openkeynav-dropzone","true")}))};function findElementWithQuery(startElement,queryString){var direction=arguments.length>2&&arguments[2]!==undefined?arguments[2]:"next";var currentElement=startElement;while(currentElement){if(direction==="previous"){currentElement=currentElement.previousElementSibling;while(!currentElement&&startElement.parentElement){currentElement=startElement.parentElement.previousElementSibling;startElement=startElement.parentElement}if(currentElement){var descendants=currentElement.querySelectorAll(queryString);if(descendants.length>0){return descendants[descendants.length-1]}if(currentElement.matches(queryString)){return currentElement}}}else if(direction==="next"){currentElement=currentElement.nextElementSibling;while(!currentElement&&startElement.parentElement){currentElement=startElement.parentElement.nextElementSibling;startElement=startElement.parentElement}if(currentElement){if(currentElement.matches(queryString)){return currentElement}var foundElement=currentElement.querySelector(queryString);if(foundElement){return foundElement}}}else{throw new Error("Invalid direction. Use 'previous' or 'next'.")}}return null}function cycleThroughMoveTargets(event){event.preventDefault();var direction="next";if(event.shiftKey){direction="previous"}return findElementWithQuery(openKeyNav.config.modesConfig.move.selectedMoveable,"[data-openkeynav-label]:not(.openKeyNav-label)",direction)}var validLabelChars=(0,_keylabels.generateValidKeyChars)(openKeyNav);var isValidLabelChar=Array.from(validLabelChars).some((function(validChar){return validChar.toLowerCase()==e.key.toLowerCase()}));var selectedTarget;if(isValidLabelChar){openKeyNav.config.typedLabel.value+=e.key.toLowerCase();selectedTarget=document.querySelector('[data-openkeynav-label="'.concat(openKeyNav.config.typedLabel.value,'"]:not(.openKeyNav-label)'))}else{if(e.key==="Tab"){selectedTarget=cycleThroughMoveTargets(e)}}if(!selectedTarget){(0,_keylabels.filterRemainingOverlays)(openKeyNav,e);return false}if(!openKeyNav.config.modesConfig.move.selectedMoveable){console.log("Selected element to move:",selectedTarget);showMoveableToOverlays(selectedTarget);(0,_dragAndDrop.beginDrag)(openKeyNav);return true}moveSelectedMoveableToTarget(openKeyNav,selectedTarget);return true};var handleMenuMode=function handleMenuMode(e){return true};var moveSelectedMoveableToTarget=function moveSelectedMoveableToTarget(openKeyNav,selectedTarget){console.log("Selected move target:",selectedTarget);openKeyNav.config.modesConfig.move.selectedDropZone=selectedTarget;var callback=openKeyNav.config.modesConfig.move.config[openKeyNav.config.modesConfig.move.selectedConfig].callback;if(!callback){(0,_dragAndDrop.simulateDragAndDrop)(openKeyNav,openKeyNav.config.modesConfig.move.selectedMoveable,openKeyNav.config.modesConfig.move.selectedDropZone)}else{openKeyNav.config.modesConfig.move.config[openKeyNav.config.modesConfig.move.selectedConfig].callback(openKeyNav.config.modesConfig.move.selectedMoveable,openKeyNav.config.modesConfig.move.selectedDropZone)}if(!openKeyNav.config.modesConfig.move.modifier){openKeyNav.removeOverlays(true);openKeyNav.clearMoveAttributes()}return true};var addKeydownEventListenerToIframe=function addKeydownEventListenerToIframe(openKeyNav,iframe){try{var iframeDoc=iframe.contentDocument||iframe.contentWindow.document;var potentialTarget=iframeDoc.querySelector('[data-openkeynav-label="'.concat(openKeyNav.config.typedLabel.value,'"]'));if(potentialTarget){if(!iframeDoc.keypressListenerAdded){var script=iframeDoc.createElement("script");script.textContent=""+"document.addEventListener('keydown', function(event) {"+"window.parent.postMessage({"+"type: 'keydown',"+"key: event.key,"+"keyCode: event.keyCode,"+"altKey: event.altKey,"+"ctrlKey: event.ctrlKey,"+"shiftKey: event.shiftKey,"+"metaKey: event.metaKey"+"}, '*');"+"});"+"document.keypressListenerAdded = true;";iframeDoc.body.appendChild(script)}}}catch(error){console.log("Error accessing iframe content",error)}};return keypress}var styles={};Object.defineProperty(styles,"__esModule",{value:true});styles.injectToolbarStyleSheet=styles.injectStylesheet=styles.deleteStylesheets=void 0;var openKeyNav;var styleClassname="openKeyNav-style";var toolbarStyleClassname="okn-toolbar-stylesheet";var keyButtonStyles="\n .keyButtonContainer {\n margin: 0 .1em;\n display: inline-grid;\n grid-template-columns: min-content auto;\n align-items: baseline;\n column-gap: 4px;\n }\n .keyButtonContainer .keyButtonLabel{\n white-space:nowrap;\n }\n .keyButton {\n display: inline-block;\n padding: 1px 4px;\n min-width: 1.3em;\n text-align: center;\n line-height: 1;\n color: hsl(210, 8%, 5%);\n text-shadow: 0 1px 0 hsl(0, 0%, 100%);\n background-color: hsl(210, 8%, 90%);\n border: 1px solid hsl(210, 8%, 68%);\n border-radius: 3px;\n box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 hsl(0, 0%, 100%);\n white-space: nowrap;\n margin: 0 1px;\n }\n";styles.injectStylesheet=function injectStylesheet(parent,replace){openKeyNav=parent;if(document.querySelectorAll("."+styleClassname).length>0){if(!replace){return}deleteStylesheets()}var style=document.createElement("style");style.className=styleClassname;style.type="text/css";style.textContent=".openKeyNav-label {\n font: inherit;\n vertical-align: baseline;\n box-sizing: border-box;\n white-space: nowrap;\n border: 1px solid ".concat(openKeyNav.config.spot.fontColor,"; \n // box-shadow: inset 0 -2.5px 0 ").concat(openKeyNav.config.spot.insetColor,", inset 0 -3px 0 #999, 0 0 4px #fff; \n // background: linear-gradient(to top, #999 5%, ").concat(openKeyNav.config.spot.backgroundColor," 20%); \n background-color: ").concat(openKeyNav.config.spot.backgroundColor,"; \n // border-radius: calc( 4px );\n color: ").concat(openKeyNav.config.spot.fontColor,"; \n display: inline-block;\n font-size: ").concat(openKeyNav.config.spot.fontSize,"; \n // outline : 2px solid ").concat(openKeyNav.config.focus.outlineColor,'; \n outline-offset: -2px !important;\n // +"font-weight: bold;"\n font-weight: inherit;\n // line-height: 1.5;\n line-height: 1;\n margin: 0 .1em 0 1px;\n overflow-wrap: break-word;\n // padding: .0 .15em .1em;\n padding: 3px;\n text-shadow: 0 1px 0 ').concat(openKeyNav.config.spot.insetColor,'; \n min-width: 1rem;\n text-align: center;\n position: absolute;\n z-index: 99999999;\n font-family: monospace;\n }\n .openKeyNav-label[data-openkeynav-position="left"]::after,\n .openKeyNav-label[data-openkeynav-position="right"]::before,\n .openKeyNav-label[data-openkeynav-position="top"]::after,\n .openKeyNav-label[data-openkeynav-position="bottom"]::before,\n .openKeyNav-label[data-openkeynav-position="left"]::before,\n .openKeyNav-label[data-openkeynav-position="right"]::after,\n .openKeyNav-label[data-openkeynav-position="top"]::before,\n .openKeyNav-label[data-openkeynav-position="bottom"]::after {\n content: "";\n position: absolute;\n }\n .openKeyNav-label[data-openkeynav-position="left"]::after,\n .openKeyNav-label[data-openkeynav-position="right"]::before,\n .openKeyNav-label[data-openkeynav-position="left"]::before,\n .openKeyNav-label[data-openkeynav-position="right"]::after {\n top: 50%;\n transform: translateY(-50%);\n }\n .openKeyNav-label[data-openkeynav-position="top"]::after,\n .openKeyNav-label[data-openkeynav-position="bottom"]::before,\n .openKeyNav-label[data-openkeynav-position="top"]::before,\n .openKeyNav-label[data-openkeynav-position="bottom"]::after {\n left: 50%;\n transform: translateX(-50%);\n }\n .openKeyNav-label[data-openkeynav-position="left"]::before {\n border-left: ').concat(openKeyNav.config.spot.arrowSize_px+1,"px solid #fff; \n right: -").concat(openKeyNav.config.spot.arrowSize_px+1,"px; \n border-top: ").concat(openKeyNav.config.spot.arrowSize_px+1,"px solid transparent; \n border-bottom: ").concat(openKeyNav.config.spot.arrowSize_px+1,'px solid transparent; \n }\n .openKeyNav-label[data-openkeynav-position="left"]::after {\n border-left: ').concat(openKeyNav.config.spot.arrowSize_px,"px solid ").concat(openKeyNav.config.spot.backgroundColor,"; \n right: -").concat(openKeyNav.config.spot.arrowSize_px,"px; \n border-top: ").concat(openKeyNav.config.spot.arrowSize_px,"px solid transparent; \n border-bottom: ").concat(openKeyNav.config.spot.arrowSize_px,'px solid transparent; \n }\n .openKeyNav-label[data-openkeynav-position="right"]::before {\n border-right: ').concat(openKeyNav.config.spot.arrowSize_px+1,"px solid #fff; \n left: -").concat(openKeyNav.config.spot.arrowSize_px+1,"px; \n border-top: ").concat(openKeyNav.config.spot.arrowSize_px+1,"px solid transparent; \n border-bottom: ").concat(openKeyNav.config.spot.arrowSize_px+1,'px solid transparent; \n }\n .openKeyNav-label[data-openkeynav-position="right"]::after {\n border-right: ').concat(openKeyNav.config.spot.arrowSize_px,"px solid ").concat(openKeyNav.config.spot.backgroundColor,"; \n left: -").concat(openKeyNav.config.spot.arrowSize_px,"px; \n border-top: ").concat(openKeyNav.config.spot.arrowSize_px,"px solid transparent; \n border-bottom: ").concat(openKeyNav.config.spot.arrowSize_px,'px solid transparent; \n }\n .openKeyNav-label[data-openkeynav-position="top"]{\n padding-bottom: 0;\n }\n .openKeyNav-label[data-openkeynav-position="top"]::before {\n border-top: ').concat(openKeyNav.config.spot.arrowSize_px+1,"px solid #fff; \n bottom: -").concat(openKeyNav.config.spot.arrowSize_px+1,"px; \n border-left: ").concat(openKeyNav.config.spot.arrowSize_px+1,"px solid transparent; \n border-right: ").concat(openKeyNav.config.spot.arrowSize_px+1,'px solid transparent; \n }\n .openKeyNav-label[data-openkeynav-position="top"]::after {\n border-top: ').concat(openKeyNav.config.spot.arrowSize_px,"px solid ").concat(openKeyNav.config.spot.backgroundColor,"; \n bottom: -").concat(openKeyNav.config.spot.arrowSize_px,"px; \n border-left: ").concat(openKeyNav.config.spot.arrowSize_px,"px solid transparent; \n border-right: ").concat(openKeyNav.config.spot.arrowSize_px,'px solid transparent; \n }\n .openKeyNav-label[data-openkeynav-position="bottom"]{\n padding-top: 0;\n }\n .openKeyNav-label[data-openkeynav-position="bottom"]::before {\n border-bottom: ').concat(openKeyNav.config.spot.arrowSize_px+1,"px solid #fff; \n top: -").concat(openKeyNav.config.spot.arrowSize_px+1,"px; \n border-left: ").concat(openKeyNav.config.spot.arrowSize_px+1,"px solid transparent; \n border-right: ").concat(openKeyNav.config.spot.arrowSize_px+1,'px solid transparent; \n }\n .openKeyNav-label[data-openkeynav-position="bottom"]::after {\n border-bottom: ').concat(openKeyNav.config.spot.arrowSize_px,"px solid ").concat(openKeyNav.config.spot.backgroundColor,"; \n top: -").concat(openKeyNav.config.spot.arrowSize_px,"px; \n border-left: ").concat(openKeyNav.config.spot.arrowSize_px,"px solid transparent; \n border-right: ").concat(openKeyNav.config.spot.arrowSize_px,"px solid transparent; \n }\n .openKeyNav-label-selected{\n // padding : 0;\n // margin : 0;\n display : grid;\n align-content : center;\n color : ").concat(openKeyNav.config.spot.fontColor,"; \n background : ").concat(openKeyNav.config.spot.backgroundColor,"; \n // outline : 4px solid ").concat(openKeyNav.config.focus.outlineColor,"; \n outline: none; \n // border-radius: 100%; \n // width: 1rem; \n // height: 1rem; \n // text-shadow : none;\n // padding : 0 !important;\n // margin: 0 !important;\n }\n [data-openkeynav-label]:not(.openKeyNav-label):not(button){\n // outline: 2px double ").concat(openKeyNav.config.focus.outlineColor,' !important; \n // outline-offset: 2px !important;\n box-shadow: inset 0 0 0 .5px #000,\n 0 0 0 .75px #000,\n 0 0 0 1.5px rgba(255,255,255,1); \n outline:none !important;\n // border-radius: 3px;\n border-color: #000;\n border-radius: 3px;\n }\n button[data-openkeynav-label]{\n outline:2px solid #000 !important;\n }\n .openKeyNav-inaccessible:not(.openKeyNav-label):not(button){\n box-shadow: inset 0 0 0 .5px #f00,\n 0 0 0 1px #f00,\n 0 0 0 1.5px rgba(255,255,255,1); \n outline:none !important;\n border-color: #f00;\n border-radius: 3px;\n }\n button.openKeyNav-inaccessible{\n outline:2px solid #f00 !important;\n }\n .openKeyNav-inaccessible.openKeyNav-label{\n box-shadow: inset 0 0 0 .5px #f00,\n 0 0 0 1px #f00,\n 0 0 0 1.5px rgba(255,255,255,1); \n border-color: #f00;\n border-radius: 3px;\n }\n // +"span[data-openkeynav-label]{"\n // +"display: inherit;"\n // +"}"\n .openKeyNav-noCursor *{\n cursor: none !important;\n }\n .openKeyNav-mouseover-tooltip{\n position: absolute;\n background-color: #333;\n color: #fff;\n padding: 5px;\n border-radius: 5px;\n display: none;\n z-index: 1000;\n font-size: 12px;\n }\n .openKeyNav-mouseover-tooltip::before{\n content: "Debug mode"\n }\n // [data-openkeynav-draggable="true"] {\n // outline: 2px solid ').concat(openKeyNav.config.focus.outlineColor,"; \n // outline-offset: -1px !important;\n // }\n ;\n ");style.textContent+='\n .okn-logo-text {\n font-size: 36px;\n font-weight: 600;\n color: #ffffff;\n background-color: #333;\n padding: .1em .2em;\n border-radius: 1em;\n box-sizing: border-box;\n line-height: 1;\n text-align: center;\n position: relative;\n display: inline-block;\n min-width: 1rem;\n border: max(.1em, 2px) solid #ffffff;\n white-space: nowrap;\n }\n\n .okn-logo-text.small {\n font-size: 18px;\n }\n .okn-logo-text.tiny {\n font-size: 10px;\n /* border-width: 1px; */\n border: none;\n }\n .okn-logo-text.tiny .key {\n font-weight: 700;\n }\n\n .okn-logo-text.light {\n color: #333; /* Dark text color */\n background-color: #fff; /* Light background */\n border-color: #333; /* Dark border */\n }\n\n .okn-logo-text .key {\n display: inline;\n padding: .1em .2em;\n margin: 0 .1em;\n background-color: #ffffff; /* Light background */\n color: #333; /* Dark text */\n line-height: 1;\n /* font-size: 0.6em; */\n position: relative;\n top: -.3em;\n }\n\n .okn-logo-text.light .key {\n background-color: #333; /* Dark background */\n color: #ffffff; /* Light text */\n }\n\n .okn-logo-text .key::before,\n .okn-logo-text .key::after {\n content: "";\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .okn-logo-text .key::before {\n --border-size: 0.5em; /* Base border size */\n --min-borde