flotsam-autocomplete - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/flotsam.modern.js

@@ -1,2 +0,2 @@
-class t{constructor(t){this.eventName=t,this.callbacks=[]}registerCallback(t){this.callbacks.push(t)}unregisterCallback(t){const e=this.callbacks.indexOf(t);e>-1&&this.callbacks.splice(e,1)}fire(t){this.callbacks.slice(0).forEach(e=>{e(t)})}}class e{constructor(){this.events={},this.uid=Math.floor(1e3+9e4*Math.random())}dispatch(t,e){const s=this.events[t];s&&s.fire(e)}on(e,s){let i=this.events[e];i||(i=new t(e),this.events[e]=i),i.registerCallback(s)}off(t,e){const s=this.events[t];s&&s.callbacks.indexOf(e)>-1&&(s.unregisterCallback(e),0===s.callbacks.length&&delete this.events[t])}}const s="is-open";class i extends e{constructor(t){super(),this.options=t,this.$input=t.el,this.data=!!t.data&&t.data,this.minChars=t.minChars?t.minChars:2,this.inputPreview=!t.inputPreview||t.inputPreview,this.onAjax=t.onAjax,this.isEmpty=!0,this.hasEmptyState=!0,this.isOpen=!1,this.init()}setUp(){this.$input.setAttribute("autocomplete","off"),this.$input.setAttribute("aira-expanded","false"),this.$input.setAttribute("aira-haspopup","listbox"),this.$input.setAttribute("role","combobox"),this.$input.setAttribute("aira-autocomplete","list"),this.$input.setAttribute("aira-owns",`modal-${super.uid}-list`),this.$input.id=`autocomplete-input-${super.uid}`}initModal(){this.$input.insertAdjacentHTML("afterend",this.generateModal()),this.$modal=document.querySelector(`#modal-${super.uid}`),this.list=this.$modal.querySelector(".autocomplete-modal__list"),this.$empty=this.$modal.querySelector(".autocomplete-modal__empty"),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden"}initInputCheck(){this.isDisabled||this.$input.addEventListener("input",this.onAjax?t=>{this.value=t.target.value,this.minCharsExcceded()?(super.dispatch("loadingData",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options}),this.onAjax(this.value).then(t=>{this.data=t,super.dispatch("loadedData",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options}),this.update()})):this.isOpen&&this.closeModal()}:t=>{this.value=t.target.value,this.minCharsExcceded()?this.update():this.isOpen&&this.closeModal()})}update(){0!==this.data.length&&(this.data=this.data.filter(t=>{if(t.toLowerCase().includes(this.value.toLowerCase()))return t})),0===this.data.length?this.showEmptyState():(this.hideEmptyState(),this.generateListItems(),!1===this.isOpen&&this.openModal())}preventSubmit(t){t.preventDefault()}showEmptyState(){this.removeListItems(),this.$empty.innerHTML=`<div>Sorry there are no results for <strong>"${this.value}"</strong> please search again</div>`,this.$empty.style.display="block",this.isOpen||this.openModal()}hideEmptyState(){this.$empty.innerHTML="",this.$empty.style.display="none"}openModal(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.isOpen=!0,this.$modal.style.pointerEvents="auto",this.$modal.style.visibility="visible",this.$input.classList.add(s),this.$input.setAttribute("aira-expanded","true"),super.dispatch("openModal",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options}))}closeModal(){this.hideEmptyState(),this.removeListItems(),this.unsetSelected(),this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),document.removeEventListener("keydown",this.checkKey,!0)),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden",this.$input.classList.remove(s),this.$input.focus(),this.isOpen=!1,super.dispatch("closeModal",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})}checkKey(t){"38"==t.keyCode?this.selectPrev():"40"==t.keyCode?this.selectNext():"37"==t.keyCode||"39"==t.keyCode||("27"==t.keyCode||"9"==t.keyCode?(t.preventDefault(),this.closeModal()):"13"==t.keyCode&&(t.preventDefault(),this.closeModal(),this.$input.closest("form").submit()))}selectItem(){[...this.list.querySelectorAll("li")].forEach((t,e)=>{e===this.currentSelected?(t.classList.add("selected-item"),t.setAttribute("aira-selected","true"),this.$input.setAttribute("aira-activedescendant",t.id),this.inputPreview&&this.setInput(t.innerText),super.dispatch("selectKey",{selected:t.textContent,input:this.$input,modal:this.$modal,flotsam:this,options:this.options})):(t.classList.remove("selected-item"),t.setAttribute("aira-selected","false"))})}selectNext(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()}selectPrev(){this.currentSelected=this.currentSelected-1,this.selectItem()}unsetSelected(){this.currentSelected=null;const t=[...this.list.querySelectorAll("li")];this.$input.removeAttribute("aira-activedescendant"),t.forEach(t=>{t.classList.remove("selected-item")})}generateModal(){return`\n        <div class="autocomplete-modal" id="modal-${super.uid}" >\n            <div class="autocomplete-modal__inner">\n                <ul \n                    class="autocomplete-modal__list" \n                    role="listbox" \n                    id="modal-${super.uid}-list">\n                </ul>\n                <div class="autocomplete-modal__empty" style="display: none"></div>\n            </div>\n        </div>\n    `}generateListItems(){this.unsetSelected();let t="";this.data.forEach((e,s)=>{const i=new RegExp(this.value,"gi"),a=e.replace(i,t=>'<span class="autocomplete-modal__list-highlight">'+t+"</span>");t+=`\n                <li class="autocomplete-modal__list-item" role="option" aria-posinset="${s+1}" aira-selected="false" id="list-item--${this.uid}">\n                    <button tab-index="-1">\n                        ${a}\n                    </button>\n                </li>`}),this.list.innerHTML=t,[...this.list.querySelectorAll("li")].forEach(t=>{t.addEventListener("click",()=>{this.setInput(t.innerText),this.closeModal()})})}removeListItems(){this.list.innerHTML=""}setInput(t){this.$input.value=t}triggerClose(){this.closeModal()}triggerDisable(){this.isDisabled=!0,this.closeModal(),super.dispatch("disabled",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})}triggerEnable(){this.isDisabled=!1}minCharsExcceded(){return this.value.length>=this.minChars}init(){this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),setTimeout(()=>{super.dispatch("init",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})},0)}}export{i as default};
+class t{constructor(t){this.eventName=t,this.callbacks=[]}registerCallback(t){this.callbacks.push(t)}unregisterCallback(t){const e=this.callbacks.indexOf(t);e>-1&&this.callbacks.splice(e,1)}fire(t){this.callbacks.slice(0).forEach(e=>{e(t)})}}class e{constructor(){this.events={},this.uid=Math.floor(1e3+9e4*Math.random())}dispatch(t,e){const i=this.events[t];i&&i.fire(e)}on(e,i){let s=this.events[e];s||(s=new t(e),this.events[e]=s),s.registerCallback(i)}off(t,e){const i=this.events[t];i&&i.callbacks.indexOf(e)>-1&&(i.unregisterCallback(e),0===i.callbacks.length&&delete this.events[t])}}const i="is-open";class s extends e{constructor(t){super(),this.options=t,this.$input=t.el,this.data=!!t.data&&t.data,this.minChars=t.minChars?t.minChars:2,this.inputPreview=!t.inputPreview||t.inputPreview,this.onAjax=t.onAjax,this.hint=t.hint?t.hint:"When autocomplete results are available use up and down arrows to review and enter to select.",this.isEmpty=!0,this.hasEmptyState=!0,this.isOpen=!1,this.init()}setUp(){this.$input.setAttribute("autocomplete","off"),this.$input.setAttribute("aria-expanded","false"),this.$input.setAttribute("aria-haspopup","listbox"),this.$input.setAttribute("role","combobox"),this.$input.setAttribute("aria-autocomplete","list"),this.$input.setAttribute("aria-owns",`modal-${this.uid}-list`),this.$input.id=`autocomplete-input-${this.uid}`,this.$input.setAttribute("aria-describedby",`assistiveHint-${this.uid}`)}initModal(){this.$input.insertAdjacentHTML("afterend",this.generateModal()),this.$input.insertAdjacentHTML("afterend",this.generateAssistiveHint()),this.$input.insertAdjacentHTML("afterend",this.generateStatus()),this.$modal=document.querySelector(`#modal-${this.uid}`),this.$status=document.querySelector(`#status-${this.uid}`),this.list=this.$modal.querySelector(".autocomplete-modal__list"),this.$empty=this.$modal.querySelector(".autocomplete-modal__empty"),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden"}initInputCheck(){this.isDisabled||this.$input.addEventListener("input",this.onAjax?t=>{this.value=t.target.value,this.minCharsExcceded()?(super.dispatch("loadingData",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options}),this.onAjax(this.value).then(t=>{this.data=t,super.dispatch("loadedData",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options}),this.update()})):this.isOpen&&this.closeModal()}:t=>{this.value=t.target.value,this.minCharsExcceded()?this.update():this.isOpen&&this.closeModal()})}generateAssistiveHint(){return`\n            <div id="assistiveHint-${this.uid}" style="display: none">\n                ${this.hint}\n            </div>\n        `}generateStatus(){return`\n            <div id="status-${this.uid}" aria-role='status' aria-live="polite" style="display: none">\n                \n            </div>\n        `}update(){0!==this.data.length&&(this.data=this.data.filter(t=>{if(t.toLowerCase().includes(this.value.toLowerCase()))return t})),0===this.data.length?this.showEmptyState():(this.hideEmptyState(),this.generateListItems(),!1===this.isOpen&&this.openModal())}preventSubmit(t){t.preventDefault()}showEmptyState(){this.removeListItems(),this.$empty.innerHTML=`<div>Sorry there are no results for <strong>"${this.value}"</strong> please search again</div>`,this.$empty.style.display="block",this.isOpen||this.openModal()}hideEmptyState(){this.$empty.innerHTML="",this.$empty.style.display="none"}openModal(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.isOpen=!0,this.$modal.style.pointerEvents="auto",this.$modal.style.visibility="visible",this.$input.classList.add(i),this.$input.setAttribute("aria-expanded","true"),super.dispatch("openModal",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options}))}closeModal(){this.hideEmptyState(),this.removeListItems(),this.unsetSelected(),this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),document.removeEventListener("keydown",this.checkKey,!0)),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden",this.$input.classList.remove(i),this.$input.focus(),this.isOpen=!1,super.dispatch("closeModal",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})}checkKey(t){"38"==t.keyCode?this.selectPrev():"40"==t.keyCode?this.selectNext():"37"==t.keyCode||"39"==t.keyCode||("27"==t.keyCode||"9"==t.keyCode?(t.preventDefault(),this.closeModal()):"13"==t.keyCode&&(t.preventDefault(),this.closeModal(),this.$input.closest("form").submit()))}selectItem(){[...this.list.querySelectorAll("li")].forEach((t,e)=>{e===this.currentSelected?(t.classList.add("selected-item"),t.setAttribute("aria-selected","true"),console.log(t.id),console.log(t),this.$input.setAttribute("aria-activedescendant",t.id),this.inputPreview&&this.setInput(t.innerText),super.dispatch("selectKey",{selected:t.textContent,input:this.$input,modal:this.$modal,flotsam:this,options:this.options})):(t.classList.remove("selected-item"),t.setAttribute("aria-selected","false"))})}selectNext(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()}selectPrev(){this.currentSelected=this.currentSelected-1,this.selectItem()}unsetSelected(){this.currentSelected=null;const t=[...this.list.querySelectorAll("li")];this.$input.removeAttribute("aria-activedescendant"),t.forEach(t=>{t.classList.remove("selected-item")})}generateModal(){return console.log(this.uid),`\n        <div class="autocomplete-modal" id="modal-${this.uid}" >\n            <div class="autocomplete-modal__inner">\n                <ul \n                    class="autocomplete-modal__list" \n                    role="listbox" \n                    id="modal-${this.uid}-list">\n                </ul>\n                <div class="autocomplete-modal__empty" style="display: none"></div>\n            </div>\n        </div>\n    `}generateListItems(){this.unsetSelected();let t="";this.data.forEach((e,i)=>{const s=new RegExp(this.value,"gi"),a=e.replace(s,t=>'<span class="autocomplete-modal__list-highlight">'+t+"</span>");t+=`\n                <li class="autocomplete-modal__list-item" role="option" aria-posinset="${i+1}" aria-setsize="${this.data.length}" aria-selected="false" id="list-item-${i}--${this.uid}" tab-index="-1">\n                    ${a}\n                </li>`}),this.list.innerHTML=t,[...this.list.querySelectorAll("li")].forEach(t=>{t.addEventListener("click",()=>{this.setInput(t.innerText),this.closeModal()})})}removeListItems(){this.list.innerHTML=""}setInput(t){this.$input.value=t}triggerClose(){this.closeModal()}triggerDisable(){this.isDisabled=!0,this.closeModal(),super.dispatch("disabled",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})}triggerEnable(){this.isDisabled=!1}minCharsExcceded(){return this.value.length>=this.minChars}init(){this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),console.log(this.uid),setTimeout(()=>{super.dispatch("init",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})},0)}}export{s as default};
 //# sourceMappingURL=flotsam.modern.js.map

