vue-a11y-directives 1.2.2 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -119,17 +119,50 @@ Skip elements from keyboard navigation.
|
|
|
119
119
|
```
|
|
120
120
|
|
|
121
121
|
### 8. `v-a11y-date-picker`
|
|
122
|
-
|
|
122
|
+
Enhance date picker accessibility with auto-focus and keyboard navigation.
|
|
123
|
+
|
|
124
|
+
**Important:** Apply directive to a **wrapper div**, not directly on the component.
|
|
125
|
+
|
|
126
|
+
```vue
|
|
127
|
+
<template>
|
|
128
|
+
<div v-a11y-date-picker style="position: relative">
|
|
129
|
+
<el-date-picker
|
|
130
|
+
v-model="date"
|
|
131
|
+
:teleported="false"
|
|
132
|
+
placeholder="Select date"
|
|
133
|
+
/>
|
|
134
|
+
</div>
|
|
135
|
+
</template>
|
|
136
|
+
|
|
137
|
+
<script setup>
|
|
138
|
+
import { ref } from 'vue';
|
|
139
|
+
const date = ref('');
|
|
140
|
+
</script>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
**Features:**
|
|
144
|
+
- ✅ Auto-focuses calendar when opened
|
|
145
|
+
- ✅ Arrow keys navigate dates without auto-selecting
|
|
146
|
+
- ✅ Enter/Space to select focused date
|
|
147
|
+
- ✅ Works with Element Plus, Vuetify, Ant Design Vue, PrimeVue
|
|
148
|
+
|
|
149
|
+
**More Examples:**
|
|
123
150
|
|
|
124
151
|
```vue
|
|
125
|
-
<!--
|
|
126
|
-
<
|
|
152
|
+
<!-- Vuetify -->
|
|
153
|
+
<div v-a11y-date-picker style="position: relative">
|
|
154
|
+
<v-date-picker v-model="date" />
|
|
155
|
+
</div>
|
|
127
156
|
|
|
128
|
-
<!--
|
|
129
|
-
<
|
|
157
|
+
<!-- Ant Design Vue -->
|
|
158
|
+
<div v-a11y-date-picker style="position: relative">
|
|
159
|
+
<a-date-picker v-model:value="date" />
|
|
160
|
+
</div>
|
|
130
161
|
|
|
131
|
-
<!--
|
|
132
|
-
<
|
|
162
|
+
<!-- PrimeVue -->
|
|
163
|
+
<div v-a11y-date-picker style="position: relative">
|
|
164
|
+
<Calendar v-model="date" />
|
|
165
|
+
</div>
|
|
133
166
|
```
|
|
134
167
|
|
|
135
168
|
## 🎨 Real-World Examples
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const G=["BUTTON","A","INPUT","TEXTAREA","SELECT","IFRAME"],P={mounted(e,a){const t=typeof a.value=="object"?a.value:{delay:a.value||0},n=t.delay||0,i=t.select||!1;G.includes(e.tagName)||e.hasAttribute("tabindex")||e.hasAttribute("contenteditable")||(e.setAttribute("tabindex","0"),e.__a11yFocusAddedTabindex=!0),setTimeout(()=>{e.focus&&(e.focus(),i&&(e.tagName==="INPUT"||e.tagName==="TEXTAREA")&&e.select())},n)},unmounted(e){e.__a11yFocusAddedTabindex&&(e.removeAttribute("tabindex"),delete e.__a11yFocusAddedTabindex)}};function k(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(n=>{const i=window.getComputedStyle(n);return n.offsetWidth>0&&n.offsetHeight>0&&i.visibility!=="hidden"&&i.display!=="none"})}function E(e,a){Object.entries(a).forEach(([t,n])=>{n!=null&&e.setAttribute(t,n)})}function W(e,a){a.forEach(t=>{e.removeAttribute(t)})}function g(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 V(e){const a=k(e);return a.length>0?a[0]:null}function X(e){const a=k(e);return a.length>0?a[a.length-1]:null}function $(e){return e.contains(document.activeElement)}function J(){return document.activeElement}function z(e){e&&e.focus&&e.focus()}function Q(e="a11y"){return`${e}-${Math.random().toString(36).substr(2,9)}`}const L={mounted(e,a){const t=a.value||{},n=t.autoFocus!==!1,i=t.onEscape||null,r=document.activeElement;e.__previousFocus=r,n&&setTimeout(()=>{const u=k(e);u.length>0&&u[0].focus()},100);const o=u=>{if(u.key!=="Tab")return;const b=k(e);if(b.length===0)return;const m=b[0],A=b[b.length-1];u.shiftKey&&document.activeElement===m?(u.preventDefault(),A.focus()):!u.shiftKey&&document.activeElement===A&&(u.preventDefault(),m.focus())},c=u=>{u.key==="Escape"&&i&&(u.preventDefault(),u.stopPropagation(),i())};e.addEventListener("keydown",o),e.__handleKeydown=o,i&&(document.addEventListener("keydown",c,!0),e.__handleEscape=c)},unmounted(e){e.__handleKeydown&&(e.removeEventListener("keydown",e.__handleKeydown),delete e.__handleKeydown),e.__handleEscape&&(document.removeEventListener("keydown",e.__handleEscape,!0),delete e.__handleEscape),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)}},I={mounted(e,a){const t=a.value||{};console.log("Keyboard directive mounted with config:",t);const n=i=>{console.log("Key pressed:",i.key,"Config:",t);const r={Enter:"enter"," ":"space",Escape:"escape",ArrowUp:"arrowUp",ArrowDown:"arrowDown",ArrowLeft:"arrowLeft",ArrowRight:"arrowRight",Tab:"tab",Delete:"delete",Backspace:"backspace"};let o="";(i.ctrlKey||i.metaKey)&&(o+="ctrl+"),i.altKey&&(o+="alt+"),i.shiftKey&&(o+="shift+"),o+=i.key.toLowerCase();const c=r[i.key];if(c&&typeof t[c]=="function"){i.preventDefault(),t[c](i);return}if(t[o]&&typeof t[o]=="function"){i.preventDefault(),t[o](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[o]&&typeof t.handlers[o]=="function"){i.preventDefault(),t.handlers[o](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",n),e.__keyboardHandler=n},unmounted(e){e.__keyboardHandler&&(e.removeEventListener("keydown",e.__keyboardHandler),delete e.__keyboardHandler)}},K={mounted(e,a){if(!a.value)return;const t=typeof a.value=="string"?{message:a.value,priority:"polite"}:a.value;t&&t.message&&g(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&&g(t.message,t.priority||"polite")}}},H={mounted(e,a){const t=a.value,n=i=>{i.preventDefault();const r=document.querySelector(t);r&&(r.hasAttribute("tabindex")||r.setAttribute("tabindex","-1"),r.focus(),r.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)}},C={mounted(e,a){O(e,a)},updated(e,a){O(e,a)},unmounted(e){delete e.__a11ySkipOriginalTabIndex,delete e.__a11ySkipOriginalAriaHidden,delete e.__a11ySkipChildrenState}};function O(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 n=e.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.__a11ySkipChildrenState||(e.__a11ySkipChildrenState=[]),n.forEach((i,r)=>{e.__a11ySkipChildrenState[r]||(e.__a11ySkipChildrenState[r]={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 n=e.querySelectorAll("a, button, input, select, textarea, [tabindex]");e.__a11ySkipChildrenState&&n.forEach((i,r)=>{const o=e.__a11ySkipChildrenState[r];o&&(o.tabIndex===null?i.removeAttribute("tabindex"):i.setAttribute("tabindex",o.tabIndex),"disabled"in i&&(i.disabled=o.disabled))}),a.modifiers.noInteraction&&(e.style.pointerEvents=""),a.modifiers.visual&&(e.style.opacity="",e.style.filter="",e.style.pointerEvents="")}}const N={mounted(e,a){const t=a.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"},i={};Object.entries(t).forEach(([r,o])=>{const c=n[r]||r;i[c]=o}),E(e,i),e.__ariaAttributes=Object.keys(i)},updated(e,a){if(JSON.stringify(a.value)!==JSON.stringify(a.oldValue)){e.__ariaAttributes&&e.__ariaAttributes.forEach(r=>e.removeAttribute(r));const t=a.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"},i={};Object.entries(t).forEach(([r,o])=>{const c=n[r]||r;i[c]=o}),E(e,i),e.__ariaAttributes=Object.keys(i)}},unmounted(e){e.__ariaAttributes&&(e.__ariaAttributes.forEach(a=>e.removeAttribute(a)),delete e.__ariaAttributes)}},q={mounted(e,a){const t=a.value||{},n=t.delay||100,i={panel:t.panelSelector||".el-picker-panel, .el-date-picker, .v-picker, .v-date-picker, .ant-picker-dropdown, .p-datepicker",selectedDay:t.selectedSelector||"td.is-selected, td.selected, td.is-today.is-selected, .v-date-picker-table__current, .ant-picker-cell-selected, .p-highlight",availableDay:t.availableSelector||"td:not(.disabled):not(.is-disabled):not([disabled]), .v-date-picker-table__events, .ant-picker-cell:not(.ant-picker-cell-disabled), .p-datepicker-calendar td:not(.p-disabled)",input:t.inputSelector||".el-input__inner, input, .v-text-field__input, .ant-picker-input, .p-inputtext"};let r=!1,o=null,c=null;const u=d=>{const v=d.getAttribute("aria-controls");let s=null;if(v&&(s=document.getElementById(v)),!s){const f=document.querySelectorAll(".el-picker-panel");for(const _ of f)if(_.offsetParent!==null){s=_;break}}if(!s)return!1;let l=null;const S=s.querySelector("td.is-selected");if(S&&(l=S),!l){const f=s.querySelector("td.is-today");f&&(l=f)}if(!l){const f=s.querySelector(".el-date-table tbody td:not(.disabled):not(.is-disabled)");f&&(l=f)}if(!l)return!1;l.setAttribute("tabindex","0");let w=0;const R=10,x=()=>{if(w++,l.focus({preventScroll:!0}),document.activeElement===l)return!0;w<R&&setTimeout(x,10)};x();const T=f=>{if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(f.key)){f.preventDefault(),s.__a11yNavigatingWithKeyboard=!0;const _=y=>(console.log("[DEBUG] Preventing",y.type,"during keyboard navigation"),y.preventDefault(),y.stopPropagation(),y.stopImmediatePropagation(),!1),F=["click","mousedown","mouseup","pointerdown","pointerup","touchstart","touchend"];F.forEach(y=>{s.addEventListener(y,_,{capture:!0,once:!0})}),s.querySelectorAll("td").forEach(y=>{F.forEach(B=>{y.addEventListener(B,_,{capture:!0,once:!0})})}),setTimeout(()=>{s.__a11yNavigatingWithKeyboard=!1,console.log("[DEBUG] Keyboard navigation complete")},50)}};return s.__a11yKeyboardHandlerAdded||(s.__a11yKeyboardHandlerAdded=!0,s.addEventListener("keydown",T,{capture:!0}),s.__a11yKeyboardHandler=T,console.log("[DEBUG] Keyboard navigation handler installed")),!0},b=d=>{c&&clearTimeout(c),requestAnimationFrame(()=>{c=setTimeout(()=>{u(d)},n)})},m=d=>{o=new MutationObserver(v=>{const s=document.querySelector(".el-picker-panel");s&&!r?(r=!0,b(d)):!s&&r&&(r=!1,c&&(clearTimeout(c),c=null))}),o.observe(document.body,{childList:!0,subtree:!0})},p=(()=>{let d=e.querySelector(i.input);return d||(d=e.querySelectorAll("input")[0]),d||e})();m(p);const h=()=>{};p.addEventListener("focus",h),p.addEventListener("click",h);const D=d=>{d.key==="Enter"||d.key};p.addEventListener("keydown",D);const M=(()=>{const d=new MutationObserver(v=>{v.forEach(s=>{s.type==="attributes"&&s.attributeName==="aria-expanded"&&p.getAttribute("aria-expanded")==="true"&&b(p)})});return d.observe(p,{attributes:!0,attributeFilter:["aria-expanded"]}),d})();e.__a11yDatePickerAriaObserver=M,e.__a11yDatePickerInput=p,e.__a11yDatePickerFocusHandler=h,e.__a11yDatePickerKeyHandler=D,e.__a11yDatePickerObserver=o},unmounted(e){if(e.__a11yDatePickerTimeout&&clearTimeout(e.__a11yDatePickerTimeout),e.__a11yDatePickerInput){const a=e.__a11yDatePickerInput;e.__a11yDatePickerFocusHandler&&(a.removeEventListener("focus",e.__a11yDatePickerFocusHandler),a.removeEventListener("click",e.__a11yDatePickerFocusHandler)),e.__a11yDatePickerKeyHandler&&a.removeEventListener("keydown",e.__a11yDatePickerKeyHandler)}e.__a11yDatePickerObserver&&e.__a11yDatePickerObserver.disconnect(),e.__a11yDatePickerAriaObserver&&e.__a11yDatePickerAriaObserver.disconnect(),delete e.__a11yDatePickerInput,delete e.__a11yDatePickerFocusHandler,delete e.__a11yDatePickerKeyHandler,delete e.__a11yDatePickerObserver,delete e.__a11yDatePickerAriaObserver,delete e.__a11yDatePickerTimeout}},U={"a11y-focus":P,"a11y-trap-focus":L,"a11y-keyboard":I,"a11y-announce":K,"a11y-skip-link":H,"a11y-skip":C,"a11y-aria":N,"a11y-date-picker":q};function j(e){Object.entries(U).forEach(([a,t])=>{e.directive(a,t)})}const Y={install:j};exports.a11yDirectives=U;exports.announce=g;exports.announceDirective=K;exports.ariaDirective=N;exports.containsActiveElement=$;exports.datePickerDirective=q;exports.default=Y;exports.focusDirective=P;exports.generateId=Q;exports.getFirstFocusable=V;exports.getFocusableElements=k;exports.getLastFocusable=X;exports.installA11yDirectives=j;exports.keyboardDirective=I;exports.removeAriaAttributes=W;exports.restoreFocus=z;exports.saveFocus=J;exports.setAriaAttributes=E;exports.skipDirective=C;exports.skipLinkDirective=H;exports.trapFocusDirective=L;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const W=["BUTTON","A","INPUT","TEXTAREA","SELECT","IFRAME"],P={mounted(e,a){const t=typeof a.value=="object"?a.value:{delay:a.value||0},n=t.delay||0,i=t.select||!1;W.includes(e.tagName)||e.hasAttribute("tabindex")||e.hasAttribute("contenteditable")||(e.setAttribute("tabindex","0"),e.__a11yFocusAddedTabindex=!0),setTimeout(()=>{e.focus&&(e.focus(),i&&(e.tagName==="INPUT"||e.tagName==="TEXTAREA")&&e.select())},n)},unmounted(e){e.__a11yFocusAddedTabindex&&(e.removeAttribute("tabindex"),delete e.__a11yFocusAddedTabindex)}};function k(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(n=>{const i=window.getComputedStyle(n);return n.offsetWidth>0&&n.offsetHeight>0&&i.visibility!=="hidden"&&i.display!=="none"})}function E(e,a){Object.entries(a).forEach(([t,n])=>{n!=null&&e.setAttribute(t,n)})}function V(e,a){a.forEach(t=>{e.removeAttribute(t)})}function D(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 X(e){const a=k(e);return a.length>0?a[0]:null}function $(e){const a=k(e);return a.length>0?a[a.length-1]:null}function J(e){return e.contains(document.activeElement)}function G(){return document.activeElement}function z(e){e&&e.focus&&e.focus()}function Q(e="a11y"){return`${e}-${Math.random().toString(36).substr(2,9)}`}const L={mounted(e,a){const t=a.value||{},n=t.autoFocus!==!1,i=t.onEscape||null,r=document.activeElement;e.__previousFocus=r,n&&setTimeout(()=>{const u=k(e);u.length>0&&u[0].focus()},100);const o=u=>{if(u.key!=="Tab")return;const y=k(e);if(y.length===0)return;const m=y[0],A=y[y.length-1];u.shiftKey&&document.activeElement===m?(u.preventDefault(),A.focus()):!u.shiftKey&&document.activeElement===A&&(u.preventDefault(),m.focus())},c=u=>{u.key==="Escape"&&i&&(u.preventDefault(),u.stopPropagation(),i())};e.addEventListener("keydown",o),e.__handleKeydown=o,i&&(document.addEventListener("keydown",c,!0),e.__handleEscape=c)},unmounted(e){e.__handleKeydown&&(e.removeEventListener("keydown",e.__handleKeydown),delete e.__handleKeydown),e.__handleEscape&&(document.removeEventListener("keydown",e.__handleEscape,!0),delete e.__handleEscape),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)}},I={mounted(e,a){const t=a.value||{};console.log("Keyboard directive mounted with config:",t);const n=i=>{console.log("Key pressed:",i.key,"Config:",t);const r={Enter:"enter"," ":"space",Escape:"escape",ArrowUp:"arrowUp",ArrowDown:"arrowDown",ArrowLeft:"arrowLeft",ArrowRight:"arrowRight",Tab:"tab",Delete:"delete",Backspace:"backspace"};let o="";(i.ctrlKey||i.metaKey)&&(o+="ctrl+"),i.altKey&&(o+="alt+"),i.shiftKey&&(o+="shift+"),o+=i.key.toLowerCase();const c=r[i.key];if(c&&typeof t[c]=="function"){i.preventDefault(),t[c](i);return}if(t[o]&&typeof t[o]=="function"){i.preventDefault(),t[o](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[o]&&typeof t.handlers[o]=="function"){i.preventDefault(),t.handlers[o](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",n),e.__keyboardHandler=n},unmounted(e){e.__keyboardHandler&&(e.removeEventListener("keydown",e.__keyboardHandler),delete e.__keyboardHandler)}},K={mounted(e,a){if(!a.value)return;const t=typeof a.value=="string"?{message:a.value,priority:"polite"}:a.value;t&&t.message&&D(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&&D(t.message,t.priority||"polite")}}},H={mounted(e,a){const t=a.value,n=i=>{i.preventDefault();const r=document.querySelector(t);r&&(r.hasAttribute("tabindex")||r.setAttribute("tabindex","-1"),r.focus(),r.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)}},C={mounted(e,a){O(e,a)},updated(e,a){O(e,a)},unmounted(e){delete e.__a11ySkipOriginalTabIndex,delete e.__a11ySkipOriginalAriaHidden,delete e.__a11ySkipChildrenState}};function O(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 n=e.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.__a11ySkipChildrenState||(e.__a11ySkipChildrenState=[]),n.forEach((i,r)=>{e.__a11ySkipChildrenState[r]||(e.__a11ySkipChildrenState[r]={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 n=e.querySelectorAll("a, button, input, select, textarea, [tabindex]");e.__a11ySkipChildrenState&&n.forEach((i,r)=>{const o=e.__a11ySkipChildrenState[r];o&&(o.tabIndex===null?i.removeAttribute("tabindex"):i.setAttribute("tabindex",o.tabIndex),"disabled"in i&&(i.disabled=o.disabled))}),a.modifiers.noInteraction&&(e.style.pointerEvents=""),a.modifiers.visual&&(e.style.opacity="",e.style.filter="",e.style.pointerEvents="")}}const N={mounted(e,a){const t=a.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"},i={};Object.entries(t).forEach(([r,o])=>{const c=n[r]||r;i[c]=o}),E(e,i),e.__ariaAttributes=Object.keys(i)},updated(e,a){if(JSON.stringify(a.value)!==JSON.stringify(a.oldValue)){e.__ariaAttributes&&e.__ariaAttributes.forEach(r=>e.removeAttribute(r));const t=a.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"},i={};Object.entries(t).forEach(([r,o])=>{const c=n[r]||r;i[c]=o}),E(e,i),e.__ariaAttributes=Object.keys(i)}},unmounted(e){e.__ariaAttributes&&(e.__ariaAttributes.forEach(a=>e.removeAttribute(a)),delete e.__ariaAttributes)}},q={mounted(e,a){const t=a.value||{},n=t.delay||100,i={panel:t.panelSelector||".el-picker-panel, .el-date-picker, .v-picker, .v-date-picker, .ant-picker-dropdown, .p-datepicker",selectedDay:t.selectedSelector||"td.is-selected, td.selected, td.is-today.is-selected, .v-date-picker-table__current, .ant-picker-cell-selected, .p-highlight",availableDay:t.availableSelector||"td:not(.disabled):not(.is-disabled):not([disabled]), .v-date-picker-table__events, .ant-picker-cell:not(.ant-picker-cell-disabled), .p-datepicker-calendar td:not(.p-disabled)",input:t.inputSelector||".el-input__inner, input, .v-text-field__input, .ant-picker-input, .p-inputtext"};let r=!1,o=null,c=null;const u=d=>{const v=d.getAttribute("aria-controls");let s=null;if(v&&(s=document.getElementById(v)),!s){const f=document.querySelectorAll(".el-picker-panel");for(const _ of f)if(_.offsetParent!==null){s=_;break}}if(!s)return!1;let l=null;const S=s.querySelector("td.is-selected");if(S&&(l=S),!l){const f=s.querySelector("td.is-today");f&&(l=f)}if(!l){const f=s.querySelector(".el-date-table tbody td:not(.disabled):not(.is-disabled)");f&&(l=f)}if(!l)return!1;l.setAttribute("tabindex","0");let w=0;const R=10,x=()=>{if(w++,l.focus({preventScroll:!0}),document.activeElement===l)return!0;w<R&&setTimeout(x,10)};x();const T=f=>{if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(f.key)){f.preventDefault(),s.__a11yNavigatingWithKeyboard=!0;const _=b=>(b.preventDefault(),b.stopPropagation(),b.stopImmediatePropagation(),!1),F=["click","mousedown","mouseup","pointerdown","pointerup","touchstart","touchend"];F.forEach(b=>{s.addEventListener(b,_,{capture:!0,once:!0})}),s.querySelectorAll("td").forEach(b=>{F.forEach(B=>{b.addEventListener(B,_,{capture:!0,once:!0})})}),setTimeout(()=>{s.__a11yNavigatingWithKeyboard=!1},50)}};return s.__a11yKeyboardHandlerAdded||(s.__a11yKeyboardHandlerAdded=!0,s.addEventListener("keydown",T,{capture:!0}),s.__a11yKeyboardHandler=T),!0},y=d=>{c&&clearTimeout(c),requestAnimationFrame(()=>{c=setTimeout(()=>{u(d)},n)})},m=d=>{o=new MutationObserver(v=>{const s=document.querySelector(".el-picker-panel");s&&!r?(r=!0,y(d)):!s&&r&&(r=!1,c&&(clearTimeout(c),c=null))}),o.observe(document.body,{childList:!0,subtree:!0})},p=(()=>{let d=e.querySelector(i.input);return d||(d=e.querySelectorAll("input")[0]),d||e})();m(p);const h=()=>{};p.addEventListener("focus",h),p.addEventListener("click",h);const g=d=>{d.key==="Enter"||d.key};p.addEventListener("keydown",g);const M=(()=>{const d=new MutationObserver(v=>{v.forEach(s=>{s.type==="attributes"&&s.attributeName==="aria-expanded"&&p.getAttribute("aria-expanded")==="true"&&y(p)})});return d.observe(p,{attributes:!0,attributeFilter:["aria-expanded"]}),d})();e.__a11yDatePickerAriaObserver=M,e.__a11yDatePickerInput=p,e.__a11yDatePickerFocusHandler=h,e.__a11yDatePickerKeyHandler=g,e.__a11yDatePickerObserver=o},unmounted(e){if(e.__a11yDatePickerTimeout&&clearTimeout(e.__a11yDatePickerTimeout),e.__a11yDatePickerInput){const a=e.__a11yDatePickerInput;e.__a11yDatePickerFocusHandler&&(a.removeEventListener("focus",e.__a11yDatePickerFocusHandler),a.removeEventListener("click",e.__a11yDatePickerFocusHandler)),e.__a11yDatePickerKeyHandler&&a.removeEventListener("keydown",e.__a11yDatePickerKeyHandler)}e.__a11yDatePickerObserver&&e.__a11yDatePickerObserver.disconnect(),e.__a11yDatePickerAriaObserver&&e.__a11yDatePickerAriaObserver.disconnect(),delete e.__a11yDatePickerInput,delete e.__a11yDatePickerFocusHandler,delete e.__a11yDatePickerKeyHandler,delete e.__a11yDatePickerObserver,delete e.__a11yDatePickerAriaObserver,delete e.__a11yDatePickerTimeout}},U={"a11y-focus":P,"a11y-trap-focus":L,"a11y-keyboard":I,"a11y-announce":K,"a11y-skip-link":H,"a11y-skip":C,"a11y-aria":N,"a11y-date-picker":q};function j(e){Object.entries(U).forEach(([a,t])=>{e.directive(a,t)})}const Y={install:j};exports.a11yDirectives=U;exports.announce=D;exports.announceDirective=K;exports.ariaDirective=N;exports.containsActiveElement=J;exports.datePickerDirective=q;exports.default=Y;exports.focusDirective=P;exports.generateId=Q;exports.getFirstFocusable=X;exports.getFocusableElements=k;exports.getLastFocusable=$;exports.installA11yDirectives=j;exports.keyboardDirective=I;exports.removeAriaAttributes=V;exports.restoreFocus=z;exports.saveFocus=G;exports.setAriaAttributes=E;exports.skipDirective=C;exports.skipLinkDirective=H;exports.trapFocusDirective=L;
|
|
@@ -32,7 +32,7 @@ function T(e, a) {
|
|
|
32
32
|
n != null && e.setAttribute(t, n);
|
|
33
33
|
});
|
|
34
34
|
}
|
|
35
|
-
function
|
|
35
|
+
function $(e, a) {
|
|
36
36
|
a.forEach((t) => {
|
|
37
37
|
e.removeAttribute(t);
|
|
38
38
|
});
|
|
@@ -45,11 +45,11 @@ function F(e, a = "polite") {
|
|
|
45
45
|
document.body.removeChild(t);
|
|
46
46
|
}, 3e3);
|
|
47
47
|
}
|
|
48
|
-
function
|
|
48
|
+
function J(e) {
|
|
49
49
|
const a = m(e);
|
|
50
50
|
return a.length > 0 ? a[0] : null;
|
|
51
51
|
}
|
|
52
|
-
function
|
|
52
|
+
function G(e) {
|
|
53
53
|
const a = m(e);
|
|
54
54
|
return a.length > 0 ? a[a.length - 1] : null;
|
|
55
55
|
}
|
|
@@ -74,9 +74,9 @@ const C = {
|
|
|
74
74
|
}, 100);
|
|
75
75
|
const o = (u) => {
|
|
76
76
|
if (u.key !== "Tab") return;
|
|
77
|
-
const
|
|
78
|
-
if (
|
|
79
|
-
const k =
|
|
77
|
+
const y = m(e);
|
|
78
|
+
if (y.length === 0) return;
|
|
79
|
+
const k = y[0], h = y[y.length - 1];
|
|
80
80
|
u.shiftKey && document.activeElement === k ? (u.preventDefault(), h.focus()) : !u.shiftKey && document.activeElement === h && (u.preventDefault(), k.focus());
|
|
81
81
|
}, d = (u) => {
|
|
82
82
|
u.key === "Escape" && i && (u.preventDefault(), u.stopPropagation(), i());
|
|
@@ -279,7 +279,7 @@ const j = {
|
|
|
279
279
|
unmounted(e) {
|
|
280
280
|
e.__ariaAttributes && (e.__ariaAttributes.forEach((a) => e.removeAttribute(a)), delete e.__ariaAttributes);
|
|
281
281
|
}
|
|
282
|
-
},
|
|
282
|
+
}, M = {
|
|
283
283
|
mounted(e, a) {
|
|
284
284
|
const t = a.value || {}, n = t.delay || 100, i = {
|
|
285
285
|
// Panel selectors (where the calendar appears)
|
|
@@ -319,29 +319,29 @@ const j = {
|
|
|
319
319
|
return !1;
|
|
320
320
|
l.setAttribute("tabindex", "0");
|
|
321
321
|
let w = 0;
|
|
322
|
-
const L = 10,
|
|
322
|
+
const L = 10, S = () => {
|
|
323
323
|
if (w++, l.focus({ preventScroll: !0 }), document.activeElement === l)
|
|
324
324
|
return !0;
|
|
325
|
-
w < L && setTimeout(
|
|
325
|
+
w < L && setTimeout(S, 10);
|
|
326
326
|
};
|
|
327
|
-
|
|
328
|
-
const
|
|
327
|
+
S();
|
|
328
|
+
const x = (f) => {
|
|
329
329
|
if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(f.key)) {
|
|
330
330
|
f.preventDefault(), s.__a11yNavigatingWithKeyboard = !0;
|
|
331
|
-
const v = (
|
|
332
|
-
|
|
333
|
-
s.addEventListener(
|
|
334
|
-
}), s.querySelectorAll("td").forEach((
|
|
335
|
-
|
|
336
|
-
|
|
331
|
+
const v = (b) => (b.preventDefault(), b.stopPropagation(), b.stopImmediatePropagation(), !1), D = ["click", "mousedown", "mouseup", "pointerdown", "pointerup", "touchstart", "touchend"];
|
|
332
|
+
D.forEach((b) => {
|
|
333
|
+
s.addEventListener(b, v, { capture: !0, once: !0 });
|
|
334
|
+
}), s.querySelectorAll("td").forEach((b) => {
|
|
335
|
+
D.forEach((I) => {
|
|
336
|
+
b.addEventListener(I, v, { capture: !0, once: !0 });
|
|
337
337
|
});
|
|
338
338
|
}), setTimeout(() => {
|
|
339
|
-
s.__a11yNavigatingWithKeyboard = !1
|
|
339
|
+
s.__a11yNavigatingWithKeyboard = !1;
|
|
340
340
|
}, 50);
|
|
341
341
|
}
|
|
342
342
|
};
|
|
343
|
-
return s.__a11yKeyboardHandlerAdded || (s.__a11yKeyboardHandlerAdded = !0, s.addEventListener("keydown",
|
|
344
|
-
},
|
|
343
|
+
return s.__a11yKeyboardHandlerAdded || (s.__a11yKeyboardHandlerAdded = !0, s.addEventListener("keydown", x, { capture: !0 }), s.__a11yKeyboardHandler = x), !0;
|
|
344
|
+
}, y = (c) => {
|
|
345
345
|
d && clearTimeout(d), requestAnimationFrame(() => {
|
|
346
346
|
d = setTimeout(() => {
|
|
347
347
|
u(c);
|
|
@@ -350,7 +350,7 @@ const j = {
|
|
|
350
350
|
}, k = (c) => {
|
|
351
351
|
o = new MutationObserver((_) => {
|
|
352
352
|
const s = document.querySelector(".el-picker-panel");
|
|
353
|
-
s && !r ? (r = !0,
|
|
353
|
+
s && !r ? (r = !0, y(c)) : !s && r && (r = !1, d && (clearTimeout(d), d = null));
|
|
354
354
|
}), o.observe(document.body, {
|
|
355
355
|
childList: !0,
|
|
356
356
|
subtree: !0
|
|
@@ -370,7 +370,7 @@ const j = {
|
|
|
370
370
|
const P = (() => {
|
|
371
371
|
const c = new MutationObserver((_) => {
|
|
372
372
|
_.forEach((s) => {
|
|
373
|
-
s.type === "attributes" && s.attributeName === "aria-expanded" && p.getAttribute("aria-expanded") === "true" &&
|
|
373
|
+
s.type === "attributes" && s.attributeName === "aria-expanded" && p.getAttribute("aria-expanded") === "true" && y(p);
|
|
374
374
|
});
|
|
375
375
|
});
|
|
376
376
|
return c.observe(p, {
|
|
@@ -387,7 +387,7 @@ const j = {
|
|
|
387
387
|
}
|
|
388
388
|
e.__a11yDatePickerObserver && e.__a11yDatePickerObserver.disconnect(), e.__a11yDatePickerAriaObserver && e.__a11yDatePickerAriaObserver.disconnect(), delete e.__a11yDatePickerInput, delete e.__a11yDatePickerFocusHandler, delete e.__a11yDatePickerKeyHandler, delete e.__a11yDatePickerObserver, delete e.__a11yDatePickerAriaObserver, delete e.__a11yDatePickerTimeout;
|
|
389
389
|
}
|
|
390
|
-
},
|
|
390
|
+
}, B = {
|
|
391
391
|
"a11y-focus": H,
|
|
392
392
|
"a11y-trap-focus": C,
|
|
393
393
|
"a11y-keyboard": N,
|
|
@@ -395,32 +395,32 @@ const j = {
|
|
|
395
395
|
"a11y-skip-link": U,
|
|
396
396
|
"a11y-skip": R,
|
|
397
397
|
"a11y-aria": j,
|
|
398
|
-
"a11y-date-picker":
|
|
398
|
+
"a11y-date-picker": M
|
|
399
399
|
};
|
|
400
|
-
function
|
|
401
|
-
Object.entries(
|
|
400
|
+
function W(e) {
|
|
401
|
+
Object.entries(B).forEach(([a, t]) => {
|
|
402
402
|
e.directive(a, t);
|
|
403
403
|
});
|
|
404
404
|
}
|
|
405
405
|
const ee = {
|
|
406
|
-
install:
|
|
406
|
+
install: W
|
|
407
407
|
};
|
|
408
408
|
export {
|
|
409
|
-
|
|
409
|
+
B as a11yDirectives,
|
|
410
410
|
F as announce,
|
|
411
411
|
q as announceDirective,
|
|
412
412
|
j as ariaDirective,
|
|
413
413
|
z as containsActiveElement,
|
|
414
|
-
|
|
414
|
+
M as datePickerDirective,
|
|
415
415
|
ee as default,
|
|
416
416
|
H as focusDirective,
|
|
417
417
|
Z as generateId,
|
|
418
|
-
|
|
418
|
+
J as getFirstFocusable,
|
|
419
419
|
m as getFocusableElements,
|
|
420
|
-
|
|
421
|
-
|
|
420
|
+
G as getLastFocusable,
|
|
421
|
+
W as installA11yDirectives,
|
|
422
422
|
N as keyboardDirective,
|
|
423
|
-
|
|
423
|
+
$ as removeAriaAttributes,
|
|
424
424
|
Y as restoreFocus,
|
|
425
425
|
Q as saveFocus,
|
|
426
426
|
T as setAriaAttributes,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(o,k){typeof exports=="object"&&typeof module<"u"?k(exports):typeof define=="function"&&define.amd?define(["exports"],k):(o=typeof globalThis<"u"?globalThis:o||self,k(o.VueA11yDirectives={}))})(this,function(o){"use strict";const k=["BUTTON","A","INPUT","TEXTAREA","SELECT","IFRAME"],w={mounted(e,a){const t=typeof a.value=="object"?a.value:{delay:a.value||0},n=t.delay||0,i=t.select||!1;k.includes(e.tagName)||e.hasAttribute("tabindex")||e.hasAttribute("contenteditable")||(e.setAttribute("tabindex","0"),e.__a11yFocusAddedTabindex=!0),setTimeout(()=>{e.focus&&(e.focus(),i&&(e.tagName==="INPUT"||e.tagName==="TEXTAREA")&&e.select())},n)},unmounted(e){e.__a11yFocusAddedTabindex&&(e.removeAttribute("tabindex"),delete e.__a11yFocusAddedTabindex)}};function m(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(n=>{const i=window.getComputedStyle(n);return n.offsetWidth>0&&n.offsetHeight>0&&i.visibility!=="hidden"&&i.display!=="none"})}function E(e,a){Object.entries(a).forEach(([t,n])=>{n!=null&&e.setAttribute(t,n)})}function B(e,a){a.forEach(t=>{e.removeAttribute(t)})}function g(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 G(e){const a=m(e);return a.length>0?a[0]:null}function V(e){const a=m(e);return a.length>0?a[a.length-1]:null}function W(e){return e.contains(document.activeElement)}function X(){return document.activeElement}function $(e){e&&e.focus&&e.focus()}function J(e="a11y"){return`${e}-${Math.random().toString(36).substr(2,9)}`}const T={mounted(e,a){const t=a.value||{},n=t.autoFocus!==!1,i=t.onEscape||null,r=document.activeElement;e.__previousFocus=r,n&&setTimeout(()=>{const l=m(e);l.length>0&&l[0].focus()},100);const s=l=>{if(l.key!=="Tab")return;const v=m(e);if(v.length===0)return;const h=v[0],D=v[v.length-1];l.shiftKey&&document.activeElement===h?(l.preventDefault(),D.focus()):!l.shiftKey&&document.activeElement===D&&(l.preventDefault(),h.focus())},c=l=>{l.key==="Escape"&&i&&(l.preventDefault(),l.stopPropagation(),i())};e.addEventListener("keydown",s),e.__handleKeydown=s,i&&(document.addEventListener("keydown",c,!0),e.__handleEscape=c)},unmounted(e){e.__handleKeydown&&(e.removeEventListener("keydown",e.__handleKeydown),delete e.__handleKeydown),e.__handleEscape&&(document.removeEventListener("keydown",e.__handleEscape,!0),delete e.__handleEscape),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)}},F={mounted(e,a){const t=a.value||{};console.log("Keyboard directive mounted with config:",t);const n=i=>{console.log("Key pressed:",i.key,"Config:",t);const r={Enter:"enter"," ":"space",Escape:"escape",ArrowUp:"arrowUp",ArrowDown:"arrowDown",ArrowLeft:"arrowLeft",ArrowRight:"arrowRight",Tab:"tab",Delete:"delete",Backspace:"backspace"};let s="";(i.ctrlKey||i.metaKey)&&(s+="ctrl+"),i.altKey&&(s+="alt+"),i.shiftKey&&(s+="shift+"),s+=i.key.toLowerCase();const c=r[i.key];if(c&&typeof t[c]=="function"){i.preventDefault(),t[c](i);return}if(t[s]&&typeof t[s]=="function"){i.preventDefault(),t[s](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[s]&&typeof t.handlers[s]=="function"){i.preventDefault(),t.handlers[s](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",n),e.__keyboardHandler=n},unmounted(e){e.__keyboardHandler&&(e.removeEventListener("keydown",e.__keyboardHandler),delete e.__keyboardHandler)}},x={mounted(e,a){if(!a.value)return;const t=typeof a.value=="string"?{message:a.value,priority:"polite"}:a.value;t&&t.message&&g(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&&g(t.message,t.priority||"polite")}}},O={mounted(e,a){const t=a.value,n=i=>{i.preventDefault();const r=document.querySelector(t);r&&(r.hasAttribute("tabindex")||r.setAttribute("tabindex","-1"),r.focus(),r.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)}},P={mounted(e,a){L(e,a)},updated(e,a){L(e,a)},unmounted(e){delete e.__a11ySkipOriginalTabIndex,delete e.__a11ySkipOriginalAriaHidden,delete e.__a11ySkipChildrenState}};function L(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 n=e.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.__a11ySkipChildrenState||(e.__a11ySkipChildrenState=[]),n.forEach((i,r)=>{e.__a11ySkipChildrenState[r]||(e.__a11ySkipChildrenState[r]={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 n=e.querySelectorAll("a, button, input, select, textarea, [tabindex]");e.__a11ySkipChildrenState&&n.forEach((i,r)=>{const s=e.__a11ySkipChildrenState[r];s&&(s.tabIndex===null?i.removeAttribute("tabindex"):i.setAttribute("tabindex",s.tabIndex),"disabled"in i&&(i.disabled=s.disabled))}),a.modifiers.noInteraction&&(e.style.pointerEvents=""),a.modifiers.visual&&(e.style.opacity="",e.style.filter="",e.style.pointerEvents="")}}const I={mounted(e,a){const t=a.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"},i={};Object.entries(t).forEach(([r,s])=>{const c=n[r]||r;i[c]=s}),E(e,i),e.__ariaAttributes=Object.keys(i)},updated(e,a){if(JSON.stringify(a.value)!==JSON.stringify(a.oldValue)){e.__ariaAttributes&&e.__ariaAttributes.forEach(r=>e.removeAttribute(r));const t=a.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"},i={};Object.entries(t).forEach(([r,s])=>{const c=n[r]||r;i[c]=s}),E(e,i),e.__ariaAttributes=Object.keys(i)}},unmounted(e){e.__ariaAttributes&&(e.__ariaAttributes.forEach(a=>e.removeAttribute(a)),delete e.__ariaAttributes)}},K={mounted(e,a){const t=a.value||{},n=t.delay||100,i={panel:t.panelSelector||".el-picker-panel, .el-date-picker, .v-picker, .v-date-picker, .ant-picker-dropdown, .p-datepicker",selectedDay:t.selectedSelector||"td.is-selected, td.selected, td.is-today.is-selected, .v-date-picker-table__current, .ant-picker-cell-selected, .p-highlight",availableDay:t.availableSelector||"td:not(.disabled):not(.is-disabled):not([disabled]), .v-date-picker-table__events, .ant-picker-cell:not(.ant-picker-cell-disabled), .p-datepicker-calendar td:not(.p-disabled)",input:t.inputSelector||".el-input__inner, input, .v-text-field__input, .ant-picker-input, .p-inputtext"};let r=!1,s=null,c=null;const l=u=>{const _=u.getAttribute("aria-controls");let d=null;if(_&&(d=document.getElementById(_)),!d){const y=document.querySelectorAll(".el-picker-panel");for(const A of y)if(A.offsetParent!==null){d=A;break}}if(!d)return!1;let f=null;const q=d.querySelector("td.is-selected");if(q&&(f=q),!f){const y=d.querySelector("td.is-today");y&&(f=y)}if(!f){const y=d.querySelector(".el-date-table tbody td:not(.disabled):not(.is-disabled)");y&&(f=y)}if(!f)return!1;f.setAttribute("tabindex","0");let U=0;const Y=10,j=()=>{if(U++,f.focus({preventScroll:!0}),document.activeElement===f)return!0;U<Y&&setTimeout(j,10)};j();const M=y=>{if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(y.key)){y.preventDefault(),d.__a11yNavigatingWithKeyboard=!0;const A=b=>(console.log("[DEBUG] Preventing",b.type,"during keyboard navigation"),b.preventDefault(),b.stopPropagation(),b.stopImmediatePropagation(),!1),R=["click","mousedown","mouseup","pointerdown","pointerup","touchstart","touchend"];R.forEach(b=>{d.addEventListener(b,A,{capture:!0,once:!0})}),d.querySelectorAll("td").forEach(b=>{R.forEach(Z=>{b.addEventListener(Z,A,{capture:!0,once:!0})})}),setTimeout(()=>{d.__a11yNavigatingWithKeyboard=!1,console.log("[DEBUG] Keyboard navigation complete")},50)}};return d.__a11yKeyboardHandlerAdded||(d.__a11yKeyboardHandlerAdded=!0,d.addEventListener("keydown",M,{capture:!0}),d.__a11yKeyboardHandler=M,console.log("[DEBUG] Keyboard navigation handler installed")),!0},v=u=>{c&&clearTimeout(c),requestAnimationFrame(()=>{c=setTimeout(()=>{l(u)},n)})},h=u=>{s=new MutationObserver(_=>{const d=document.querySelector(".el-picker-panel");d&&!r?(r=!0,v(u)):!d&&r&&(r=!1,c&&(clearTimeout(c),c=null))}),s.observe(document.body,{childList:!0,subtree:!0})},p=(()=>{let u=e.querySelector(i.input);return u||(u=e.querySelectorAll("input")[0]),u||e})();h(p);const S=()=>{};p.addEventListener("focus",S),p.addEventListener("click",S);const N=u=>{u.key==="Enter"||u.key};p.addEventListener("keydown",N);const Q=(()=>{const u=new MutationObserver(_=>{_.forEach(d=>{d.type==="attributes"&&d.attributeName==="aria-expanded"&&p.getAttribute("aria-expanded")==="true"&&v(p)})});return u.observe(p,{attributes:!0,attributeFilter:["aria-expanded"]}),u})();e.__a11yDatePickerAriaObserver=Q,e.__a11yDatePickerInput=p,e.__a11yDatePickerFocusHandler=S,e.__a11yDatePickerKeyHandler=N,e.__a11yDatePickerObserver=s},unmounted(e){if(e.__a11yDatePickerTimeout&&clearTimeout(e.__a11yDatePickerTimeout),e.__a11yDatePickerInput){const a=e.__a11yDatePickerInput;e.__a11yDatePickerFocusHandler&&(a.removeEventListener("focus",e.__a11yDatePickerFocusHandler),a.removeEventListener("click",e.__a11yDatePickerFocusHandler)),e.__a11yDatePickerKeyHandler&&a.removeEventListener("keydown",e.__a11yDatePickerKeyHandler)}e.__a11yDatePickerObserver&&e.__a11yDatePickerObserver.disconnect(),e.__a11yDatePickerAriaObserver&&e.__a11yDatePickerAriaObserver.disconnect(),delete e.__a11yDatePickerInput,delete e.__a11yDatePickerFocusHandler,delete e.__a11yDatePickerKeyHandler,delete e.__a11yDatePickerObserver,delete e.__a11yDatePickerAriaObserver,delete e.__a11yDatePickerTimeout}},H={"a11y-focus":w,"a11y-trap-focus":T,"a11y-keyboard":F,"a11y-announce":x,"a11y-skip-link":O,"a11y-skip":P,"a11y-aria":I,"a11y-date-picker":K};function C(e){Object.entries(H).forEach(([a,t])=>{e.directive(a,t)})}const z={install:C};o.a11yDirectives=H,o.announce=g,o.announceDirective=x,o.ariaDirective=I,o.containsActiveElement=W,o.datePickerDirective=K,o.default=z,o.focusDirective=w,o.generateId=J,o.getFirstFocusable=G,o.getFocusableElements=m,o.getLastFocusable=V,o.installA11yDirectives=C,o.keyboardDirective=F,o.removeAriaAttributes=B,o.restoreFocus=$,o.saveFocus=X,o.setAriaAttributes=E,o.skipDirective=P,o.skipLinkDirective=O,o.trapFocusDirective=T,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
1
|
+
(function(o,k){typeof exports=="object"&&typeof module<"u"?k(exports):typeof define=="function"&&define.amd?define(["exports"],k):(o=typeof globalThis<"u"?globalThis:o||self,k(o.VueA11yDirectives={}))})(this,function(o){"use strict";const k=["BUTTON","A","INPUT","TEXTAREA","SELECT","IFRAME"],w={mounted(e,a){const t=typeof a.value=="object"?a.value:{delay:a.value||0},n=t.delay||0,i=t.select||!1;k.includes(e.tagName)||e.hasAttribute("tabindex")||e.hasAttribute("contenteditable")||(e.setAttribute("tabindex","0"),e.__a11yFocusAddedTabindex=!0),setTimeout(()=>{e.focus&&(e.focus(),i&&(e.tagName==="INPUT"||e.tagName==="TEXTAREA")&&e.select())},n)},unmounted(e){e.__a11yFocusAddedTabindex&&(e.removeAttribute("tabindex"),delete e.__a11yFocusAddedTabindex)}};function m(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(n=>{const i=window.getComputedStyle(n);return n.offsetWidth>0&&n.offsetHeight>0&&i.visibility!=="hidden"&&i.display!=="none"})}function E(e,a){Object.entries(a).forEach(([t,n])=>{n!=null&&e.setAttribute(t,n)})}function B(e,a){a.forEach(t=>{e.removeAttribute(t)})}function D(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 V(e){const a=m(e);return a.length>0?a[0]:null}function W(e){const a=m(e);return a.length>0?a[a.length-1]:null}function X(e){return e.contains(document.activeElement)}function $(){return document.activeElement}function J(e){e&&e.focus&&e.focus()}function G(e="a11y"){return`${e}-${Math.random().toString(36).substr(2,9)}`}const T={mounted(e,a){const t=a.value||{},n=t.autoFocus!==!1,i=t.onEscape||null,r=document.activeElement;e.__previousFocus=r,n&&setTimeout(()=>{const l=m(e);l.length>0&&l[0].focus()},100);const s=l=>{if(l.key!=="Tab")return;const b=m(e);if(b.length===0)return;const h=b[0],g=b[b.length-1];l.shiftKey&&document.activeElement===h?(l.preventDefault(),g.focus()):!l.shiftKey&&document.activeElement===g&&(l.preventDefault(),h.focus())},d=l=>{l.key==="Escape"&&i&&(l.preventDefault(),l.stopPropagation(),i())};e.addEventListener("keydown",s),e.__handleKeydown=s,i&&(document.addEventListener("keydown",d,!0),e.__handleEscape=d)},unmounted(e){e.__handleKeydown&&(e.removeEventListener("keydown",e.__handleKeydown),delete e.__handleKeydown),e.__handleEscape&&(document.removeEventListener("keydown",e.__handleEscape,!0),delete e.__handleEscape),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)}},F={mounted(e,a){const t=a.value||{};console.log("Keyboard directive mounted with config:",t);const n=i=>{console.log("Key pressed:",i.key,"Config:",t);const r={Enter:"enter"," ":"space",Escape:"escape",ArrowUp:"arrowUp",ArrowDown:"arrowDown",ArrowLeft:"arrowLeft",ArrowRight:"arrowRight",Tab:"tab",Delete:"delete",Backspace:"backspace"};let s="";(i.ctrlKey||i.metaKey)&&(s+="ctrl+"),i.altKey&&(s+="alt+"),i.shiftKey&&(s+="shift+"),s+=i.key.toLowerCase();const d=r[i.key];if(d&&typeof t[d]=="function"){i.preventDefault(),t[d](i);return}if(t[s]&&typeof t[s]=="function"){i.preventDefault(),t[s](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[s]&&typeof t.handlers[s]=="function"){i.preventDefault(),t.handlers[s](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",n),e.__keyboardHandler=n},unmounted(e){e.__keyboardHandler&&(e.removeEventListener("keydown",e.__keyboardHandler),delete e.__keyboardHandler)}},x={mounted(e,a){if(!a.value)return;const t=typeof a.value=="string"?{message:a.value,priority:"polite"}:a.value;t&&t.message&&D(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&&D(t.message,t.priority||"polite")}}},O={mounted(e,a){const t=a.value,n=i=>{i.preventDefault();const r=document.querySelector(t);r&&(r.hasAttribute("tabindex")||r.setAttribute("tabindex","-1"),r.focus(),r.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)}},P={mounted(e,a){L(e,a)},updated(e,a){L(e,a)},unmounted(e){delete e.__a11ySkipOriginalTabIndex,delete e.__a11ySkipOriginalAriaHidden,delete e.__a11ySkipChildrenState}};function L(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 n=e.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.__a11ySkipChildrenState||(e.__a11ySkipChildrenState=[]),n.forEach((i,r)=>{e.__a11ySkipChildrenState[r]||(e.__a11ySkipChildrenState[r]={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 n=e.querySelectorAll("a, button, input, select, textarea, [tabindex]");e.__a11ySkipChildrenState&&n.forEach((i,r)=>{const s=e.__a11ySkipChildrenState[r];s&&(s.tabIndex===null?i.removeAttribute("tabindex"):i.setAttribute("tabindex",s.tabIndex),"disabled"in i&&(i.disabled=s.disabled))}),a.modifiers.noInteraction&&(e.style.pointerEvents=""),a.modifiers.visual&&(e.style.opacity="",e.style.filter="",e.style.pointerEvents="")}}const I={mounted(e,a){const t=a.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"},i={};Object.entries(t).forEach(([r,s])=>{const d=n[r]||r;i[d]=s}),E(e,i),e.__ariaAttributes=Object.keys(i)},updated(e,a){if(JSON.stringify(a.value)!==JSON.stringify(a.oldValue)){e.__ariaAttributes&&e.__ariaAttributes.forEach(r=>e.removeAttribute(r));const t=a.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"},i={};Object.entries(t).forEach(([r,s])=>{const d=n[r]||r;i[d]=s}),E(e,i),e.__ariaAttributes=Object.keys(i)}},unmounted(e){e.__ariaAttributes&&(e.__ariaAttributes.forEach(a=>e.removeAttribute(a)),delete e.__ariaAttributes)}},K={mounted(e,a){const t=a.value||{},n=t.delay||100,i={panel:t.panelSelector||".el-picker-panel, .el-date-picker, .v-picker, .v-date-picker, .ant-picker-dropdown, .p-datepicker",selectedDay:t.selectedSelector||"td.is-selected, td.selected, td.is-today.is-selected, .v-date-picker-table__current, .ant-picker-cell-selected, .p-highlight",availableDay:t.availableSelector||"td:not(.disabled):not(.is-disabled):not([disabled]), .v-date-picker-table__events, .ant-picker-cell:not(.ant-picker-cell-disabled), .p-datepicker-calendar td:not(.p-disabled)",input:t.inputSelector||".el-input__inner, input, .v-text-field__input, .ant-picker-input, .p-inputtext"};let r=!1,s=null,d=null;const l=u=>{const _=u.getAttribute("aria-controls");let c=null;if(_&&(c=document.getElementById(_)),!c){const y=document.querySelectorAll(".el-picker-panel");for(const A of y)if(A.offsetParent!==null){c=A;break}}if(!c)return!1;let f=null;const q=c.querySelector("td.is-selected");if(q&&(f=q),!f){const y=c.querySelector("td.is-today");y&&(f=y)}if(!f){const y=c.querySelector(".el-date-table tbody td:not(.disabled):not(.is-disabled)");y&&(f=y)}if(!f)return!1;f.setAttribute("tabindex","0");let j=0;const Y=10,U=()=>{if(j++,f.focus({preventScroll:!0}),document.activeElement===f)return!0;j<Y&&setTimeout(U,10)};U();const M=y=>{if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(y.key)){y.preventDefault(),c.__a11yNavigatingWithKeyboard=!0;const A=v=>(v.preventDefault(),v.stopPropagation(),v.stopImmediatePropagation(),!1),R=["click","mousedown","mouseup","pointerdown","pointerup","touchstart","touchend"];R.forEach(v=>{c.addEventListener(v,A,{capture:!0,once:!0})}),c.querySelectorAll("td").forEach(v=>{R.forEach(Z=>{v.addEventListener(Z,A,{capture:!0,once:!0})})}),setTimeout(()=>{c.__a11yNavigatingWithKeyboard=!1},50)}};return c.__a11yKeyboardHandlerAdded||(c.__a11yKeyboardHandlerAdded=!0,c.addEventListener("keydown",M,{capture:!0}),c.__a11yKeyboardHandler=M),!0},b=u=>{d&&clearTimeout(d),requestAnimationFrame(()=>{d=setTimeout(()=>{l(u)},n)})},h=u=>{s=new MutationObserver(_=>{const c=document.querySelector(".el-picker-panel");c&&!r?(r=!0,b(u)):!c&&r&&(r=!1,d&&(clearTimeout(d),d=null))}),s.observe(document.body,{childList:!0,subtree:!0})},p=(()=>{let u=e.querySelector(i.input);return u||(u=e.querySelectorAll("input")[0]),u||e})();h(p);const S=()=>{};p.addEventListener("focus",S),p.addEventListener("click",S);const N=u=>{u.key==="Enter"||u.key};p.addEventListener("keydown",N);const Q=(()=>{const u=new MutationObserver(_=>{_.forEach(c=>{c.type==="attributes"&&c.attributeName==="aria-expanded"&&p.getAttribute("aria-expanded")==="true"&&b(p)})});return u.observe(p,{attributes:!0,attributeFilter:["aria-expanded"]}),u})();e.__a11yDatePickerAriaObserver=Q,e.__a11yDatePickerInput=p,e.__a11yDatePickerFocusHandler=S,e.__a11yDatePickerKeyHandler=N,e.__a11yDatePickerObserver=s},unmounted(e){if(e.__a11yDatePickerTimeout&&clearTimeout(e.__a11yDatePickerTimeout),e.__a11yDatePickerInput){const a=e.__a11yDatePickerInput;e.__a11yDatePickerFocusHandler&&(a.removeEventListener("focus",e.__a11yDatePickerFocusHandler),a.removeEventListener("click",e.__a11yDatePickerFocusHandler)),e.__a11yDatePickerKeyHandler&&a.removeEventListener("keydown",e.__a11yDatePickerKeyHandler)}e.__a11yDatePickerObserver&&e.__a11yDatePickerObserver.disconnect(),e.__a11yDatePickerAriaObserver&&e.__a11yDatePickerAriaObserver.disconnect(),delete e.__a11yDatePickerInput,delete e.__a11yDatePickerFocusHandler,delete e.__a11yDatePickerKeyHandler,delete e.__a11yDatePickerObserver,delete e.__a11yDatePickerAriaObserver,delete e.__a11yDatePickerTimeout}},H={"a11y-focus":w,"a11y-trap-focus":T,"a11y-keyboard":F,"a11y-announce":x,"a11y-skip-link":O,"a11y-skip":P,"a11y-aria":I,"a11y-date-picker":K};function C(e){Object.entries(H).forEach(([a,t])=>{e.directive(a,t)})}const z={install:C};o.a11yDirectives=H,o.announce=D,o.announceDirective=x,o.ariaDirective=I,o.containsActiveElement=X,o.datePickerDirective=K,o.default=z,o.focusDirective=w,o.generateId=G,o.getFirstFocusable=V,o.getFocusableElements=m,o.getLastFocusable=W,o.installA11yDirectives=C,o.keyboardDirective=F,o.removeAriaAttributes=B,o.restoreFocus=J,o.saveFocus=$,o.setAriaAttributes=E,o.skipDirective=P,o.skipLinkDirective=O,o.trapFocusDirective=T,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-a11y-directives",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.3",
|
|
4
4
|
"description": "A comprehensive set of Vue 3 directives for building accessible web applications with WCAG compliance",
|
|
5
5
|
"main": "dist/vue-a11y-directives.cjs.js",
|
|
6
6
|
"module": "dist/vue-a11y-directives.esm.js",
|
|
@@ -131,9 +131,6 @@ export default {
|
|
|
131
131
|
const handleKeyboardNav = (e) => {
|
|
132
132
|
// Check if it's an arrow key
|
|
133
133
|
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
|
|
134
|
-
// Find the currently focused cell
|
|
135
|
-
const focusedCell = document.activeElement;
|
|
136
|
-
|
|
137
134
|
// Prevent any default behavior on the table/cell
|
|
138
135
|
e.preventDefault();
|
|
139
136
|
|
|
@@ -142,7 +139,6 @@ export default {
|
|
|
142
139
|
|
|
143
140
|
// Prevent ALL click/selection events that might be triggered
|
|
144
141
|
const preventAutoSelect = (event) => {
|
|
145
|
-
console.log('[DEBUG] Preventing', event.type, 'during keyboard navigation');
|
|
146
142
|
event.preventDefault();
|
|
147
143
|
event.stopPropagation();
|
|
148
144
|
event.stopImmediatePropagation();
|
|
@@ -165,12 +161,9 @@ export default {
|
|
|
165
161
|
});
|
|
166
162
|
});
|
|
167
163
|
|
|
168
|
-
//
|
|
169
|
-
// But our preventers will stop any selection
|
|
164
|
+
// Clear the flag after Element Plus has moved focus
|
|
170
165
|
setTimeout(() => {
|
|
171
|
-
// Clear the flag after Element Plus has moved focus
|
|
172
166
|
calendarPanel.__a11yNavigatingWithKeyboard = false;
|
|
173
|
-
console.log('[DEBUG] Keyboard navigation complete');
|
|
174
167
|
}, 50);
|
|
175
168
|
}
|
|
176
169
|
};
|
|
@@ -180,7 +173,6 @@ export default {
|
|
|
180
173
|
calendarPanel.__a11yKeyboardHandlerAdded = true;
|
|
181
174
|
calendarPanel.addEventListener('keydown', handleKeyboardNav, { capture: true });
|
|
182
175
|
calendarPanel.__a11yKeyboardHandler = handleKeyboardNav;
|
|
183
|
-
console.log('[DEBUG] Keyboard navigation handler installed');
|
|
184
176
|
}
|
|
185
177
|
|
|
186
178
|
return true;
|