Skip to content

Commit b164538

Browse files
chintankavathiachintankavathia
authored
fix(footer): move footer outside table role (#47)
footer includes pagination which can break a11y rules and shouldn't be part of parent with `role=table`.
1 parent 3d254af commit b164538

File tree

1 file changed

+76
-74
lines changed

1 file changed

+76
-74
lines changed

‎projects/ngx-datatable/src/lib/components/datatable.component.html

+76-74
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,79 @@
1-
<div role="table" visibilityObserver (visible)="recalculate()">
2-
<datatable-header
3-
role="rowgroup"
4-
*ngIf="headerHeight"
5-
[sorts]="sorts"
6-
[sortType]="sortType"
7-
[scrollbarH]="scrollbarH"
8-
[innerWidth]="_innerWidth"
9-
[offsetX]="_offsetX | async"
10-
[dealsWithGroup]="groupedRows !== undefined"
11-
[columns]="_internalColumns"
12-
[headerHeight]="headerHeight"
13-
[reorderable]="reorderable"
14-
[targetMarkerTemplate]="targetMarkerTemplate"
15-
[sortAscendingIcon]="cssClasses.sortAscending"
16-
[sortDescendingIcon]="cssClasses.sortDescending"
17-
[sortUnsetIcon]="cssClasses.sortUnset"
18-
[allRowsSelected]="allRowsSelected"
19-
[selectionType]="selectionType"
20-
(sort)="onColumnSort($event)"
21-
(resize)="onColumnResize($event)"
22-
(resizing)="onColumnResizing($event)"
23-
(reorder)="onColumnReorder($event)"
24-
(select)="onHeaderSelect($event)"
25-
(columnContextmenu)="onColumnContextmenu($event)"
26-
>
27-
</datatable-header>
28-
<datatable-body
29-
tabindex="0"
30-
role="rowgroup"
31-
[groupRowsBy]="groupRowsBy"
32-
[groupedRows]="groupedRows"
33-
[rows]="_internalRows"
34-
[groupExpansionDefault]="groupExpansionDefault"
35-
[scrollbarV]="scrollbarV"
36-
[scrollbarH]="scrollbarH"
37-
[virtualization]="virtualization"
38-
[loadingIndicator]="loadingIndicator"
39-
[ghostLoadingIndicator]="ghostLoadingIndicator"
40-
[externalPaging]="externalPaging"
41-
[rowHeight]="rowHeight"
42-
[rowCount]="rowCount"
43-
[offset]="offset"
44-
[trackByProp]="trackByProp"
45-
[columns]="_internalColumns"
46-
[pageSize]="pageSize"
47-
[offsetX]="_offsetX | async"
48-
[rowDetail]="rowDetail"
49-
[groupHeader]="groupHeader"
50-
[selected]="selected"
51-
[innerWidth]="_innerWidth"
52-
[bodyHeight]="bodyHeight"
53-
[selectionType]="selectionType"
54-
[emptyMessage]="messages.emptyMessage"
55-
[rowIdentity]="rowIdentity"
56-
[rowClass]="rowClass"
57-
[selectCheck]="selectCheck"
58-
[displayCheck]="displayCheck"
59-
[summaryRow]="summaryRow"
60-
[summaryHeight]="summaryHeight"
61-
[summaryPosition]="summaryPosition"
62-
(page)="onBodyPage($event)"
63-
(activate)="activate.emit($event)"
64-
(rowContextmenu)="onRowContextmenu($event)"
65-
(select)="onBodySelect($event)"
66-
(scroll)="onBodyScroll($event)"
67-
(treeAction)="onTreeAction($event)"
68-
[disableRowCheck]="disableRowCheck"
69-
[rowDraggable]="rowDraggable"
70-
[rowDragEvents]="rowDragEvents"
71-
>
72-
<ng-content select="[loading-indicator]" ngProjectAs="[loading-indicator]"></ng-content>
73-
<ng-content select="[empty-content]" ngProjectAs="[empty-content]"></ng-content>
74-
</datatable-body>
1+
<div visibilityObserver (visible)="recalculate()">
2+
<div role="table">
3+
<datatable-header
4+
role="rowgroup"
5+
*ngIf="headerHeight"
6+
[sorts]="sorts"
7+
[sortType]="sortType"
8+
[scrollbarH]="scrollbarH"
9+
[innerWidth]="_innerWidth"
10+
[offsetX]="_offsetX | async"
11+
[dealsWithGroup]="groupedRows !== undefined"
12+
[columns]="_internalColumns"
13+
[headerHeight]="headerHeight"
14+
[reorderable]="reorderable"
15+
[targetMarkerTemplate]="targetMarkerTemplate"
16+
[sortAscendingIcon]="cssClasses.sortAscending"
17+
[sortDescendingIcon]="cssClasses.sortDescending"
18+
[sortUnsetIcon]="cssClasses.sortUnset"
19+
[allRowsSelected]="allRowsSelected"
20+
[selectionType]="selectionType"
21+
(sort)="onColumnSort($event)"
22+
(resize)="onColumnResize($event)"
23+
(resizing)="onColumnResizing($event)"
24+
(reorder)="onColumnReorder($event)"
25+
(select)="onHeaderSelect($event)"
26+
(columnContextmenu)="onColumnContextmenu($event)"
27+
>
28+
</datatable-header>
29+
<datatable-body
30+
tabindex="0"
31+
role="rowgroup"
32+
[groupRowsBy]="groupRowsBy"
33+
[groupedRows]="groupedRows"
34+
[rows]="_internalRows"
35+
[groupExpansionDefault]="groupExpansionDefault"
36+
[scrollbarV]="scrollbarV"
37+
[scrollbarH]="scrollbarH"
38+
[virtualization]="virtualization"
39+
[loadingIndicator]="loadingIndicator"
40+
[ghostLoadingIndicator]="ghostLoadingIndicator"
41+
[externalPaging]="externalPaging"
42+
[rowHeight]="rowHeight"
43+
[rowCount]="rowCount"
44+
[offset]="offset"
45+
[trackByProp]="trackByProp"
46+
[columns]="_internalColumns"
47+
[pageSize]="pageSize"
48+
[offsetX]="_offsetX | async"
49+
[rowDetail]="rowDetail"
50+
[groupHeader]="groupHeader"
51+
[selected]="selected"
52+
[innerWidth]="_innerWidth"
53+
[bodyHeight]="bodyHeight"
54+
[selectionType]="selectionType"
55+
[emptyMessage]="messages.emptyMessage"
56+
[rowIdentity]="rowIdentity"
57+
[rowClass]="rowClass"
58+
[selectCheck]="selectCheck"
59+
[displayCheck]="displayCheck"
60+
[summaryRow]="summaryRow"
61+
[summaryHeight]="summaryHeight"
62+
[summaryPosition]="summaryPosition"
63+
(page)="onBodyPage($event)"
64+
(activate)="activate.emit($event)"
65+
(rowContextmenu)="onRowContextmenu($event)"
66+
(select)="onBodySelect($event)"
67+
(scroll)="onBodyScroll($event)"
68+
(treeAction)="onTreeAction($event)"
69+
[disableRowCheck]="disableRowCheck"
70+
[rowDraggable]="rowDraggable"
71+
[rowDragEvents]="rowDragEvents"
72+
>
73+
<ng-content select="[loading-indicator]" ngProjectAs="[loading-indicator]"></ng-content>
74+
<ng-content select="[empty-content]" ngProjectAs="[empty-content]"></ng-content>
75+
</datatable-body>
76+
</div>
7577
<datatable-footer
7678
*ngIf="footerHeight"
7779
[rowCount]="rowCount"

0 commit comments

Comments
 (0)