diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Details.js b/public/js/components/Stv/Studentenverwaltung/Details/Details.js index ef36aebaf..22f1b012f 100644 --- a/public/js/components/Stv/Studentenverwaltung/Details/Details.js +++ b/public/js/components/Stv/Studentenverwaltung/Details/Details.js @@ -195,9 +195,9 @@ export default { }, //TODO(chris): Geburtszeit? Anzahl der Kinder? template: ` -
+
- +
Person @@ -379,5 +379,5 @@ export default {
- ` + ` }; \ No newline at end of file diff --git a/public/js/components/Stv/Studentenverwaltung/List.js b/public/js/components/Stv/Studentenverwaltung/List.js index a150746af..0b79fee4f 100644 --- a/public/js/components/Stv/Studentenverwaltung/List.js +++ b/public/js/components/Stv/Studentenverwaltung/List.js @@ -74,6 +74,7 @@ export default { handler: this.autoSelectRows } ], + focusObj: null, // TODO(chris): this should be in the filter component lastSelected: null } }, @@ -113,10 +114,56 @@ export default { }); else this.$refs.table.tabulator.setData(url); + }, + onKeydown(e) { // TODO(chris): this should be in the filter component + if (!this.focusObj) + return; + switch (e.code) { + case 'Enter': + case 'Space': + e.preventDefault(); + this.$refs.table.tabulator.rowManager.findRow(this.focusObj).component.toggleSelect(); + break; + case 'ArrowUp': + e.preventDefault(); + var next = this.focusObj.previousElementSibling; + if (next) + this.focusObj = this.changeFocus(this.focusObj, next); + break; + case 'ArrowDown': + e.preventDefault(); + var next = this.focusObj.nextElementSibling; + if (next) + this.focusObj = this.changeFocus(this.focusObj, next); + break; + } + }, + changeFocus(a, b) { // TODO(chris): this should be in the filter component + a.tabIndex = -1; + if (b) { + b.tabIndex = 0; + b.focus(); + } + return b; + }, + onBlur(e) { // TODO(chris): this should be in the filter component + const tableholder = e.target.closest('.tabulator-tableholder'); + if (tableholder && tableholder != e.target && !e.relatedTarget?.classList.contains('tabulator-row')) { + e.target.tabIndex = -1; + tableholder.tabIndex = 0; + this.focusObj = null; + } + }, + onFocus(e) { // TODO(chris): this should be in the filter component + if (e.target.classList.contains('tabulator-tableholder')) { + this.focusObj = this.changeFocus(e.target, e.target.querySelector('.tabulator-row')); + } } }, + // TODO(chris): focusin, focusout, keydown and tabindex should be in the filter component + // TODO(chris): filter component column chooser has no accessibilty features template: ` -
+
`