dist/flotsam.module.js

@@ -1,2 +0,2 @@
-function t(e,i){return t=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},t(e,i)}var e=/*#__PURE__*/function(){function t(t){this.eventName=t,this.callbacks=[]}var e=t.prototype;return e.registerCallback=function(t){this.callbacks.push(t)},e.unregisterCallback=function(t){var e=this.callbacks.indexOf(t);e>-1&&this.callbacks.splice(e,1)},e.fire=function(t){this.callbacks.slice(0).forEach(function(e){e(t)})},t}(),i="is-open",s=/*#__PURE__*/function(e){var s,n;function o(t){var i;return(i=e.call(this)||this).options=t,i.$input=t.el,i.data=!!t.data&&t.data,i.minChars=t.minChars?t.minChars:2,i.inputPreview=!t.inputPreview||t.inputPreview,i.onAjax=t.onAjax,i.isEmpty=!0,i.hasEmptyState=!0,i.isOpen=!1,i.init(),i}n=e,(s=o).prototype=Object.create(n.prototype),s.prototype.constructor=s,t(s,n);var a=o.prototype;return a.setUp=function(){this.$input.setAttribute("autocomplete","off"),this.$input.setAttribute("aira-expanded","false"),this.$input.setAttribute("aira-haspopup","listbox"),this.$input.setAttribute("role","combobox"),this.$input.setAttribute("aira-autocomplete","list"),this.$input.setAttribute("aira-owns","modal-"+e.prototype.uid+"-list"),this.$input.id="autocomplete-input-"+e.prototype.uid},a.initModal=function(){this.$input.insertAdjacentHTML("afterend",this.generateModal()),this.$modal=document.querySelector("#modal-"+e.prototype.uid),this.list=this.$modal.querySelector(".autocomplete-modal__list"),this.$empty=this.$modal.querySelector(".autocomplete-modal__empty"),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden"},a.initInputCheck=function(){var t=this;this.isDisabled||this.$input.addEventListener("input",this.onAjax?function(i){t.value=i.target.value,t.minCharsExcceded()?(e.prototype.dispatch.call(t,"loadingData",{input:t.$input,modal:t.$modal,flotsam:t,options:t.options}),t.onAjax(t.value).then(function(i){t.data=i,e.prototype.dispatch.call(t,"loadedData",{input:t.$input,modal:t.$modal,flotsam:t,options:t.options}),t.update()})):t.isOpen&&t.closeModal()}:function(e){t.value=e.target.value,t.minCharsExcceded()?t.update():t.isOpen&&t.closeModal()})},a.update=function(){var t=this;0!==this.data.length&&(this.data=this.data.filter(function(e){if(e.toLowerCase().includes(t.value.toLowerCase()))return e})),0===this.data.length?this.showEmptyState():(this.hideEmptyState(),this.generateListItems(),!1===this.isOpen&&this.openModal())},a.preventSubmit=function(t){t.preventDefault()},a.showEmptyState=function(){this.removeListItems(),this.$empty.innerHTML='<div>Sorry there are no results for <strong>"'+this.value+'"</strong> please search again</div>',this.$empty.style.display="block",this.isOpen||this.openModal()},a.hideEmptyState=function(){this.$empty.innerHTML="",this.$empty.style.display="none"},a.openModal=function(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.isOpen=!0,this.$modal.style.pointerEvents="auto",this.$modal.style.visibility="visible",this.$input.classList.add(i),this.$input.setAttribute("aira-expanded","true"),e.prototype.dispatch.call(this,"openModal",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options}))},a.closeModal=function(){this.hideEmptyState(),this.removeListItems(),this.unsetSelected(),this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),document.removeEventListener("keydown",this.checkKey,!0)),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden",this.$input.classList.remove(i),this.$input.focus(),this.isOpen=!1,e.prototype.dispatch.call(this,"closeModal",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})},a.checkKey=function(t){"38"==t.keyCode?this.selectPrev():"40"==t.keyCode?this.selectNext():"37"==t.keyCode||"39"==t.keyCode||("27"==t.keyCode||"9"==t.keyCode?(t.preventDefault(),this.closeModal()):"13"==t.keyCode&&(t.preventDefault(),this.closeModal(),this.$input.closest("form").submit()))},a.selectItem=function(){var t=this;[].concat(this.list.querySelectorAll("li")).forEach(function(i,s){s===t.currentSelected?(i.classList.add("selected-item"),i.setAttribute("aira-selected","true"),t.$input.setAttribute("aira-activedescendant",i.id),t.inputPreview&&t.setInput(i.innerText),e.prototype.dispatch.call(t,"selectKey",{selected:i.textContent,input:t.$input,modal:t.$modal,flotsam:t,options:t.options})):(i.classList.remove("selected-item"),i.setAttribute("aira-selected","false"))})},a.selectNext=function(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()},a.selectPrev=function(){this.currentSelected=this.currentSelected-1,this.selectItem()},a.unsetSelected=function(){this.currentSelected=null;var t=[].concat(this.list.querySelectorAll("li"));this.$input.removeAttribute("aira-activedescendant"),t.forEach(function(t){t.classList.remove("selected-item")})},a.generateModal=function(){return'\n        <div class="autocomplete-modal" id="modal-'+e.prototype.uid+'" >\n            <div class="autocomplete-modal__inner">\n                <ul \n                    class="autocomplete-modal__list" \n                    role="listbox" \n                    id="modal-'+e.prototype.uid+'-list">\n                </ul>\n                <div class="autocomplete-modal__empty" style="display: none"></div>\n            </div>\n        </div>\n    '},a.generateListItems=function(){var t=this;this.unsetSelected();var e="";this.data.forEach(function(i,s){var n=new RegExp(t.value,"gi"),o=i.replace(n,function(t){return'<span class="autocomplete-modal__list-highlight">'+t+"</span>"});e+='\n                <li class="autocomplete-modal__list-item" role="option" aria-posinset="'+(s+1)+'" aira-selected="false" id="list-item--'+t.uid+'">\n                    <button tab-index="-1">\n                        '+o+"\n                    </button>\n                </li>"}),this.list.innerHTML=e,[].concat(this.list.querySelectorAll("li")).forEach(function(e){e.addEventListener("click",function(){t.setInput(e.innerText),t.closeModal()})})},a.removeListItems=function(){this.list.innerHTML=""},a.setInput=function(t){this.$input.value=t},a.triggerClose=function(){this.closeModal()},a.triggerDisable=function(){this.isDisabled=!0,this.closeModal(),e.prototype.dispatch.call(this,"disabled",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})},a.triggerEnable=function(){this.isDisabled=!1},a.minCharsExcceded=function(){return this.value.length>=this.minChars},a.init=function(){var t=this;this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),setTimeout(function(){e.prototype.dispatch.call(t,"init",{input:t.$input,modal:t.$modal,flotsam:t,options:t.options})},0)},o}(/*#__PURE__*/function(){function t(){this.events={},this.uid=Math.floor(1e3+9e4*Math.random())}var i=t.prototype;return i.dispatch=function(t,e){var i=this.events[t];i&&i.fire(e)},i.on=function(t,i){var s=this.events[t];s||(s=new e(t),this.events[t]=s),s.registerCallback(i)},i.off=function(t,e){var i=this.events[t];i&&i.callbacks.indexOf(e)>-1&&(i.unregisterCallback(e),0===i.callbacks.length&&delete this.events[t])},t}());export{s as default};
+function t(e,i){return t=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},t(e,i)}var e=/*#__PURE__*/function(){function t(t){this.eventName=t,this.callbacks=[]}var e=t.prototype;return e.registerCallback=function(t){this.callbacks.push(t)},e.unregisterCallback=function(t){var e=this.callbacks.indexOf(t);e>-1&&this.callbacks.splice(e,1)},e.fire=function(t){this.callbacks.slice(0).forEach(function(e){e(t)})},t}(),i="is-open",s=/*#__PURE__*/function(e){var s,n;function o(t){var i;return(i=e.call(this)||this).options=t,i.$input=t.el,i.data=!!t.data&&t.data,i.minChars=t.minChars?t.minChars:2,i.inputPreview=!t.inputPreview||t.inputPreview,i.onAjax=t.onAjax,i.hint=t.hint?t.hint:"When autocomplete results are available use up and down arrows to review and enter to select.",i.isEmpty=!0,i.hasEmptyState=!0,i.isOpen=!1,i.init(),i}n=e,(s=o).prototype=Object.create(n.prototype),s.prototype.constructor=s,t(s,n);var a=o.prototype;return a.setUp=function(){this.$input.setAttribute("autocomplete","off"),this.$input.setAttribute("aria-expanded","false"),this.$input.setAttribute("aria-haspopup","listbox"),this.$input.setAttribute("role","combobox"),this.$input.setAttribute("aria-autocomplete","list"),this.$input.setAttribute("aria-owns","modal-"+this.uid+"-list"),this.$input.id="autocomplete-input-"+this.uid,this.$input.setAttribute("aria-describedby","assistiveHint-"+this.uid)},a.initModal=function(){this.$input.insertAdjacentHTML("afterend",this.generateModal()),this.$input.insertAdjacentHTML("afterend",this.generateAssistiveHint()),this.$input.insertAdjacentHTML("afterend",this.generateStatus()),this.$modal=document.querySelector("#modal-"+this.uid),this.$status=document.querySelector("#status-"+this.uid),this.list=this.$modal.querySelector(".autocomplete-modal__list"),this.$empty=this.$modal.querySelector(".autocomplete-modal__empty"),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden"},a.initInputCheck=function(){var t=this;this.isDisabled||this.$input.addEventListener("input",this.onAjax?function(i){t.value=i.target.value,t.minCharsExcceded()?(e.prototype.dispatch.call(t,"loadingData",{input:t.$input,modal:t.$modal,flotsam:t,options:t.options}),t.onAjax(t.value).then(function(i){t.data=i,e.prototype.dispatch.call(t,"loadedData",{input:t.$input,modal:t.$modal,flotsam:t,options:t.options}),t.update()})):t.isOpen&&t.closeModal()}:function(e){t.value=e.target.value,t.minCharsExcceded()?t.update():t.isOpen&&t.closeModal()})},a.generateAssistiveHint=function(){return'\n            <div id="assistiveHint-'+this.uid+'" style="display: none">\n                '+this.hint+"\n            </div>\n        "},a.generateStatus=function(){return'\n            <div id="status-'+this.uid+'" aria-role=\'status\' aria-live="polite" style="display: none">\n                \n            </div>\n        '},a.update=function(){var t=this;0!==this.data.length&&(this.data=this.data.filter(function(e){if(e.toLowerCase().includes(t.value.toLowerCase()))return e})),0===this.data.length?this.showEmptyState():(this.hideEmptyState(),this.generateListItems(),!1===this.isOpen&&this.openModal())},a.preventSubmit=function(t){t.preventDefault()},a.showEmptyState=function(){this.removeListItems(),this.$empty.innerHTML='<div>Sorry there are no results for <strong>"'+this.value+'"</strong> please search again</div>',this.$empty.style.display="block",this.isOpen||this.openModal()},a.hideEmptyState=function(){this.$empty.innerHTML="",this.$empty.style.display="none"},a.openModal=function(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.isOpen=!0,this.$modal.style.pointerEvents="auto",this.$modal.style.visibility="visible",this.$input.classList.add(i),this.$input.setAttribute("aria-expanded","true"),e.prototype.dispatch.call(this,"openModal",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options}))},a.closeModal=function(){this.hideEmptyState(),this.removeListItems(),this.unsetSelected(),this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),document.removeEventListener("keydown",this.checkKey,!0)),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden",this.$input.classList.remove(i),this.$input.focus(),this.isOpen=!1,e.prototype.dispatch.call(this,"closeModal",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})},a.checkKey=function(t){"38"==t.keyCode?this.selectPrev():"40"==t.keyCode?this.selectNext():"37"==t.keyCode||"39"==t.keyCode||("27"==t.keyCode||"9"==t.keyCode?(t.preventDefault(),this.closeModal()):"13"==t.keyCode&&(t.preventDefault(),this.closeModal(),this.$input.closest("form").submit()))},a.selectItem=function(){var t=this;[].concat(this.list.querySelectorAll("li")).forEach(function(i,s){s===t.currentSelected?(i.classList.add("selected-item"),i.setAttribute("aria-selected","true"),console.log(i.id),console.log(i),t.$input.setAttribute("aria-activedescendant",i.id),t.inputPreview&&t.setInput(i.innerText),e.prototype.dispatch.call(t,"selectKey",{selected:i.textContent,input:t.$input,modal:t.$modal,flotsam:t,options:t.options})):(i.classList.remove("selected-item"),i.setAttribute("aria-selected","false"))})},a.selectNext=function(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()},a.selectPrev=function(){this.currentSelected=this.currentSelected-1,this.selectItem()},a.unsetSelected=function(){this.currentSelected=null;var t=[].concat(this.list.querySelectorAll("li"));this.$input.removeAttribute("aria-activedescendant"),t.forEach(function(t){t.classList.remove("selected-item")})},a.generateModal=function(){return console.log(this.uid),'\n        <div class="autocomplete-modal" id="modal-'+this.uid+'" >\n            <div class="autocomplete-modal__inner">\n                <ul \n                    class="autocomplete-modal__list" \n                    role="listbox" \n                    id="modal-'+this.uid+'-list">\n                </ul>\n                <div class="autocomplete-modal__empty" style="display: none"></div>\n            </div>\n        </div>\n    '},a.generateListItems=function(){var t=this;this.unsetSelected();var e="";this.data.forEach(function(i,s){var n=new RegExp(t.value,"gi"),o=i.replace(n,function(t){return'<span class="autocomplete-modal__list-highlight">'+t+"</span>"});e+='\n                <li class="autocomplete-modal__list-item" role="option" aria-posinset="'+(s+1)+'" aria-setsize="'+t.data.length+'" aria-selected="false" id="list-item-'+s+"--"+t.uid+'" tab-index="-1">\n                    '+o+"\n                </li>"}),this.list.innerHTML=e,[].concat(this.list.querySelectorAll("li")).forEach(function(e){e.addEventListener("click",function(){t.setInput(e.innerText),t.closeModal()})})},a.removeListItems=function(){this.list.innerHTML=""},a.setInput=function(t){this.$input.value=t},a.triggerClose=function(){this.closeModal()},a.triggerDisable=function(){this.isDisabled=!0,this.closeModal(),e.prototype.dispatch.call(this,"disabled",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})},a.triggerEnable=function(){this.isDisabled=!1},a.minCharsExcceded=function(){return this.value.length>=this.minChars},a.init=function(){var t=this;this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),console.log(this.uid),setTimeout(function(){e.prototype.dispatch.call(t,"init",{input:t.$input,modal:t.$modal,flotsam:t,options:t.options})},0)},o}(/*#__PURE__*/function(){function t(){this.events={},this.uid=Math.floor(1e3+9e4*Math.random())}var i=t.prototype;return i.dispatch=function(t,e){var i=this.events[t];i&&i.fire(e)},i.on=function(t,i){var s=this.events[t];s||(s=new e(t),this.events[t]=s),s.registerCallback(i)},i.off=function(t,e){var i=this.events[t];i&&i.callbacks.indexOf(e)>-1&&(i.unregisterCallback(e),0===i.callbacks.length&&delete this.events[t])},t}());export{s as default};
 //# sourceMappingURL=flotsam.module.js.map

