Skip to content

Commit 6f67f29

Browse files
youda97youda97
committed
Move setTabIndex function, fix focusout bug and simplify code
1 parent ff8b855 commit 6f67f29

File tree

3 files changed

+48
-52
lines changed

3 files changed

+48
-52
lines changed

‎src/table/data-grid-focus.directive.ts‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
} from "@angular/core";
77
import { Table } from "./table.component";
88
import { getFocusElementList, tabbableSelectorIgnoreTabIndex } from "../common/tab.service";
9+
import { setTabIndex } from "../utils/a11y";
910

1011
@Directive({
1112
selector: "[ibmDataGridFocus]"
@@ -33,25 +34,26 @@ export class DataGridFocus {
3334
if (!this.ibmDataGridFocus) {
3435
return;
3536
}
36-
const rows = this.elementRef.nativeElement.closest("table").rows;
37-
let rowIndex = Array.from(rows).findIndex(item => item === this.elementRef.nativeElement.closest("tr"));
37+
const element = this.elementRef.nativeElement;
38+
const rows = element.closest("table").rows;
39+
let rowIndex = Array.from(rows).findIndex(item => item === element.closest("tr"));
3840

3941
switch (event.key) {
4042
case "Right": // IE specific value
4143
case "ArrowRight":
42-
if (this.elementRef.nativeElement.nextElementSibling) {
43-
const nextSibling = this.elementRef.nativeElement.nextElementSibling;
44-
Table.setTabIndex(this.elementRef.nativeElement, -1);
45-
Table.setTabIndex(nextSibling, 0);
44+
if (element.nextElementSibling && element.nextElementSibling.style.width !== "0px") {
45+
const nextSibling = element.nextElementSibling;
46+
setTabIndex(element, -1);
47+
setTabIndex(nextSibling, 0);
4648
this.focus(nextSibling);
4749
}
4850
break;
4951
case "Left": // IE specific value
5052
case "ArrowLeft":
51-
if (this.elementRef.nativeElement.previousElementSibling) {
52-
const previousSibling = this.elementRef.nativeElement.previousElementSibling;
53-
Table.setTabIndex(this.elementRef.nativeElement, -1);
54-
Table.setTabIndex(previousSibling, 0);
53+
if (element.previousElementSibling) {
54+
const previousSibling = element.previousElementSibling;
55+
setTabIndex(element, -1);
56+
setTabIndex(previousSibling, 0);
5557
this.focus(previousSibling);
5658
}
5759
break;
@@ -60,64 +62,64 @@ export class DataGridFocus {
6062
if (rowIndex < rows.length - 1) {
6163
rowIndex++;
6264
const row = rows[rowIndex].querySelectorAll("td");
63-
Table.setTabIndex(this.elementRef.nativeElement, -1);
65+
setTabIndex(element, -1);
6466
if (rows[rowIndex].className === "bx--expandable-row-v2") {
65-
Table.setTabIndex(row[0], 0);
67+
setTabIndex(row[0], 0);
6668
this.focus(row[0]);
6769
} else {
68-
Table.setTabIndex(row[this.columnIndex], 0);
70+
setTabIndex(row[this.columnIndex], 0);
6971
this.focus(row[this.columnIndex]);
7072
}
7173
}
7274
break;
7375
case "Up": // IE specific value
7476
case "ArrowUp":
7577
const headerRow = rows[0].querySelectorAll("th");
76-
Table.setTabIndex(this.elementRef.nativeElement, -1);
78+
setTabIndex(element, -1);
7779
if (rowIndex === 1 && Array.from(headerRow).some(th => getFocusElementList(th, tabbableSelectorIgnoreTabIndex).length > 0)) {
78-
Table.setTabIndex(headerRow[this.columnIndex], 0);
80+
setTabIndex(headerRow[this.columnIndex], 0);
7981
this.focus(headerRow[this.columnIndex]);
8082
} else if (rowIndex > 1) {
8183
rowIndex--;
8284
const row = rows[rowIndex].querySelectorAll("td");
8385
if (rows[rowIndex].className === "bx--expandable-row-v2") {
84-
Table.setTabIndex(row[0], 0);
86+
setTabIndex(row[0], 0);
8587
this.focus(row[0]);
8688
} else {
87-
Table.setTabIndex(row[this.columnIndex], 0);
89+
setTabIndex(row[this.columnIndex], 0);
8890
this.focus(row[this.columnIndex]);
8991
}
9092
}
9193
break;
9294
case "Home":
93-
Table.setTabIndex(this.elementRef.nativeElement, -1);
95+
setTabIndex(element, -1);
9496
if (event.ctrlKey) {
9597
const headerRow = rows[0].querySelectorAll("th");
9698
if (Array.from(headerRow).some(th => getFocusElementList(th, tabbableSelectorIgnoreTabIndex).length > 0)) {
97-
Table.setTabIndex(headerRow[0], 0);
99+
setTabIndex(headerRow[0], 0);
98100
this.focus(headerRow[0]);
99101
} else {
100102
const firstBodyCell = rows[1].querySelectorAll("td")[0];
101-
Table.setTabIndex(firstBodyCell, 0);
103+
setTabIndex(firstBodyCell, 0);
102104
this.focus(firstBodyCell);
103105
}
104-
} else if (this.elementRef.nativeElement.parentElement.className !== "bx--expandable-row-v2") {
106+
} else if (element.parentElement.className !== "bx--expandable-row-v2") {
105107
const firstRowCell = rows[rowIndex].querySelectorAll("th, td")[0];
106-
Table.setTabIndex(firstRowCell, 0);
108+
setTabIndex(firstRowCell, 0);
107109
this.focus(firstRowCell);
108110
}
109111
break;
110112
case "End":
111113
const lastRow = rows[rows.length - 1].querySelectorAll("td");
112-
Table.setTabIndex(this.elementRef.nativeElement, -1);
114+
setTabIndex(element, -1);
113115
if (event.ctrlKey) {
114116
this.columnIndex = lastRow.length - 1;
115-
Table.setTabIndex(lastRow[this.columnIndex], 0);
117+
setTabIndex(lastRow[this.columnIndex], 0);
116118
this.focus(lastRow[this.columnIndex]);
117-
} else if (this.elementRef.nativeElement.parentElement.className !== "bx--expandable-row-v2") {
119+
} else if (element.parentElement.className !== "bx--expandable-row-v2") {
118120
this.columnIndex = lastRow.length - 1;
119121
const lastRowCell = rows[rowIndex].querySelectorAll("th, td")[this.columnIndex];
120-
Table.setTabIndex(lastRowCell, 0);
122+
setTabIndex(lastRowCell, 0);
121123
this.focus(lastRowCell);
122124
}
123125
break;
@@ -130,8 +132,8 @@ export class DataGridFocus {
130132
return;
131133
}
132134
const focusElementList = getFocusElementList(this.elementRef.nativeElement.closest("table"), tabbableSelectorIgnoreTabIndex);
133-
focusElementList.forEach(element => Table.setTabIndex(element, -1));
134-
Table.setTabIndex(this.elementRef.nativeElement, 0);
135+
focusElementList.forEach(element => setTabIndex(element, -1));
136+
setTabIndex(this.elementRef.nativeElement, 0);
135137
this.focus(this.elementRef.nativeElement);
136138
}
137139
}

‎src/table/table.component.ts‎

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { TableHeaderItem } from "./table-header-item.class";
1616
import { TableItem } from "./table-item.class";
1717
import { getScrollbarWidth } from "../common/utils";
1818
import { getFocusElementList, tabbableSelectorIgnoreTabIndex } from "../common/tab.service";
19+
import { setTabIndex } from "../utils/a11y";
1920
import { I18n } from "./../i18n/i18n.module";
2021

2122
/**
@@ -441,17 +442,6 @@ export class Table implements AfterViewInit {
441442
return model;
442443
}
443444

444-
static setTabIndex(element: HTMLElement, value: number) {
445-
const focusElementList = getFocusElementList(element, tabbableSelectorIgnoreTabIndex);
446-
if (element.firstElementChild && element.firstElementChild.classList.contains("bx--table-sort-v2")) {
447-
focusElementList[1].tabIndex = value;
448-
} else if (focusElementList.length > 0) {
449-
focusElementList[0].tabIndex = value;
450-
} else {
451-
element.tabIndex = value;
452-
}
453-
}
454-
455445
/**
456446
* Size of the table rows.
457447
*
@@ -935,15 +925,15 @@ export class Table implements AfterViewInit {
935925
tabbable.tabIndex = -1;
936926
});
937927
}
938-
Array.from<HTMLElement>(this.elementRef.nativeElement.querySelectorAll("td, th:not([style*='width: 0'])")).forEach(cell =>
939-
Table.setTabIndex(cell, -1)
928+
Array.from<HTMLElement>(this.elementRef.nativeElement.querySelectorAll("td, th")).forEach(cell =>
929+
setTabIndex(cell, -1)
940930
);
941931

942932
const rows = this.elementRef.nativeElement.firstElementChild.rows;
943933
if (Array.from(rows[0].querySelectorAll("th")).some(th => getFocusElementList(th, tabbableSelectorIgnoreTabIndex).length > 0)) {
944-
Table.setTabIndex(rows[0].querySelector("th"), 0);
934+
setTabIndex(rows[0].querySelector("th"), 0);
945935
} else {
946-
Table.setTabIndex(rows[1].querySelector("td"), 0);
936+
setTabIndex(rows[1].querySelector("td"), 0);
947937
}
948938
});
949939
}
@@ -1002,21 +992,12 @@ export class Table implements AfterViewInit {
1002992
this.columnIndex = 0;
1003993
}
1004994

1005-
@HostListener("focusout", ["$event"])
1006-
focusOut(event) {
1007-
if (event.relatedTarget === null) {
1008-
this.columnIndex = 0;
1009-
}
1010-
}
1011-
1012995
@HostListener("keyup", ["$event"])
1013996
keyUp(event: KeyboardEvent) {
1014997
if (event.key === "Home" && event.ctrlKey) {
1015998
this.columnIndex = 0;
1016999
} else if (event.key === "End" && event.ctrlKey) {
10171000
this.columnIndex = this.getTotalColumns() - 1;
1018-
} else if (event.key === "Tab" && event.shiftKey) {
1019-
this.columnIndex = 0;
10201001
}
10211002
}
10221003
}

‎src/utils/a11y.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { getFocusElementList, tabbableSelectorIgnoreTabIndex } from "../common/tab.service";
2+
13
function findSiblingElem(target, direction: "nextElementSibling" | "previousElementSibling") {
24
if (target[direction]) {
35
if (target[direction].classList.contains("disabled")) {
@@ -95,3 +97,14 @@ export function focusPrevElem(elem, parentRef = null) {
9597
}
9698
}
9799
}
100+
101+
export function setTabIndex(element: HTMLElement, index: -1 | 0 | 1) {
102+
const focusElementList = getFocusElementList(element, tabbableSelectorIgnoreTabIndex);
103+
if (element.firstElementChild && element.firstElementChild.classList.contains("bx--table-sort-v2")) {
104+
focusElementList[1].tabIndex = index;
105+
} else if (focusElementList.length > 0) {
106+
focusElementList[0].tabIndex = index;
107+
} else {
108+
element.tabIndex = index;
109+
}
110+
}

0 commit comments

Comments
 (0)