vue-a11y-directives 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Vue A11y Directives Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,207 @@
+# Vue A11y Directives
+
+A comprehensive collection of Vue 3 directives for building accessible web applications with WCAG compliance.
+
+## 🚀 Features
+
+- **7 Powerful Directives** for complete accessibility control
+- **Zero Dependencies** - Lightweight and performant
+- **TypeScript Support** - Full type definitions included
+- **WCAG Compliant** - Follow web accessibility standards
+- **Easy to Use** - Simple directive-based API
+- **Well Documented** - Comprehensive documentation and examples
+
+## 📦 Installation
+
+```bash
+npm install vue-a11y-directives
+```
+
+## 🎯 Quick Start
+
+```javascript
+import { createApp } from 'vue'
+import App from './App.vue'
+import { installA11yDirectives } from 'vue-a11y-directives'
+
+const app = createApp(App)
+
+// Install all directives globally
+installA11yDirectives(app)
+
+app.mount('#app')
+```
+
+Or import individual directives:
+
+```javascript
+import { focusDirective, keyboardDirective, ariaDirective } from 'vue-a11y-directives'
+
+export default {
+  directives: {
+    'a11y-focus': focusDirective,
+    'a11y-keyboard': keyboardDirective,
+    'a11y-aria': ariaDirective
+  }
+}
+```
+
+## 📚 Available Directives
+
+### 1. `v-a11y-focus`
+Auto-focus elements with conditional logic.
+
+```vue
+<input v-a11y-focus />
+<input v-a11y-focus="isEditing" />
+```
+
+### 2. `v-a11y-keyboard`
+Enhanced keyboard navigation support.
+
+```vue
+<div v-a11y-keyboard="{ 
+  arrowDown: () => next(), 
+  arrowUp: () => prev(),
+  enter: () => select()
+}">
+```
+
+### 3. `v-a11y-aria`
+Dynamic ARIA attributes management.
+
+```vue
+<button v-a11y-aria="{ 
+  label: 'Close dialog',
+  expanded: isOpen,
+  controls: 'menu-id'
+}">
+```
+
+### 4. `v-a11y-announce`
+Screen reader announcements.
+
+```vue
+<div v-a11y-announce="statusMessage"></div>
+```
+
+### 5. `v-a11y-trap-focus`
+Trap focus within modals/dialogs.
+
+```vue
+<div v-a11y-trap-focus="isModalOpen">
+  <!-- Focus stays within this container -->
+</div>
+```
+
+### 6. `v-a11y-skip-link`
+Skip navigation links for keyboard users.
+
+```vue
+<a v-a11y-skip-link href="#main-content">Skip to main content</a>
+```
+
+### 7. `v-a11y-skip`
+Skip elements from keyboard navigation.
+
+```vue
+<!-- Always skip -->
+<div v-a11y-skip>Hidden content</div>
+
+<!-- Conditional skip -->
+<button v-a11y-skip="item.disabled">Button</button>
+
+<!-- With visual indication -->
+<div v-a11y-skip.visual="item.inactive">Grayed out</div>
+
+<!-- Block all interactions -->
+<div v-a11y-skip.noInteraction="isProcessing">Processing...</div>
+```
+
+## 🎨 Real-World Examples
+
+### Accessible Navigation Menu
+
+```vue
+<template>
+  <nav>
+    <div v-a11y-announce="announcement"></div>
+    <ul v-a11y-keyboard="keyboardHandlers" tabindex="0">
+      <li v-for="item in menuItems" :key="item.id">
+        <button 
+          v-a11y-aria="{ 
+            expanded: item.isOpen,
+            controls: `menu-${item.id}`
+          }"
+          @click="toggle(item)"
+        >
+          {{ item.label }}
+        </button>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      announcement: '',
+      menuItems: [
+        { id: 1, label: 'Home', isOpen: false },
+        { id: 2, label: 'Products', isOpen: false }
+      ]
+    }
+  },
+  computed: {
+    keyboardHandlers() {
+      return {
+        arrowDown: () => this.navigateNext(),
+        arrowUp: () => this.navigatePrev(),
+        enter: () => this.selectItem()
+      }
+    }
+  }
+}
+</script>
+```
+
+### Accessible Modal Dialog
+
+```vue
+<template>
+  <div v-if="isOpen" v-a11y-trap-focus="isOpen" class="modal">
+    <div v-a11y-announce="modalAnnouncement"></div>
+    <h2 v-a11y-focus>Modal Title</h2>
+    <button 
+      v-a11y-aria="{ label: 'Close modal' }"
+      @click="close"
+    >
+      ×
+    </button>
+  </div>
+</template>
+```
+
+## 📖 Documentation
+
+For complete documentation, examples, and interactive demos, visit:
+- [GitHub Repository](https://github.com/shkelqimemerllahu/vue-a11y-directives)
+- [Live Documentation](https://vue-a11y-directives.netlify.app) (coming soon)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📄 License
+
+MIT © [Shkelqim Emerllahu](https://github.com/shkelqimemerllahu)
+
+## 🌟 Show Your Support
+
+Give a ⭐️ if this project helped you!
+
+## 📞 Support
+
+- Create an [issue](https://github.com/shkelqimemerllahu/vue-a11y-directives/issues)
+- Follow me on [GitHub](https://github.com/shkelqimemerllahu)

package/dist/vue-a11y-directives.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y={mounted(e,i){const t=typeof i.value=="object"?i.value:{delay:i.value||0},n=t.delay||0,a=t.select||!1;setTimeout(()=>{e.focus&&(e.focus(),a&&(e.tagName==="INPUT"||e.tagName==="TEXTAREA")&&e.select())},n)}};function u(e){if(!e)return[];const i=["a[href]","button:not([disabled])","textarea:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])",'[tabindex]:not([tabindex="-1"])','[contenteditable="true"]',"audio[controls]","video[controls]"];return Array.from(e.querySelectorAll(i.join(", "))).filter(n=>{const a=window.getComputedStyle(n);return n.offsetWidth>0&&n.offsetHeight>0&&a.visibility!=="hidden"&&a.display!=="none"})}function c(e,i){Object.entries(i).forEach(([t,n])=>{n!=null&&e.setAttribute(t,n)})}function S(e,i){i.forEach(t=>{e.removeAttribute(t)})}function d(e,i="polite"){const t=document.createElement("div");t.setAttribute("role","status"),t.setAttribute("aria-live",i),t.setAttribute("aria-atomic","true"),t.style.position="absolute",t.style.left="-10000px",t.style.width="1px",t.style.height="1px",t.style.overflow="hidden",document.body.appendChild(t),setTimeout(()=>{t.textContent=e},100),setTimeout(()=>{document.body.removeChild(t)},3e3)}function w(e){const i=u(e);return i.length>0?i[0]:null}function x(e){const i=u(e);return i.length>0?i[i.length-1]:null}function E(e){return e.contains(document.activeElement)}function D(){return document.activeElement}function F(e){e&&e.focus&&e.focus()}function T(e="a11y"){return`${e}-${Math.random().toString(36).substr(2,9)}`}const p={mounted(e,i){const n=(i.value||{}).autoFocus!==!1,a=document.activeElement;e.__previousFocus=a,n&&setTimeout(()=>{const r=u(e);r.length>0&&r[0].focus()},100);const o=r=>{if(r.key!=="Tab")return;const s=u(e);if(s.length===0)return;const l=s[0],f=s[s.length-1];r.shiftKey&&document.activeElement===l?(r.preventDefault(),f.focus()):!r.shiftKey&&document.activeElement===f&&(r.preventDefault(),l.focus())};e.addEventListener("keydown",o),e.__handleKeydown=o},unmounted(e){e.__handleKeydown&&(e.removeEventListener("keydown",e.__handleKeydown),delete e.__handleKeydown),e.__previousFocus&&(setTimeout(()=>{if(e.__previousFocus&&document.body.contains(e.__previousFocus)&&typeof e.__previousFocus.focus=="function")try{e.__previousFocus.focus()}catch(i){console.warn("Could not restore focus:",i)}},0),delete e.__previousFocus)}},v={mounted(e,i){const t=i.value||{};console.log("Keyboard directive mounted with config:",t);const n=a=>{console.log("Key pressed:",a.key,"Config:",t);const o={Enter:"enter"," ":"space",Escape:"escape",ArrowUp:"arrowUp",ArrowDown:"arrowDown",ArrowLeft:"arrowLeft",ArrowRight:"arrowRight",Tab:"tab",Delete:"delete",Backspace:"backspace"};let r="";(a.ctrlKey||a.metaKey)&&(r+="ctrl+"),a.altKey&&(r+="alt+"),a.shiftKey&&(r+="shift+"),r+=a.key.toLowerCase();const s=o[a.key];if(s&&typeof t[s]=="function"){a.preventDefault(),t[s](a);return}if(t[r]&&typeof t[r]=="function"){a.preventDefault(),t[r](a);return}if(t[a.key]&&typeof t[a.key]=="function"){a.preventDefault(),t[a.key](a);return}if(t.arrows&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(a.key)&&typeof t.arrows=="function"){a.preventDefault(),t.arrows(a);return}if(t.handlers){if(t.handlers[a.key]&&typeof t.handlers[a.key]=="function"){a.preventDefault(),t.handlers[a.key](a);return}if(t.handlers[r]&&typeof t.handlers[r]=="function"){a.preventDefault(),t.handlers[r](a);return}}if(t.custom&&typeof t.custom=="function"){t.custom(a);return}t.enter===!0&&a.key==="Enter"&&!["INPUT","TEXTAREA","SELECT"].includes(a.target.tagName)&&(a.preventDefault(),e.click&&e.click()),t.space===!0&&a.key===" "&&["BUTTON","A"].includes(e.tagName)&&(a.preventDefault(),e.click&&e.click())};e.addEventListener("keydown",n),e.__keyboardHandler=n},unmounted(e){e.__keyboardHandler&&(e.removeEventListener("keydown",e.__keyboardHandler),delete e.__keyboardHandler)}},m={mounted(e,i){if(!i.value)return;const t=typeof i.value=="string"?{message:i.value,priority:"polite"}:i.value;t&&t.message&&d(t.message,t.priority||"polite")},updated(e,i){if(i.value!==i.oldValue&&i.value){const t=typeof i.value=="string"?{message:i.value,priority:"polite"}:i.value;t&&t.message&&d(t.message,t.priority||"polite")}}},_={mounted(e,i){const t=i.value,n=a=>{a.preventDefault();const o=document.querySelector(t);o&&(o.hasAttribute("tabindex")||o.setAttribute("tabindex","-1"),o.focus(),o.scrollIntoView({behavior:"smooth",block:"start"}))};e.addEventListener("click",n),e.__skipLinkHandler=n,e.setAttribute("role","link"),t&&e.setAttribute("aria-label",`Skip to ${t.replace("#","")}`)},unmounted(e){e.__skipLinkHandler&&(e.removeEventListener("click",e.__skipLinkHandler),delete e.__skipLinkHandler)}},k={mounted(e,i){b(e,i)},updated(e,i){b(e,i)},unmounted(e){delete e.__a11ySkipOriginalTabIndex,delete e.__a11ySkipOriginalAriaHidden,delete e.__a11ySkipChildrenState}};function b(e,i){if(i.value===void 0?!0:!!i.value){e.__a11ySkipOriginalTabIndex===void 0&&(e.__a11ySkipOriginalTabIndex=e.getAttribute("tabindex")),e.__a11ySkipOriginalAriaHidden===void 0&&(e.__a11ySkipOriginalAriaHidden=e.getAttribute("aria-hidden")),e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","true"),e.setAttribute("data-a11y-skip","true");const n=e.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.__a11ySkipChildrenState||(e.__a11ySkipChildrenState=[]),n.forEach((a,o)=>{e.__a11ySkipChildrenState[o]||(e.__a11ySkipChildrenState[o]={tabIndex:a.getAttribute("tabindex"),disabled:a.disabled}),a.setAttribute("tabindex","-1"),"disabled"in a&&(a.disabled=!0)}),i.modifiers.noInteraction&&(e.style.pointerEvents="none"),i.modifiers.visual&&(e.style.opacity="0.5",e.style.filter="grayscale(100%)",e.style.pointerEvents="none")}else{e.__a11ySkipOriginalTabIndex!==void 0?e.__a11ySkipOriginalTabIndex===null?e.removeAttribute("tabindex"):e.setAttribute("tabindex",e.__a11ySkipOriginalTabIndex):e.removeAttribute("tabindex"),e.__a11ySkipOriginalAriaHidden!==void 0?e.__a11ySkipOriginalAriaHidden===null?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",e.__a11ySkipOriginalAriaHidden):e.removeAttribute("aria-hidden"),e.removeAttribute("data-a11y-skip");const n=e.querySelectorAll("a, button, input, select, textarea, [tabindex]");e.__a11ySkipChildrenState&&n.forEach((a,o)=>{const r=e.__a11ySkipChildrenState[o];r&&(r.tabIndex===null?a.removeAttribute("tabindex"):a.setAttribute("tabindex",r.tabIndex),"disabled"in a&&(a.disabled=r.disabled))}),i.modifiers.noInteraction&&(e.style.pointerEvents=""),i.modifiers.visual&&(e.style.opacity="",e.style.filter="",e.style.pointerEvents="")}}const h={mounted(e,i){const t=i.value||{},n={label:"aria-label",labelledby:"aria-labelledby",describedby:"aria-describedby",expanded:"aria-expanded",pressed:"aria-pressed",selected:"aria-selected",checked:"aria-checked",disabled:"aria-disabled",hidden:"aria-hidden",invalid:"aria-invalid",required:"aria-required",live:"aria-live",atomic:"aria-atomic",busy:"aria-busy",controls:"aria-controls",owns:"aria-owns",haspopup:"aria-haspopup",level:"aria-level",modal:"aria-modal",multiselectable:"aria-multiselectable",orientation:"aria-orientation",placeholder:"aria-placeholder",readonly:"aria-readonly",relevant:"aria-relevant",valuemax:"aria-valuemax",valuemin:"aria-valuemin",valuenow:"aria-valuenow",valuetext:"aria-valuetext"},a={};Object.entries(t).forEach(([o,r])=>{const s=n[o]||o;a[s]=r}),c(e,a),e.__ariaAttributes=Object.keys(a)},updated(e,i){if(JSON.stringify(i.value)!==JSON.stringify(i.oldValue)){e.__ariaAttributes&&e.__ariaAttributes.forEach(o=>e.removeAttribute(o));const t=i.value||{},n={label:"aria-label",labelledby:"aria-labelledby",describedby:"aria-describedby",expanded:"aria-expanded",pressed:"aria-pressed",selected:"aria-selected",checked:"aria-checked",disabled:"aria-disabled",hidden:"aria-hidden",invalid:"aria-invalid",required:"aria-required",live:"aria-live",atomic:"aria-atomic",busy:"aria-busy",controls:"aria-controls",owns:"aria-owns",haspopup:"aria-haspopup",level:"aria-level",modal:"aria-modal"},a={};Object.entries(t).forEach(([o,r])=>{const s=n[o]||o;a[s]=r}),c(e,a),e.__ariaAttributes=Object.keys(a)}},unmounted(e){e.__ariaAttributes&&(e.__ariaAttributes.forEach(i=>e.removeAttribute(i)),delete e.__ariaAttributes)}},A={"a11y-focus":y,"a11y-trap-focus":p,"a11y-keyboard":v,"a11y-announce":m,"a11y-skip-link":_,"a11y-skip":k,"a11y-aria":h};function g(e){Object.entries(A).forEach(([i,t])=>{e.directive(i,t)})}const O={install:g};exports.a11yDirectives=A;exports.announce=d;exports.announceDirective=m;exports.ariaDirective=h;exports.containsActiveElement=E;exports.default=O;exports.focusDirective=y;exports.generateId=T;exports.getFirstFocusable=w;exports.getFocusableElements=u;exports.getLastFocusable=x;exports.installA11yDirectives=g;exports.keyboardDirective=v;exports.removeAriaAttributes=S;exports.restoreFocus=F;exports.saveFocus=D;exports.setAriaAttributes=c;exports.skipDirective=k;exports.skipLinkDirective=_;exports.trapFocusDirective=p;

package/dist/vue-a11y-directives.esm.js

@@ -0,0 +1,315 @@
+const p = {
+  mounted(e, i) {
+    const t = typeof i.value == "object" ? i.value : { delay: i.value || 0 }, n = t.delay || 0, a = t.select || !1;
+    setTimeout(() => {
+      e.focus && (e.focus(), a && (e.tagName === "INPUT" || e.tagName === "TEXTAREA") && e.select());
+    }, n);
+  }
+};
+function u(e) {
+  if (!e) return [];
+  const i = [
+    "a[href]",
+    "button:not([disabled])",
+    "textarea:not([disabled])",
+    'input:not([disabled]):not([type="hidden"])',
+    "select:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]',
+    "audio[controls]",
+    "video[controls]"
+  ];
+  return Array.from(e.querySelectorAll(i.join(", "))).filter((n) => {
+    const a = window.getComputedStyle(n);
+    return n.offsetWidth > 0 && n.offsetHeight > 0 && a.visibility !== "hidden" && a.display !== "none";
+  });
+}
+function l(e, i) {
+  Object.entries(i).forEach(([t, n]) => {
+    n != null && e.setAttribute(t, n);
+  });
+}
+function S(e, i) {
+  i.forEach((t) => {
+    e.removeAttribute(t);
+  });
+}
+function f(e, i = "polite") {
+  const t = document.createElement("div");
+  t.setAttribute("role", "status"), t.setAttribute("aria-live", i), t.setAttribute("aria-atomic", "true"), t.style.position = "absolute", t.style.left = "-10000px", t.style.width = "1px", t.style.height = "1px", t.style.overflow = "hidden", document.body.appendChild(t), setTimeout(() => {
+    t.textContent = e;
+  }, 100), setTimeout(() => {
+    document.body.removeChild(t);
+  }, 3e3);
+}
+function w(e) {
+  const i = u(e);
+  return i.length > 0 ? i[0] : null;
+}
+function x(e) {
+  const i = u(e);
+  return i.length > 0 ? i[i.length - 1] : null;
+}
+function E(e) {
+  return e.contains(document.activeElement);
+}
+function D() {
+  return document.activeElement;
+}
+function T(e) {
+  e && e.focus && e.focus();
+}
+function O(e = "a11y") {
+  return `${e}-${Math.random().toString(36).substr(2, 9)}`;
+}
+const b = {
+  mounted(e, i) {
+    const n = (i.value || {}).autoFocus !== !1, a = document.activeElement;
+    e.__previousFocus = a, n && setTimeout(() => {
+      const r = u(e);
+      r.length > 0 && r[0].focus();
+    }, 100);
+    const o = (r) => {
+      if (r.key !== "Tab") return;
+      const s = u(e);
+      if (s.length === 0) return;
+      const d = s[0], c = s[s.length - 1];
+      r.shiftKey && document.activeElement === d ? (r.preventDefault(), c.focus()) : !r.shiftKey && document.activeElement === c && (r.preventDefault(), d.focus());
+    };
+    e.addEventListener("keydown", o), e.__handleKeydown = o;
+  },
+  unmounted(e) {
+    e.__handleKeydown && (e.removeEventListener("keydown", e.__handleKeydown), delete e.__handleKeydown), e.__previousFocus && (setTimeout(() => {
+      if (e.__previousFocus && document.body.contains(e.__previousFocus) && typeof e.__previousFocus.focus == "function")
+        try {
+          e.__previousFocus.focus();
+        } catch (i) {
+          console.warn("Could not restore focus:", i);
+        }
+    }, 0), delete e.__previousFocus);
+  }
+}, v = {
+  mounted(e, i) {
+    const t = i.value || {};
+    console.log("Keyboard directive mounted with config:", t);
+    const n = (a) => {
+      console.log("Key pressed:", a.key, "Config:", t);
+      const o = {
+        Enter: "enter",
+        " ": "space",
+        Escape: "escape",
+        ArrowUp: "arrowUp",
+        ArrowDown: "arrowDown",
+        ArrowLeft: "arrowLeft",
+        ArrowRight: "arrowRight",
+        Tab: "tab",
+        Delete: "delete",
+        Backspace: "backspace"
+      };
+      let r = "";
+      (a.ctrlKey || a.metaKey) && (r += "ctrl+"), a.altKey && (r += "alt+"), a.shiftKey && (r += "shift+"), r += a.key.toLowerCase();
+      const s = o[a.key];
+      if (s && typeof t[s] == "function") {
+        a.preventDefault(), t[s](a);
+        return;
+      }
+      if (t[r] && typeof t[r] == "function") {
+        a.preventDefault(), t[r](a);
+        return;
+      }
+      if (t[a.key] && typeof t[a.key] == "function") {
+        a.preventDefault(), t[a.key](a);
+        return;
+      }
+      if (t.arrows && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(a.key) && typeof t.arrows == "function") {
+        a.preventDefault(), t.arrows(a);
+        return;
+      }
+      if (t.handlers) {
+        if (t.handlers[a.key] && typeof t.handlers[a.key] == "function") {
+          a.preventDefault(), t.handlers[a.key](a);
+          return;
+        }
+        if (t.handlers[r] && typeof t.handlers[r] == "function") {
+          a.preventDefault(), t.handlers[r](a);
+          return;
+        }
+      }
+      if (t.custom && typeof t.custom == "function") {
+        t.custom(a);
+        return;
+      }
+      t.enter === !0 && a.key === "Enter" && !["INPUT", "TEXTAREA", "SELECT"].includes(a.target.tagName) && (a.preventDefault(), e.click && e.click()), t.space === !0 && a.key === " " && ["BUTTON", "A"].includes(e.tagName) && (a.preventDefault(), e.click && e.click());
+    };
+    e.addEventListener("keydown", n), e.__keyboardHandler = n;
+  },
+  unmounted(e) {
+    e.__keyboardHandler && (e.removeEventListener("keydown", e.__keyboardHandler), delete e.__keyboardHandler);
+  }
+}, m = {
+  mounted(e, i) {
+    if (!i.value) return;
+    const t = typeof i.value == "string" ? { message: i.value, priority: "polite" } : i.value;
+    t && t.message && f(t.message, t.priority || "polite");
+  },
+  updated(e, i) {
+    if (i.value !== i.oldValue && i.value) {
+      const t = typeof i.value == "string" ? { message: i.value, priority: "polite" } : i.value;
+      t && t.message && f(t.message, t.priority || "polite");
+    }
+  }
+}, _ = {
+  mounted(e, i) {
+    const t = i.value, n = (a) => {
+      a.preventDefault();
+      const o = document.querySelector(t);
+      o && (o.hasAttribute("tabindex") || o.setAttribute("tabindex", "-1"), o.focus(), o.scrollIntoView({ behavior: "smooth", block: "start" }));
+    };
+    e.addEventListener("click", n), e.__skipLinkHandler = n, e.setAttribute("role", "link"), t && e.setAttribute("aria-label", `Skip to ${t.replace("#", "")}`);
+  },
+  unmounted(e) {
+    e.__skipLinkHandler && (e.removeEventListener("click", e.__skipLinkHandler), delete e.__skipLinkHandler);
+  }
+}, k = {
+  mounted(e, i) {
+    y(e, i);
+  },
+  updated(e, i) {
+    y(e, i);
+  },
+  unmounted(e) {
+    delete e.__a11ySkipOriginalTabIndex, delete e.__a11ySkipOriginalAriaHidden, delete e.__a11ySkipChildrenState;
+  }
+};
+function y(e, i) {
+  if (i.value === void 0 ? !0 : !!i.value) {
+    e.__a11ySkipOriginalTabIndex === void 0 && (e.__a11ySkipOriginalTabIndex = e.getAttribute("tabindex")), e.__a11ySkipOriginalAriaHidden === void 0 && (e.__a11ySkipOriginalAriaHidden = e.getAttribute("aria-hidden")), e.setAttribute("tabindex", "-1"), e.setAttribute("aria-hidden", "true"), e.setAttribute("data-a11y-skip", "true");
+    const n = e.querySelectorAll(
+      'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    e.__a11ySkipChildrenState || (e.__a11ySkipChildrenState = []), n.forEach((a, o) => {
+      e.__a11ySkipChildrenState[o] || (e.__a11ySkipChildrenState[o] = {
+        tabIndex: a.getAttribute("tabindex"),
+        disabled: a.disabled
+      }), a.setAttribute("tabindex", "-1"), "disabled" in a && (a.disabled = !0);
+    }), i.modifiers.noInteraction && (e.style.pointerEvents = "none"), i.modifiers.visual && (e.style.opacity = "0.5", e.style.filter = "grayscale(100%)", e.style.pointerEvents = "none");
+  } else {
+    e.__a11ySkipOriginalTabIndex !== void 0 ? e.__a11ySkipOriginalTabIndex === null ? e.removeAttribute("tabindex") : e.setAttribute("tabindex", e.__a11ySkipOriginalTabIndex) : e.removeAttribute("tabindex"), e.__a11ySkipOriginalAriaHidden !== void 0 ? e.__a11ySkipOriginalAriaHidden === null ? e.removeAttribute("aria-hidden") : e.setAttribute("aria-hidden", e.__a11ySkipOriginalAriaHidden) : e.removeAttribute("aria-hidden"), e.removeAttribute("data-a11y-skip");
+    const n = e.querySelectorAll(
+      "a, button, input, select, textarea, [tabindex]"
+    );
+    e.__a11ySkipChildrenState && n.forEach((a, o) => {
+      const r = e.__a11ySkipChildrenState[o];
+      r && (r.tabIndex === null ? a.removeAttribute("tabindex") : a.setAttribute("tabindex", r.tabIndex), "disabled" in a && (a.disabled = r.disabled));
+    }), i.modifiers.noInteraction && (e.style.pointerEvents = ""), i.modifiers.visual && (e.style.opacity = "", e.style.filter = "", e.style.pointerEvents = "");
+  }
+}
+const h = {
+  mounted(e, i) {
+    const t = i.value || {}, n = {
+      label: "aria-label",
+      labelledby: "aria-labelledby",
+      describedby: "aria-describedby",
+      expanded: "aria-expanded",
+      pressed: "aria-pressed",
+      selected: "aria-selected",
+      checked: "aria-checked",
+      disabled: "aria-disabled",
+      hidden: "aria-hidden",
+      invalid: "aria-invalid",
+      required: "aria-required",
+      live: "aria-live",
+      atomic: "aria-atomic",
+      busy: "aria-busy",
+      controls: "aria-controls",
+      owns: "aria-owns",
+      haspopup: "aria-haspopup",
+      level: "aria-level",
+      modal: "aria-modal",
+      multiselectable: "aria-multiselectable",
+      orientation: "aria-orientation",
+      placeholder: "aria-placeholder",
+      readonly: "aria-readonly",
+      relevant: "aria-relevant",
+      valuemax: "aria-valuemax",
+      valuemin: "aria-valuemin",
+      valuenow: "aria-valuenow",
+      valuetext: "aria-valuetext"
+    }, a = {};
+    Object.entries(t).forEach(([o, r]) => {
+      const s = n[o] || o;
+      a[s] = r;
+    }), l(e, a), e.__ariaAttributes = Object.keys(a);
+  },
+  updated(e, i) {
+    if (JSON.stringify(i.value) !== JSON.stringify(i.oldValue)) {
+      e.__ariaAttributes && e.__ariaAttributes.forEach((o) => e.removeAttribute(o));
+      const t = i.value || {}, n = {
+        label: "aria-label",
+        labelledby: "aria-labelledby",
+        describedby: "aria-describedby",
+        expanded: "aria-expanded",
+        pressed: "aria-pressed",
+        selected: "aria-selected",
+        checked: "aria-checked",
+        disabled: "aria-disabled",
+        hidden: "aria-hidden",
+        invalid: "aria-invalid",
+        required: "aria-required",
+        live: "aria-live",
+        atomic: "aria-atomic",
+        busy: "aria-busy",
+        controls: "aria-controls",
+        owns: "aria-owns",
+        haspopup: "aria-haspopup",
+        level: "aria-level",
+        modal: "aria-modal"
+      }, a = {};
+      Object.entries(t).forEach(([o, r]) => {
+        const s = n[o] || o;
+        a[s] = r;
+      }), l(e, a), e.__ariaAttributes = Object.keys(a);
+    }
+  },
+  unmounted(e) {
+    e.__ariaAttributes && (e.__ariaAttributes.forEach((i) => e.removeAttribute(i)), delete e.__ariaAttributes);
+  }
+}, A = {
+  "a11y-focus": p,
+  "a11y-trap-focus": b,
+  "a11y-keyboard": v,
+  "a11y-announce": m,
+  "a11y-skip-link": _,
+  "a11y-skip": k,
+  "a11y-aria": h
+};
+function g(e) {
+  Object.entries(A).forEach(([i, t]) => {
+    e.directive(i, t);
+  });
+}
+const F = {
+  install: g
+};
+export {
+  A as a11yDirectives,
+  f as announce,
+  m as announceDirective,
+  h as ariaDirective,
+  E as containsActiveElement,
+  F as default,
+  p as focusDirective,
+  O as generateId,
+  w as getFirstFocusable,
+  u as getFocusableElements,
+  x as getLastFocusable,
+  g as installA11yDirectives,
+  v as keyboardDirective,
+  S as removeAriaAttributes,
+  T as restoreFocus,
+  D as saveFocus,
+  l as setAriaAttributes,
+  k as skipDirective,
+  _ as skipLinkDirective,
+  b as trapFocusDirective
+};

package/dist/vue-a11y-directives.min.js

@@ -0,0 +1 @@
+(function(r,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(r=typeof globalThis<"u"?globalThis:r||self,d(r.VueA11yDirectives={}))})(this,function(r){"use strict";const d={mounted(e,a){const t=typeof a.value=="object"?a.value:{delay:a.value||0},o=t.delay||0,i=t.select||!1;setTimeout(()=>{e.focus&&(e.focus(),i&&(e.tagName==="INPUT"||e.tagName==="TEXTAREA")&&e.select())},o)}};function c(e){if(!e)return[];const a=["a[href]","button:not([disabled])","textarea:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])",'[tabindex]:not([tabindex="-1"])','[contenteditable="true"]',"audio[controls]","video[controls]"];return Array.from(e.querySelectorAll(a.join(", "))).filter(o=>{const i=window.getComputedStyle(o);return o.offsetWidth>0&&o.offsetHeight>0&&i.visibility!=="hidden"&&i.display!=="none"})}function l(e,a){Object.entries(a).forEach(([t,o])=>{o!=null&&e.setAttribute(t,o)})}function w(e,a){a.forEach(t=>{e.removeAttribute(t)})}function f(e,a="polite"){const t=document.createElement("div");t.setAttribute("role","status"),t.setAttribute("aria-live",a),t.setAttribute("aria-atomic","true"),t.style.position="absolute",t.style.left="-10000px",t.style.width="1px",t.style.height="1px",t.style.overflow="hidden",document.body.appendChild(t),setTimeout(()=>{t.textContent=e},100),setTimeout(()=>{document.body.removeChild(t)},3e3)}function E(e){const a=c(e);return a.length>0?a[0]:null}function D(e){const a=c(e);return a.length>0?a[a.length-1]:null}function F(e){return e.contains(document.activeElement)}function T(){return document.activeElement}function x(e){e&&e.focus&&e.focus()}function O(e="a11y"){return`${e}-${Math.random().toString(36).substr(2,9)}`}const y={mounted(e,a){const o=(a.value||{}).autoFocus!==!1,i=document.activeElement;e.__previousFocus=i,o&&setTimeout(()=>{const n=c(e);n.length>0&&n[0].focus()},100);const s=n=>{if(n.key!=="Tab")return;const u=c(e);if(u.length===0)return;const g=u[0],S=u[u.length-1];n.shiftKey&&document.activeElement===g?(n.preventDefault(),S.focus()):!n.shiftKey&&document.activeElement===S&&(n.preventDefault(),g.focus())};e.addEventListener("keydown",s),e.__handleKeydown=s},unmounted(e){e.__handleKeydown&&(e.removeEventListener("keydown",e.__handleKeydown),delete e.__handleKeydown),e.__previousFocus&&(setTimeout(()=>{if(e.__previousFocus&&document.body.contains(e.__previousFocus)&&typeof e.__previousFocus.focus=="function")try{e.__previousFocus.focus()}catch(a){console.warn("Could not restore focus:",a)}},0),delete e.__previousFocus)}},b={mounted(e,a){const t=a.value||{};console.log("Keyboard directive mounted with config:",t);const o=i=>{console.log("Key pressed:",i.key,"Config:",t);const s={Enter:"enter"," ":"space",Escape:"escape",ArrowUp:"arrowUp",ArrowDown:"arrowDown",ArrowLeft:"arrowLeft",ArrowRight:"arrowRight",Tab:"tab",Delete:"delete",Backspace:"backspace"};let n="";(i.ctrlKey||i.metaKey)&&(n+="ctrl+"),i.altKey&&(n+="alt+"),i.shiftKey&&(n+="shift+"),n+=i.key.toLowerCase();const u=s[i.key];if(u&&typeof t[u]=="function"){i.preventDefault(),t[u](i);return}if(t[n]&&typeof t[n]=="function"){i.preventDefault(),t[n](i);return}if(t[i.key]&&typeof t[i.key]=="function"){i.preventDefault(),t[i.key](i);return}if(t.arrows&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(i.key)&&typeof t.arrows=="function"){i.preventDefault(),t.arrows(i);return}if(t.handlers){if(t.handlers[i.key]&&typeof t.handlers[i.key]=="function"){i.preventDefault(),t.handlers[i.key](i);return}if(t.handlers[n]&&typeof t.handlers[n]=="function"){i.preventDefault(),t.handlers[n](i);return}}if(t.custom&&typeof t.custom=="function"){t.custom(i);return}t.enter===!0&&i.key==="Enter"&&!["INPUT","TEXTAREA","SELECT"].includes(i.target.tagName)&&(i.preventDefault(),e.click&&e.click()),t.space===!0&&i.key===" "&&["BUTTON","A"].includes(e.tagName)&&(i.preventDefault(),e.click&&e.click())};e.addEventListener("keydown",o),e.__keyboardHandler=o},unmounted(e){e.__keyboardHandler&&(e.removeEventListener("keydown",e.__keyboardHandler),delete e.__keyboardHandler)}},p={mounted(e,a){if(!a.value)return;const t=typeof a.value=="string"?{message:a.value,priority:"polite"}:a.value;t&&t.message&&f(t.message,t.priority||"polite")},updated(e,a){if(a.value!==a.oldValue&&a.value){const t=typeof a.value=="string"?{message:a.value,priority:"polite"}:a.value;t&&t.message&&f(t.message,t.priority||"polite")}}},v={mounted(e,a){const t=a.value,o=i=>{i.preventDefault();const s=document.querySelector(t);s&&(s.hasAttribute("tabindex")||s.setAttribute("tabindex","-1"),s.focus(),s.scrollIntoView({behavior:"smooth",block:"start"}))};e.addEventListener("click",o),e.__skipLinkHandler=o,e.setAttribute("role","link"),t&&e.setAttribute("aria-label",`Skip to ${t.replace("#","")}`)},unmounted(e){e.__skipLinkHandler&&(e.removeEventListener("click",e.__skipLinkHandler),delete e.__skipLinkHandler)}},m={mounted(e,a){_(e,a)},updated(e,a){_(e,a)},unmounted(e){delete e.__a11ySkipOriginalTabIndex,delete e.__a11ySkipOriginalAriaHidden,delete e.__a11ySkipChildrenState}};function _(e,a){if(a.value===void 0?!0:!!a.value){e.__a11ySkipOriginalTabIndex===void 0&&(e.__a11ySkipOriginalTabIndex=e.getAttribute("tabindex")),e.__a11ySkipOriginalAriaHidden===void 0&&(e.__a11ySkipOriginalAriaHidden=e.getAttribute("aria-hidden")),e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","true"),e.setAttribute("data-a11y-skip","true");const o=e.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.__a11ySkipChildrenState||(e.__a11ySkipChildrenState=[]),o.forEach((i,s)=>{e.__a11ySkipChildrenState[s]||(e.__a11ySkipChildrenState[s]={tabIndex:i.getAttribute("tabindex"),disabled:i.disabled}),i.setAttribute("tabindex","-1"),"disabled"in i&&(i.disabled=!0)}),a.modifiers.noInteraction&&(e.style.pointerEvents="none"),a.modifiers.visual&&(e.style.opacity="0.5",e.style.filter="grayscale(100%)",e.style.pointerEvents="none")}else{e.__a11ySkipOriginalTabIndex!==void 0?e.__a11ySkipOriginalTabIndex===null?e.removeAttribute("tabindex"):e.setAttribute("tabindex",e.__a11ySkipOriginalTabIndex):e.removeAttribute("tabindex"),e.__a11ySkipOriginalAriaHidden!==void 0?e.__a11ySkipOriginalAriaHidden===null?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",e.__a11ySkipOriginalAriaHidden):e.removeAttribute("aria-hidden"),e.removeAttribute("data-a11y-skip");const o=e.querySelectorAll("a, button, input, select, textarea, [tabindex]");e.__a11ySkipChildrenState&&o.forEach((i,s)=>{const n=e.__a11ySkipChildrenState[s];n&&(n.tabIndex===null?i.removeAttribute("tabindex"):i.setAttribute("tabindex",n.tabIndex),"disabled"in i&&(i.disabled=n.disabled))}),a.modifiers.noInteraction&&(e.style.pointerEvents=""),a.modifiers.visual&&(e.style.opacity="",e.style.filter="",e.style.pointerEvents="")}}const k={mounted(e,a){const t=a.value||{},o={label:"aria-label",labelledby:"aria-labelledby",describedby:"aria-describedby",expanded:"aria-expanded",pressed:"aria-pressed",selected:"aria-selected",checked:"aria-checked",disabled:"aria-disabled",hidden:"aria-hidden",invalid:"aria-invalid",required:"aria-required",live:"aria-live",atomic:"aria-atomic",busy:"aria-busy",controls:"aria-controls",owns:"aria-owns",haspopup:"aria-haspopup",level:"aria-level",modal:"aria-modal",multiselectable:"aria-multiselectable",orientation:"aria-orientation",placeholder:"aria-placeholder",readonly:"aria-readonly",relevant:"aria-relevant",valuemax:"aria-valuemax",valuemin:"aria-valuemin",valuenow:"aria-valuenow",valuetext:"aria-valuetext"},i={};Object.entries(t).forEach(([s,n])=>{const u=o[s]||s;i[u]=n}),l(e,i),e.__ariaAttributes=Object.keys(i)},updated(e,a){if(JSON.stringify(a.value)!==JSON.stringify(a.oldValue)){e.__ariaAttributes&&e.__ariaAttributes.forEach(s=>e.removeAttribute(s));const t=a.value||{},o={label:"aria-label",labelledby:"aria-labelledby",describedby:"aria-describedby",expanded:"aria-expanded",pressed:"aria-pressed",selected:"aria-selected",checked:"aria-checked",disabled:"aria-disabled",hidden:"aria-hidden",invalid:"aria-invalid",required:"aria-required",live:"aria-live",atomic:"aria-atomic",busy:"aria-busy",controls:"aria-controls",owns:"aria-owns",haspopup:"aria-haspopup",level:"aria-level",modal:"aria-modal"},i={};Object.entries(t).forEach(([s,n])=>{const u=o[s]||s;i[u]=n}),l(e,i),e.__ariaAttributes=Object.keys(i)}},unmounted(e){e.__ariaAttributes&&(e.__ariaAttributes.forEach(a=>e.removeAttribute(a)),delete e.__ariaAttributes)}},h={"a11y-focus":d,"a11y-trap-focus":y,"a11y-keyboard":b,"a11y-announce":p,"a11y-skip-link":v,"a11y-skip":m,"a11y-aria":k};function A(e){Object.entries(h).forEach(([a,t])=>{e.directive(a,t)})}const L={install:A};r.a11yDirectives=h,r.announce=f,r.announceDirective=p,r.ariaDirective=k,r.containsActiveElement=F,r.default=L,r.focusDirective=d,r.generateId=O,r.getFirstFocusable=E,r.getFocusableElements=c,r.getLastFocusable=D,r.installA11yDirectives=A,r.keyboardDirective=b,r.removeAriaAttributes=w,r.restoreFocus=x,r.saveFocus=T,r.setAriaAttributes=l,r.skipDirective=m,r.skipLinkDirective=v,r.trapFocusDirective=y,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "vue-a11y-directives",
+  "version": "1.0.0",
+  "description": "A comprehensive set of Vue 3 directives for building accessible web applications with WCAG compliance",
+  "main": "dist/vue-a11y-directives.cjs.js",
+  "module": "dist/vue-a11y-directives.esm.js",
+  "unpkg": "dist/vue-a11y-directives.min.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "accessibility",
+    "a11y",
+    "directives",
+    "wcag",
+    "aria",
+    "focus-management",
+    "keyboard-navigation",
+    "screen-reader"
+  ],
+  "author": "Shkelqim Emerllahu",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shkelqimemerllahu/vue-a11y-directives"
+  },
+  "bugs": {
+    "url": "https://github.com/shkelqimemerllahu/vue-a11y-directives/issues"
+  },
+  "homepage": "https://github.com/shkelqimemerllahu/vue-a11y-directives#readme",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:types": "tsc --declaration --emitDeclarationOnly --outDir dist",
+    "build:docs": "cd docs && npm run build",
+    "preview": "vite preview",
+    "docs:dev": "cd docs && npm run dev",
+    "lint": "eslint src --ext .js,.vue",
+    "prepublishOnly": "vite build"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0",
+    "vue": "^3.4.0"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/vue-a11y-directives.esm.js",
+      "require": "./dist/vue-a11y-directives.cjs.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  }
+}