dist/flotsam.umd.js

 !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t||self).flotsamAutocomplete=e()}(this,function(){function t(e,i){return t=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},t(e,i)}var e=/*#__PURE__*/function(){function t(t){this.eventName=t,this.callbacks=[]}var e=t.prototype;return e.registerCallback=function(t){this.callbacks.push(t)},e.unregisterCallback=function(t){var e=this.callbacks.indexOf(t);e>-1&&this.callbacks.splice(e,1)},e.fire=function(t){this.callbacks.slice(0).forEach(function(e){e(t)})},t}(),i="is-open";/*#__PURE__*/
-return function(e){var s,n;function o(t){var i;return(i=e.call(this)||this).options=t,i.$input=t.el,i.data=!!t.data&&t.data,i.minChars=t.minChars?t.minChars:2,i.inputPreview=!t.inputPreview||t.inputPreview,i.onAjax=t.onAjax,i.isEmpty=!0,i.hasEmptyState=!0,i.isOpen=!1,i.init(),i}n=e,(s=o).prototype=Object.create(n.prototype),s.prototype.constructor=s,t(s,n);var a=o.prototype;return a.setUp=function(){this.$input.setAttribute("autocomplete","off"),this.$input.setAttribute("aira-expanded","false"),this.$input.setAttribute("aira-haspopup","listbox"),this.$input.setAttribute("role","combobox"),this.$input.setAttribute("aira-autocomplete","list"),this.$input.setAttribute("aira-owns","modal-"+e.prototype.uid+"-list"),this.$input.id="autocomplete-input-"+e.prototype.uid},a.initModal=function(){this.$input.insertAdjacentHTML("afterend",this.generateModal()),this.$modal=document.querySelector("#modal-"+e.prototype.uid),this.list=this.$modal.querySelector(".autocomplete-modal__list"),this.$empty=this.$modal.querySelector(".autocomplete-modal__empty"),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden"},a.initInputCheck=function(){var t=this;this.isDisabled||this.$input.addEventListener("input",this.onAjax?function(i){t.value=i.target.value,t.minCharsExcceded()?(e.prototype.dispatch.call(t,"loadingData",{input:t.$input,modal:t.$modal,flotsam:t,options:t.options}),t.onAjax(t.value).then(function(i){t.data=i,e.prototype.dispatch.call(t,"loadedData",{input:t.$input,modal:t.$modal,flotsam:t,options:t.options}),t.update()})):t.isOpen&&t.closeModal()}:function(e){t.value=e.target.value,t.minCharsExcceded()?t.update():t.isOpen&&t.closeModal()})},a.update=function(){var t=this;0!==this.data.length&&(this.data=this.data.filter(function(e){if(e.toLowerCase().includes(t.value.toLowerCase()))return e})),0===this.data.length?this.showEmptyState():(this.hideEmptyState(),this.generateListItems(),!1===this.isOpen&&this.openModal())},a.preventSubmit=function(t){t.preventDefault()},a.showEmptyState=function(){this.removeListItems(),this.$empty.innerHTML='<div>Sorry there are no results for <strong>"'+this.value+'"</strong> please search again</div>',this.$empty.style.display="block",this.isOpen||this.openModal()},a.hideEmptyState=function(){this.$empty.innerHTML="",this.$empty.style.display="none"},a.openModal=function(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.isOpen=!0,this.$modal.style.pointerEvents="auto",this.$modal.style.visibility="visible",this.$input.classList.add(i),this.$input.setAttribute("aira-expanded","true"),e.prototype.dispatch.call(this,"openModal",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options}))},a.closeModal=function(){this.hideEmptyState(),this.removeListItems(),this.unsetSelected(),this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),document.removeEventListener("keydown",this.checkKey,!0)),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden",this.$input.classList.remove(i),this.$input.focus(),this.isOpen=!1,e.prototype.dispatch.call(this,"closeModal",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})},a.checkKey=function(t){"38"==t.keyCode?this.selectPrev():"40"==t.keyCode?this.selectNext():"37"==t.keyCode||"39"==t.keyCode||("27"==t.keyCode||"9"==t.keyCode?(t.preventDefault(),this.closeModal()):"13"==t.keyCode&&(t.preventDefault(),this.closeModal(),this.$input.closest("form").submit()))},a.selectItem=function(){var t=this;[].concat(this.list.querySelectorAll("li")).forEach(function(i,s){s===t.currentSelected?(i.classList.add("selected-item"),i.setAttribute("aira-selected","true"),t.$input.setAttribute("aira-activedescendant",i.id),t.inputPreview&&t.setInput(i.innerText),e.prototype.dispatch.call(t,"selectKey",{selected:i.textContent,input:t.$input,modal:t.$modal,flotsam:t,options:t.options})):(i.classList.remove("selected-item"),i.setAttribute("aira-selected","false"))})},a.selectNext=function(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()},a.selectPrev=function(){this.currentSelected=this.currentSelected-1,this.selectItem()},a.unsetSelected=function(){this.currentSelected=null;var t=[].concat(this.list.querySelectorAll("li"));this.$input.removeAttribute("aira-activedescendant"),t.forEach(function(t){t.classList.remove("selected-item")})},a.generateModal=function(){return'\n        <div class="autocomplete-modal" id="modal-'+e.prototype.uid+'" >\n            <div class="autocomplete-modal__inner">\n                <ul \n                    class="autocomplete-modal__list" \n                    role="listbox" \n                    id="modal-'+e.prototype.uid+'-list">\n                </ul>\n                <div class="autocomplete-modal__empty" style="display: none"></div>\n            </div>\n        </div>\n    '},a.generateListItems=function(){var t=this;this.unsetSelected();var e="";this.data.forEach(function(i,s){var n=new RegExp(t.value,"gi"),o=i.replace(n,function(t){return'<span class="autocomplete-modal__list-highlight">'+t+"</span>"});e+='\n                <li class="autocomplete-modal__list-item" role="option" aria-posinset="'+(s+1)+'" aira-selected="false" id="list-item--'+t.uid+'">\n                    <button tab-index="-1">\n                        '+o+"\n                    </button>\n                </li>"}),this.list.innerHTML=e,[].concat(this.list.querySelectorAll("li")).forEach(function(e){e.addEventListener("click",function(){t.setInput(e.innerText),t.closeModal()})})},a.removeListItems=function(){this.list.innerHTML=""},a.setInput=function(t){this.$input.value=t},a.triggerClose=function(){this.closeModal()},a.triggerDisable=function(){this.isDisabled=!0,this.closeModal(),e.prototype.dispatch.call(this,"disabled",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})},a.triggerEnable=function(){this.isDisabled=!1},a.minCharsExcceded=function(){return this.value.length>=this.minChars},a.init=function(){var t=this;this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),setTimeout(function(){e.prototype.dispatch.call(t,"init",{input:t.$input,modal:t.$modal,flotsam:t,options:t.options})},0)},o}(/*#__PURE__*/function(){function t(){this.events={},this.uid=Math.floor(1e3+9e4*Math.random())}var i=t.prototype;return i.dispatch=function(t,e){var i=this.events[t];i&&i.fire(e)},i.on=function(t,i){var s=this.events[t];s||(s=new e(t),this.events[t]=s),s.registerCallback(i)},i.off=function(t,e){var i=this.events[t];i&&i.callbacks.indexOf(e)>-1&&(i.unregisterCallback(e),0===i.callbacks.length&&delete this.events[t])},t}())});
+return function(e){var s,n;function o(t){var i;return(i=e.call(this)||this).options=t,i.$input=t.el,i.data=!!t.data&&t.data,i.minChars=t.minChars?t.minChars:2,i.inputPreview=!t.inputPreview||t.inputPreview,i.onAjax=t.onAjax,i.hint=t.hint?t.hint:"When autocomplete results are available use up and down arrows to review and enter to select.",i.isEmpty=!0,i.hasEmptyState=!0,i.isOpen=!1,i.init(),i}n=e,(s=o).prototype=Object.create(n.prototype),s.prototype.constructor=s,t(s,n);var a=o.prototype;return a.setUp=function(){this.$input.setAttribute("autocomplete","off"),this.$input.setAttribute("aria-expanded","false"),this.$input.setAttribute("aria-haspopup","listbox"),this.$input.setAttribute("role","combobox"),this.$input.setAttribute("aria-autocomplete","list"),this.$input.setAttribute("aria-owns","modal-"+this.uid+"-list"),this.$input.id="autocomplete-input-"+this.uid,this.$input.setAttribute("aria-describedby","assistiveHint-"+this.uid)},a.initModal=function(){this.$input.insertAdjacentHTML("afterend",this.generateModal()),this.$input.insertAdjacentHTML("afterend",this.generateAssistiveHint()),this.$input.insertAdjacentHTML("afterend",this.generateStatus()),this.$modal=document.querySelector("#modal-"+this.uid),this.$status=document.querySelector("#status-"+this.uid),this.list=this.$modal.querySelector(".autocomplete-modal__list"),this.$empty=this.$modal.querySelector(".autocomplete-modal__empty"),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden"},a.initInputCheck=function(){var t=this;this.isDisabled||this.$input.addEventListener("input",this.onAjax?function(i){t.value=i.target.value,t.minCharsExcceded()?(e.prototype.dispatch.call(t,"loadingData",{input:t.$input,modal:t.$modal,flotsam:t,options:t.options}),t.onAjax(t.value).then(function(i){t.data=i,e.prototype.dispatch.call(t,"loadedData",{input:t.$input,modal:t.$modal,flotsam:t,options:t.options}),t.update()})):t.isOpen&&t.closeModal()}:function(e){t.value=e.target.value,t.minCharsExcceded()?t.update():t.isOpen&&t.closeModal()})},a.generateAssistiveHint=function(){return'\n            <div id="assistiveHint-'+this.uid+'" style="display: none">\n                '+this.hint+"\n            </div>\n        "},a.generateStatus=function(){return'\n            <div id="status-'+this.uid+'" aria-role=\'status\' aria-live="polite" style="display: none">\n                \n            </div>\n        '},a.update=function(){var t=this;0!==this.data.length&&(this.data=this.data.filter(function(e){if(e.toLowerCase().includes(t.value.toLowerCase()))return e})),0===this.data.length?this.showEmptyState():(this.hideEmptyState(),this.generateListItems(),!1===this.isOpen&&this.openModal())},a.preventSubmit=function(t){t.preventDefault()},a.showEmptyState=function(){this.removeListItems(),this.$empty.innerHTML='<div>Sorry there are no results for <strong>"'+this.value+'"</strong> please search again</div>',this.$empty.style.display="block",this.isOpen||this.openModal()},a.hideEmptyState=function(){this.$empty.innerHTML="",this.$empty.style.display="none"},a.openModal=function(){this.isDisabled||(document.addEventListener("submit",this.preventSubmit),this.checkKey=this.checkKey.bind(this),document.addEventListener("keydown",this.checkKey,!0),this.isOpen=!0,this.$modal.style.pointerEvents="auto",this.$modal.style.visibility="visible",this.$input.classList.add(i),this.$input.setAttribute("aria-expanded","true"),e.prototype.dispatch.call(this,"openModal",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options}))},a.closeModal=function(){this.hideEmptyState(),this.removeListItems(),this.unsetSelected(),this.isOpen&&(document.removeEventListener("submit",this.preventSubmit),document.removeEventListener("keydown",this.checkKey,!0)),this.$modal.style.pointerEvents="none",this.$modal.style.visibility="hidden",this.$input.classList.remove(i),this.$input.focus(),this.isOpen=!1,e.prototype.dispatch.call(this,"closeModal",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})},a.checkKey=function(t){"38"==t.keyCode?this.selectPrev():"40"==t.keyCode?this.selectNext():"37"==t.keyCode||"39"==t.keyCode||("27"==t.keyCode||"9"==t.keyCode?(t.preventDefault(),this.closeModal()):"13"==t.keyCode&&(t.preventDefault(),this.closeModal(),this.$input.closest("form").submit()))},a.selectItem=function(){var t=this;[].concat(this.list.querySelectorAll("li")).forEach(function(i,s){s===t.currentSelected?(i.classList.add("selected-item"),i.setAttribute("aria-selected","true"),console.log(i.id),console.log(i),t.$input.setAttribute("aria-activedescendant",i.id),t.inputPreview&&t.setInput(i.innerText),e.prototype.dispatch.call(t,"selectKey",{selected:i.textContent,input:t.$input,modal:t.$modal,flotsam:t,options:t.options})):(i.classList.remove("selected-item"),i.setAttribute("aria-selected","false"))})},a.selectNext=function(){this.currentSelected=null===this.currentSelected?0:this.currentSelected+1,this.selectItem()},a.selectPrev=function(){this.currentSelected=this.currentSelected-1,this.selectItem()},a.unsetSelected=function(){this.currentSelected=null;var t=[].concat(this.list.querySelectorAll("li"));this.$input.removeAttribute("aria-activedescendant"),t.forEach(function(t){t.classList.remove("selected-item")})},a.generateModal=function(){return console.log(this.uid),'\n        <div class="autocomplete-modal" id="modal-'+this.uid+'" >\n            <div class="autocomplete-modal__inner">\n                <ul \n                    class="autocomplete-modal__list" \n                    role="listbox" \n                    id="modal-'+this.uid+'-list">\n                </ul>\n                <div class="autocomplete-modal__empty" style="display: none"></div>\n            </div>\n        </div>\n    '},a.generateListItems=function(){var t=this;this.unsetSelected();var e="";this.data.forEach(function(i,s){var n=new RegExp(t.value,"gi"),o=i.replace(n,function(t){return'<span class="autocomplete-modal__list-highlight">'+t+"</span>"});e+='\n                <li class="autocomplete-modal__list-item" role="option" aria-posinset="'+(s+1)+'" aria-setsize="'+t.data.length+'" aria-selected="false" id="list-item-'+s+"--"+t.uid+'" tab-index="-1">\n                    '+o+"\n                </li>"}),this.list.innerHTML=e,[].concat(this.list.querySelectorAll("li")).forEach(function(e){e.addEventListener("click",function(){t.setInput(e.innerText),t.closeModal()})})},a.removeListItems=function(){this.list.innerHTML=""},a.setInput=function(t){this.$input.value=t},a.triggerClose=function(){this.closeModal()},a.triggerDisable=function(){this.isDisabled=!0,this.closeModal(),e.prototype.dispatch.call(this,"disabled",{input:this.$input,modal:this.$modal,flotsam:this,options:this.options})},a.triggerEnable=function(){this.isDisabled=!1},a.minCharsExcceded=function(){return this.value.length>=this.minChars},a.init=function(){var t=this;this._self=this,this.currentSelected=null,this.isDisabled=!1,this.setUp(),this.initModal(),this.initInputCheck(),console.log(this.uid),setTimeout(function(){e.prototype.dispatch.call(t,"init",{input:t.$input,modal:t.$modal,flotsam:t,options:t.options})},0)},o}(/*#__PURE__*/function(){function t(){this.events={},this.uid=Math.floor(1e3+9e4*Math.random())}var i=t.prototype;return i.dispatch=function(t,e){var i=this.events[t];i&&i.fire(e)},i.on=function(t,i){var s=this.events[t];s||(s=new e(t),this.events[t]=s),s.registerCallback(i)},i.off=function(t,e){var i=this.events[t];i&&i.callbacks.indexOf(e)>-1&&(i.unregisterCallback(e),0===i.callbacks.length&&delete this.events[t])},t}())});
 //# sourceMappingURL=flotsam.umd.js.map

package.json

 {
     "name": "flotsam-autocomplete",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "description": "Accessibility first autocomplete without limiting style flexibility",
@@ -5,0 +5,0 @@ "type": "module",

src/index.js

@@ -24,2 +24,6 @@ import EventComponent from './EventComponent'
 
+        this.hint = options.hint
+            ? options.hint
+            : 'When autocomplete results are available use up and down arrows to review and enter to select.'
+
         this.isEmpty = true
@@ -42,8 +46,12 @@ this.hasEmptyState = true
         this.$input.setAttribute('autocomplete', 'off')
-        this.$input.setAttribute('aira-expanded', 'false')
-        this.$input.setAttribute('aira-haspopup', 'listbox')
+        this.$input.setAttribute('aria-expanded', 'false')
+        this.$input.setAttribute('aria-haspopup', 'listbox')
         this.$input.setAttribute('role', 'combobox')
-        this.$input.setAttribute('aira-autocomplete', 'list')
-        this.$input.setAttribute('aira-owns', `modal-${super.uid}-list`)
-        this.$input.id = `autocomplete-input-${super.uid}`
+        this.$input.setAttribute('aria-autocomplete', 'list')
+        this.$input.setAttribute('aria-owns', `modal-${this.uid}-list`)
+        this.$input.id = `autocomplete-input-${this.uid}`
+        this.$input.setAttribute(
+            'aria-describedby',
+            `assistiveHint-${this.uid}`
+        )
     }
@@ -54,5 +62,8 @@
         this.$input.insertAdjacentHTML('afterend', this.generateModal())
+        this.$input.insertAdjacentHTML('afterend', this.generateAssistiveHint())
+        this.$input.insertAdjacentHTML('afterend', this.generateStatus())
 
         // grab an instance of elems to use later
-        this.$modal = document.querySelector(`#modal-${super.uid}`)
+        this.$modal = document.querySelector(`#modal-${this.uid}`)
+        this.$status = document.querySelector(`#status-${this.uid}`)
         this.list = this.$modal.querySelector('.autocomplete-modal__list')
@@ -110,2 +121,22 @@ this.$empty = this.$modal.querySelector('.autocomplete-modal__empty')
 
+    ////////////////////////////////////////////////////
+    // init assisitve hint
+    ////////////////////////////////////////////////////
+
+    generateAssistiveHint() {
+        return `
+            <div id="assistiveHint-${this.uid}" style="display: none">
+                ${this.hint}
+            </div>
+        `
+    }
+
+    generateStatus() {
+        return `
+            <div id="status-${this.uid}" aria-role='status' aria-live="polite" style="display: none">
+                
+            </div>
+        `
+    }
+
     update() {
@@ -174,3 +205,3 @@ // filter the data
         this.$input.classList.add(OPEN_CLASS)
-        this.$input.setAttribute('aira-expanded', 'true')
+        this.$input.setAttribute('aria-expanded', 'true')
 
@@ -251,4 +282,6 @@ super.dispatch('openModal', {
                 // a11y features
-                item.setAttribute('aira-selected', 'true')
-                this.$input.setAttribute('aira-activedescendant', item.id)
+                item.setAttribute('aria-selected', 'true')
+                console.log(item.id)
+                console.log(item)
+                this.$input.setAttribute('aria-activedescendant', item.id)
 
@@ -270,3 +303,3 @@ // if prevew is on show the selected in the input box
                 item.classList.remove('selected-item')
-                item.setAttribute('aira-selected', 'false')
+                item.setAttribute('aria-selected', 'false')
             }
@@ -297,3 +330,3 @@ })
         // a11y feature
-        this.$input.removeAttribute('aira-activedescendant')
+        this.$input.removeAttribute('aria-activedescendant')
 
@@ -306,4 +339,5 @@ items.forEach((item) => {
     generateModal() {
+        console.log(this.uid)
         return `
-        <div class="autocomplete-modal" id="modal-${super.uid}" >
+        <div class="autocomplete-modal" id="modal-${this.uid}" >
             <div class="autocomplete-modal__inner">
@@ -313,3 +347,3 @@ <ul
                     role="listbox" 
-                    id="modal-${super.uid}-list">
+                    id="modal-${this.uid}-list">
                 </ul>
@@ -339,6 +373,4 @@ <div class="autocomplete-modal__empty" style="display: none"></div>
             list += `
-                <li class="autocomplete-modal__list-item" role="option" aria-posinset="${posIndex}" aira-selected="false" id="list-item--${this.uid}">
-                    <button tab-index="-1">
-                        ${response}
-                    </button>
+                <li class="autocomplete-modal__list-item" role="option" aria-posinset="${posIndex}" aria-setsize="${this.data.length}" aria-selected="false" id="list-item-${index}--${this.uid}" tab-index="-1">
+                    ${response}
                 </li>`
@@ -422,2 +454,4 @@ })
 
+        console.log(this.uid)
+
         // bug not triggering right away, so set it to next cycle
@@ -424,0 +458,0 @@ setTimeout(() => {

No alert changes

Improved metrics

Total package byte prevSize

155551

increased by8.01%

Lines of code

598

increased by6.98%

No dependency changes