blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-01 20:29:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

accessibility directive first draft

Browse Source
This commit is contained in:
cgfhtw
2023-11-17 11:54:36 +01:00
parent 9c73908733
commit 4158a66da4
2 changed files with 87 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Stv/Studentenverwaltung/List/New.js
+4
View File
@@ -2,6 +2,7 @@ import {CoreRESTClient} from '../../../../RESTClient.js';
import BsModal from '../../../Bootstrap/Modal.js';
import FhcFormValidation from '../../../Form/Validation.js';
import VueDatePicker from '../../../vueDatepicker.js.php';
import accessibility from '../../../../directives/accessibility.js';
var _uuid = 0;
@@ -11,6 +12,9 @@ export default {
FhcFormValidation,
VueDatePicker
},
directives: {
accessibility
},
props: {
studiengangKz: Number
},
public/js/directives/accessibility.js
+83
View File
@@ -0,0 +1,83 @@
export default {
created(el, binding) {
switch (binding.arg) {
case 'tab':
const [prev, next] = binding.modifiers.vertical ? ['ArrowUp', 'ArrowDown'] : ['ArrowRight', 'ArrowLeft'];
el.addEventListener('focus', () => {
el.setAttribute('aria-selected', true);
});
el.addEventListener('blur', () => {
el.setAttribute('aria-selected', false);
});
el.addEventListener('keydown', e => {
switch (e.code) {
case prev:
if (el.previousSibling?.setAttribute) {
el.previousSibling.setAttribute('tabindex', 0);
el.setAttribute('tabindex', -1);
el.previousSibling.focus();
}
break;
case next:
if (el.nextSibling?.setAttribute) {
el.nextSibling.setAttribute('tabindex', 0);
el.setAttribute('tabindex', -1);
el.nextSibling.focus();
}
break;
case 'Enter':
el.click();
break;
}
});
break;
}
},
mounted(el, binding) {
switch (binding.arg) {
case 'tab':
//const [prev, next] = binding.modifiers.vertical ? ['up', 'down'] : ['right', 'left'];
let activetab = -1;
Array.from(el.parentNode.children).forEach((node, index) => {
node.setAttribute('aria-setsize', el.parentNode.children.length);
node.setAttribute('aria-posinset', index);
if (node.getAttribute('tabindex') == '0')
activetab = index;
});
if (activetab == -1) {
el.setAttribute('tabindex', 0);
} else if (el.classList.contains('active')) {
el.parentNode.children[activetab].setAttribute('tabindex', -1);
el.setAttribute('tabindex', 0);
} else {
el.setAttribute('tabindex', -1);
}
break;
}
},
beforeUnmount(el, binding) {
switch (binding.arg) {
case 'tab':
if (el.getAttribute('tabindex') == '0') {
if (el.previousSibling?.setAttribute)
el.previousSibling.setAttribute('tabindex', 0);
else if (el.nextSibling?.setAttribute)
el.nextSibling.setAttribute('tabindex', 0);
}
const pos = parseInt(el.getAttribute('aria-posinset'));
Array.from(el.parentNode.children).forEach((node, index) => {
node.setAttribute('aria-setsize', el.parentNode.children.length-1);
if (index > pos)
node.setAttribute('aria-posinset', index-1);
});
break;
}
},
unmounted(el, binding) {
switch (binding.arg) {
case 'tab':
console.log(el.parentNode);
break;
}
}
}