From 667ad7add4bd46f3b5b28d0fa1c740f0cb1d54b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 20 Nov 2023 13:50:48 +0300 Subject: [PATCH] TreeTable | Accessibility Enhancements --- src/app/components/treetable/treetable.ts | 264 ++++++++++++++++------ 1 file changed, 201 insertions(+), 63 deletions(-) diff --git a/src/app/components/treetable/treetable.ts b/src/app/components/treetable/treetable.ts index c96b5ebae3a..51a3e8d5edc 100755 --- a/src/app/components/treetable/treetable.ts +++ b/src/app/components/treetable/treetable.ts @@ -170,13 +170,13 @@ export class TreeTableService {
- +
- + - - + +
@@ -2169,7 +2169,7 @@ export class TTBody {
- +
@@ -2204,9 +2204,9 @@ export class TTBody { - +
- +
@@ -2215,7 +2215,7 @@ export class TTBody {
- +
@@ -2432,7 +2432,8 @@ export class TTScrollableView implements AfterViewInit, OnDestroy { '[class.p-sortable-column]': 'isEnabled()', '[class.p-highlight]': 'sorted', '[attr.tabindex]': 'isEnabled() ? "0" : null', - '[attr.role]': '"columnheader"' + '[attr.role]': '"columnheader"', + '[attr.aria-sort]': 'ariaSorted' } }) export class TTSortableColumn implements OnInit, OnDestroy { @@ -2444,6 +2445,12 @@ export class TTSortableColumn implements OnInit, OnDestroy { subscription: Subscription | undefined; + get ariaSorted() { + if(this.sorted && this.tt.sortOrder < 0) return 'descending'; + else if (this.sorted && this.tt.sortOrder > 0) return 'ascending'; + else return 'none'; + } + constructor(public tt: TreeTable) { if (this.isEnabled()) { this.subscription = this.tt.tableService.sortSource$.subscribe((sortMeta) => { @@ -2734,7 +2741,9 @@ export class TTReorderableColumn implements AfterViewInit, OnDestroy { selector: '[ttSelectableRow]', host: { class: 'p-element', - '[class.p-highlight]': 'selected' + '[class.p-highlight]': 'selected', + '[attr.data-p-highlight]': 'selected', + '[attr.aria-checked]': 'selected' } }) export class TTSelectableRow implements OnInit, OnDestroy { @@ -2771,11 +2780,17 @@ export class TTSelectableRow implements OnInit, OnDestroy { } @HostListener('keydown', ['$event']) - onEnterKey(event: KeyboardEvent) { - if (event.which === 13) { - this.onClick(event); + onKeyDown(event: KeyboardEvent) { + switch(event.code){ + case 'Enter': + case 'Space': + this.onEnterKey(event); + break; + + default: + break; } - } + } @HostListener('touchend', ['$event']) onTouchEnd(event: Event) { @@ -2784,6 +2799,18 @@ export class TTSelectableRow implements OnInit, OnDestroy { } } + onEnterKey(event) { + if(this.tt.selectionMode === 'checkbox') { + this.tt.toggleNodeWithCheckbox({ + originalEvent: event, + rowNode: this.rowNode + }); + } else { + this.onClick(event); + } + event.preventDefault(); + } + isEnabled() { return this.ttSelectableRowDisabled !== true; } @@ -2901,7 +2928,7 @@ export class TTContextMenuRow { template: `
- +
@@ -3068,7 +3095,7 @@ export class TTHeaderCheckbox { @Directive({ selector: '[ttEditableColumn]', host: { - class: 'p-element' + class: 'p-element', } }) export class TTEditableColumn implements AfterViewInit { @@ -3281,78 +3308,187 @@ export class TreeTableCellEditor implements AfterContentInit { selector: '[ttRow]', host: { class: 'p-element', - '[attr.tabindex]': '"0"' + '[attr.tabindex]': "'0'", + '[attr.aria-expanded]': 'expanded', + '[attr.aria-level]': 'level', + '[attr.data-pc-section]': 'row', + '[attr.role]': 'row' } }) export class TTRow { + + get level() { + return this.rowNode?.['level'] + 1; + } + + get expanded() { + return this.rowNode?.node['expanded']; + } + @Input('ttRow') rowNode: any; constructor(public tt: TreeTable, public el: ElementRef, public zone: NgZone) {} @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) { - switch (event.which) { - //down arrow - case 40: - let nextRow = this.el.nativeElement.nextElementSibling; - if (nextRow) { - nextRow.focus(); - } + switch (event.code) { + case 'ArrowDown': + this.onArrowDownKey(event); + break; - event.preventDefault(); + case 'ArrowUp': + this.onArrowUpKey(event); break; - //down arrow - case 38: - let prevRow = this.el.nativeElement.previousElementSibling; - if (prevRow) { - prevRow.focus(); - } + case 'ArrowRight': + this.onArrowRightKey(event); + break; - event.preventDefault(); + case 'ArrowLeft': + this.onArrowLeftKey(event); break; - //left arrow - case 37: - if (this.rowNode.node.expanded) { - this.tt.toggleRowIndex = DomHandler.index(this.el.nativeElement); - this.rowNode.node.expanded = false; + case 'Tab': + this.onTabKey(event); + break; - this.tt.onNodeCollapse.emit({ - originalEvent: event, - node: this.rowNode.node - }); + case 'Home': + this.onHomeKey(event); + break; - this.tt.updateSerializedValue(); - this.tt.tableService.onUIUpdate(this.tt.value); - this.restoreFocus(); - } + case 'End': + this.onEndKey(event); break; - //right arrow - case 39: - if (!this.rowNode.node.expanded) { - this.tt.toggleRowIndex = DomHandler.index(this.el.nativeElement); - this.rowNode.node.expanded = true; + default: + break; + } + } - this.tt.onNodeExpand.emit({ - originalEvent: event, - node: this.rowNode.node - }); + onArrowDownKey(event: KeyboardEvent) { + let nextRow = this.el?.nativeElement?.nextElementSibling; + if (nextRow) { + this.focusRowChange(event.currentTarget, nextRow); + } - this.tt.updateSerializedValue(); - this.tt.tableService.onUIUpdate(this.tt.value); - this.restoreFocus(); - } - break; + event.preventDefault(); + } + + onArrowUpKey(event: KeyboardEvent) { + let prevRow = this.el?.nativeElement?.previousElementSibling; + if (prevRow) { + this.focusRowChange(event.currentTarget, prevRow); } + + event.preventDefault(); + } + + onArrowRightKey(event: KeyboardEvent) { + const currentTarget = event.currentTarget; + const isHiddenIcon = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden'; + + if (!isHiddenIcon && !this.expanded && this.rowNode.node['children']) { + this.expand(event); + + currentTarget.tabIndex = -1; + } + event.preventDefault(); } - restoreFocus() { + onArrowLeftKey(event: KeyboardEvent) { + const container = this.tt.containerViewChild?.nativeElement; + const expandedRows = DomHandler.find(container, '[aria-expanded="true"]'); + const lastExpandedRow = expandedRows[expandedRows.length - 1]; + + if (this.expanded) { + this.collapse(event); + } + if (lastExpandedRow) { + this.tt.toggleRowIndex = DomHandler.index(lastExpandedRow); + } + this.restoreFocus(); + event.preventDefault(); + } + + onHomeKey(event: KeyboardEvent) { + const firstElement = DomHandler.findSingle(this.tt.containerViewChild?.nativeElement, `tr[aria-level="${this.level}"]`); + firstElement && DomHandler.focus(firstElement); + event.preventDefault(); + } + + onEndKey(event: KeyboardEvent) { + const nodes = DomHandler.find(this.tt.containerViewChild?.nativeElement, `tr[aria-level="${this.level}"]`); + const lastElement = nodes[nodes.length - 1]; + DomHandler.focus(lastElement); + event.preventDefault(); + } + + onTabKey(event: KeyboardEvent) { + const rows = this.el.nativeElement ? [...DomHandler.find(this.el.nativeElement.parentNode, 'tr')] : undefined; + + if (rows && ObjectUtils.isNotEmpty(rows)) { + const hasSelectedRow = rows.some((row) => DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true'); + rows.forEach((row) => { + row.tabIndex = -1; + }); + + if (hasSelectedRow) { + const selectedNodes = rows.filter((node) => DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true'); + selectedNodes[0].tabIndex = 0; + + return; + } + + rows[0].tabIndex = 0; + } + } + + expand(event: Event) { + this.tt.toggleRowIndex = DomHandler.index(this.el.nativeElement); + this.rowNode.node['expanded'] = true; + + this.tt.updateSerializedValue(); + this.tt.tableService.onUIUpdate(this.tt.value); + this.rowNode.node['children'] ? this.restoreFocus(this.tt.toggleRowIndex + 1) : this.restoreFocus(); + + this.tt.onNodeExpand.emit({ + originalEvent: event, + node: this.rowNode.node + }); + } + + collapse(event: Event) { + this.rowNode.node['expanded'] = false; + + this.tt.updateSerializedValue(); + this.tt.tableService.onUIUpdate(this.tt.value); + + this.tt.onNodeCollapse.emit({ originalEvent: event, node: this.rowNode.node }); + } + + focusRowChange(firstFocusableRow, currentFocusedRow, lastVisibleDescendant?) { + firstFocusableRow.tabIndex = '-1'; + currentFocusedRow.tabIndex = '0'; + + DomHandler.focus(currentFocusedRow); + } + + restoreFocus(index?) { this.zone.runOutsideAngular(() => { setTimeout(() => { - let row = DomHandler.findSingle(this.tt.containerViewChild?.nativeElement, '.p-treetable-tbody').children[this.tt.toggleRowIndex]; + const container = this.tt.containerViewChild?.nativeElement; + const row = DomHandler.findSingle(container, '.p-treetable-tbody').children[index || this.tt.toggleRowIndex]; + const rows = [...DomHandler.find(container, 'tr')]; + + rows && + rows.forEach((r) => { + if (!row.isSameNode(r)) { + r.tabIndex = -1; + } + }); + if (row) { + row.tabIndex = 0; row.focus(); } }, 25); @@ -3371,10 +3507,12 @@ export class TTRow { pRipple [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'" [style.marginLeft]="rowNode.level * 16 + 'px'" + [attr.data-pc-section]="'rowtoggler'" + [attr.data-pc-group-section]="'rowactionbutton'" > - - + +