Skip to content

Commit 123279a

Browse files
youda97youda97
committed
Fix review comments
1 parent 2805182 commit 123279a

File tree

3 files changed

+43
-50
lines changed

3 files changed

+43
-50
lines changed

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

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
} from "@angular/core";
99
import { Table } from "./table.component";
1010
import { getFocusElementList, tabbableSelectorIgnoreTabIndex } from "../common/tab.service";
11-
import { setTabIndex } from "../utils/a11y";
1211

1312
@Directive({
1413
selector: "[ibmDataGridFocus]"
@@ -25,6 +24,7 @@ export class DataGridFocus {
2524
get columnIndex(): number {
2625
return this._columnIndex;
2726
}
27+
2828
@Output() columnIndexChange: EventEmitter<number> = new EventEmitter();
2929

3030
protected _columnIndex: number;
@@ -60,8 +60,8 @@ export class DataGridFocus {
6060
if (element.nextElementSibling && Array.from(headerRow).indexOf(element.nextElementSibling) < headerRow.length - 1) {
6161
this.columnIndex++;
6262
const nextSibling = element.nextElementSibling;
63-
setTabIndex(element, -1);
64-
setTabIndex(nextSibling, 0);
63+
Table.setTabIndex(element, -1);
64+
Table.setTabIndex(nextSibling, 0);
6565
this.focus(nextSibling);
6666
}
6767
break;
@@ -70,8 +70,8 @@ export class DataGridFocus {
7070
if (element.previousElementSibling) {
7171
this.columnIndex--;
7272
const previousSibling = element.previousElementSibling;
73-
setTabIndex(element, -1);
74-
setTabIndex(previousSibling, 0);
73+
Table.setTabIndex(element, -1);
74+
Table.setTabIndex(previousSibling, 0);
7575
this.focus(previousSibling);
7676
}
7777
break;
@@ -80,62 +80,68 @@ export class DataGridFocus {
8080
if (rowIndex < rows.length - 1) {
8181
rowIndex++;
8282
const row = rows[rowIndex].querySelectorAll("td");
83-
setTabIndex(element, -1);
84-
if (rows[rowIndex].classList.item(0) === "bx--expandable-row-v2") {
85-
setTabIndex(row[0], 0);
83+
Table.setTabIndex(element, -1);
84+
if (rows[rowIndex].classList.contains("bx--expandable-row-v2") && !rows[rowIndex].classList.contains("bx--parent-row-v2")) {
85+
Table.setTabIndex(row[0], 0);
8686
this.focus(row[0]);
8787
} else {
88-
setTabIndex(row[this.columnIndex], 0);
88+
if (this.columnIndex > row.length - 1) {
89+
this.columnIndex = row.length - 1;
90+
}
91+
Table.setTabIndex(row[this.columnIndex], 0);
8992
this.focus(row[this.columnIndex]);
9093
}
9194
}
9295
break;
9396
case "Up": // IE specific value
9497
case "ArrowUp":
95-
if ((rowIndex !== 1 && Array.from(headerRow).some(th => getFocusElementList(th, tabbableSelectorIgnoreTabIndex).length < 0)) ||
98+
if ((rowIndex === 1 && Array.from(headerRow).every(th => getFocusElementList(th, tabbableSelectorIgnoreTabIndex).length === 0)) ||
9699
rowIndex === 0) {
97100
return;
98101
}
99-
setTabIndex(element, -1);
102+
Table.setTabIndex(element, -1);
100103
rowIndex--;
101104
const row = rows[rowIndex].querySelectorAll("td, th");
102-
if (rows[rowIndex].classList.item(0) === "bx--expandable-row-v2") {
103-
setTabIndex(row[0], 0);
105+
if (rows[rowIndex].classList.contains("bx--expandable-row-v2") && !rows[rowIndex].classList.contains("bx--parent-row-v2")) {
106+
Table.setTabIndex(row[0], 0);
104107
this.focus(row[0]);
105108
} else {
106-
setTabIndex(row[this.columnIndex], 0);
109+
if (this.columnIndex > row.length - 1) {
110+
this.columnIndex = row.length - 1;
111+
}
112+
Table.setTabIndex(row[this.columnIndex], 0);
107113
this.focus(row[this.columnIndex]);
108114
}
109115
break;
110116
case "Home":
111117
this.columnIndex = 0;
112-
setTabIndex(element, -1);
118+
Table.setTabIndex(element, -1);
113119
if (event.ctrlKey) {
114120
if (Array.from(headerRow).some(th => getFocusElementList(th, tabbableSelectorIgnoreTabIndex).length > 0)) {
115-
setTabIndex(headerRow[0], 0);
121+
Table.setTabIndex(headerRow[0], 0);
116122
this.focus(headerRow[0]);
117123
} else {
118124
const firstBodyCell = rows[1].querySelectorAll("td")[0];
119-
setTabIndex(firstBodyCell, 0);
125+
Table.setTabIndex(firstBodyCell, 0);
120126
this.focus(firstBodyCell);
121127
}
122128
} else {
123129
const firstRowCell = rows[rowIndex].querySelectorAll("th, td")[0];
124-
setTabIndex(firstRowCell, 0);
130+
Table.setTabIndex(firstRowCell, 0);
125131
this.focus(firstRowCell);
126132
}
127133
break;
128134
case "End":
129135
const lastRow = rows[rows.length - 1].querySelectorAll("td");
130-
setTabIndex(element, -1);
136+
Table.setTabIndex(element, -1);
131137
if (event.ctrlKey) {
132138
this.columnIndex = lastRow.length - 1;
133-
setTabIndex(lastRow[this.columnIndex], 0);
139+
Table.setTabIndex(lastRow[this.columnIndex], 0);
134140
this.focus(lastRow[this.columnIndex]);
135141
} else {
136142
const currentRow = rows[rowIndex].querySelectorAll("th, td");
137143
this.columnIndex = currentRow.length - 1;
138-
setTabIndex(currentRow[this.columnIndex], 0);
144+
Table.setTabIndex(currentRow[this.columnIndex], 0);
139145
this.focus(currentRow[this.columnIndex]);
140146
}
141147
break;
@@ -148,8 +154,8 @@ export class DataGridFocus {
148154
return;
149155
}
150156
const focusElementList = getFocusElementList(this.elementRef.nativeElement.closest("table"), tabbableSelectorIgnoreTabIndex);
151-
focusElementList.forEach(element => setTabIndex(element, -1));
152-
setTabIndex(this.elementRef.nativeElement, 0);
157+
focusElementList.forEach(element => Table.setTabIndex(element, -1));
158+
Table.setTabIndex(this.elementRef.nativeElement, 0);
153159
this.focus(this.elementRef.nativeElement);
154160
}
155161
}

‎src/table/table.component.ts‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ 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";
2019
import { I18n } from "./../i18n/i18n.module";
2120

2221
/**
@@ -436,6 +435,17 @@ export class Table implements AfterViewInit {
436435
return model;
437436
}
438437

438+
static setTabIndex(element: HTMLElement, index: -1 | 0) {
439+
const focusElementList = getFocusElementList(element, tabbableSelectorIgnoreTabIndex);
440+
if (element.firstElementChild && element.firstElementChild.classList.contains("bx--table-sort-v2")) {
441+
focusElementList[1].tabIndex = index;
442+
} else if (focusElementList.length > 0) {
443+
focusElementList[0].tabIndex = index;
444+
} else {
445+
element.tabIndex = index;
446+
}
447+
}
448+
439449
/**
440450
* Size of the table rows.
441451
*
@@ -470,7 +480,6 @@ export class Table implements AfterViewInit {
470480
this._model.dataChange.subscribe(() => {
471481
this.updateSelectAllCheckbox();
472482
if (this.isDataGrid) {
473-
this.getTotalColumns();
474483
this.handleTabIndex();
475484
}
476485
});
@@ -716,7 +725,6 @@ export class Table implements AfterViewInit {
716725

717726
ngAfterViewInit() {
718727
if (this.isDataGrid) {
719-
this.getTotalColumns();
720728
this.handleTabIndex();
721729
}
722730
}
@@ -920,27 +928,17 @@ export class Table implements AfterViewInit {
920928
tabbable.tabIndex = -1;
921929
});
922930
}
923-
Array.from<HTMLElement>(this.elementRef.nativeElement.querySelectorAll("td, th")).forEach(cell => setTabIndex(cell, -1));
931+
Array.from<HTMLElement>(this.elementRef.nativeElement.querySelectorAll("td, th")).forEach(cell => Table.setTabIndex(cell, -1));
924932

925933
const rows = this.elementRef.nativeElement.firstElementChild.rows;
926934
if (Array.from(rows[0].querySelectorAll("th")).some(th => getFocusElementList(th, tabbableSelectorIgnoreTabIndex).length > 0)) {
927-
setTabIndex(rows[0].querySelector("th"), 0);
935+
Table.setTabIndex(rows[0].querySelector("th"), 0);
928936
} else {
929-
setTabIndex(rows[1].querySelector("td"), 0);
937+
Table.setTabIndex(rows[1].querySelector("td"), 0);
930938
}
931939
});
932940
}
933941

934-
getTotalColumns() {
935-
if (this.model.hasExpandableRows() && this.showSelectionColumn) {
936-
return this.model.header.length + 2;
937-
} else if (this.model.hasExpandableRows() || this.showSelectionColumn) {
938-
return this.model.header.length + 1;
939-
} else {
940-
return this.model.header.length;
941-
}
942-
}
943-
944942
setIndex(event, columnIndex) {
945943
if (this.model.hasExpandableRows() && this.showSelectionColumn) {
946944
this.columnIndex = columnIndex + 2;

‎src/utils/a11y.ts‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -97,14 +97,3 @@ export function focusPrevElem(elem, parentRef = null) {
9797
}
9898
}
9999
}
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)