feat(ngx-table): Make the table accessible through the tree-grid pattern

Author: IbenTesara

apps/table-test/src/app/app.component.html

@@ -18,6 +18,7 @@
 		[data]="data | async"
 		[columns]="columns"
 		[selectable]="true"
+		[currentSorting]="currentSort"
 		selectableKey="id"
 		[resetFormOnNewData]="false"
 		(rowClicked)="rowEmitted($event)"
@@ -38,14 +39,26 @@
 		</ng-template>
 		}
 
-		<ngx-table-cell column="firstName" [cypressDataTags]="{ cell: 'cell-tag' }">
+		<ngx-table-cell
+			column="firstName"
+			[cypressDataTags]="{ cell: 'cell-tag' }"
+			[sortable]="true"
+			(sort)="sort($event)"
+		>
 			<ng-template #headerTmpl> First name </ng-template>
 		</ngx-table-cell>
 
-		<ngx-currency-table-cell column="amount" currency="EUR">
+		<ngx-currency-table-cell column="amount" currency="EUR" [editable]="true">
 			<ng-template #headerTmpl> Amount </ng-template>
 		</ngx-currency-table-cell>
 
+		<ngx-table-cell column="button">
+			<ng-template #cellTmpl>
+				<button>Button 1</button>
+				<button>Button 2</button>
+			</ng-template>
+		</ngx-table-cell>
+
 		<ng-template #loadingTmpl> Loading </ng-template>
 	</ngx-table>
 

apps/table-test/src/app/app.component.ts

@@ -3,7 +3,7 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { BehaviorSubject } from 'rxjs';
 import { AsyncPipe, JsonPipe } from '@angular/common';
 import { WrapperComponent } from './wrapper/wrapper.component';
-import { NgxCurrencyTableCellComponent, NgxTable } from '@ngx/table';
+import { NgxCurrencyTableCellComponent, NgxTable, NgxTableSortEvent } from '@ngx/table';
 
 @Component({
 	selector: 'app-root',
@@ -21,6 +21,7 @@ import { NgxCurrencyTableCellComponent, NgxTable } from '@ngx/table';
 })
 export class AppComponent {
 	private currentSet = 'dataSet1';
+	public currentSort: NgxTableSortEvent;
 
 	public dataSet1 = [
 		{
@@ -39,6 +40,14 @@ export class AppComponent {
 			hello: 'world',
 			amount: 5000,
 		},
+		{
+			name: 'Hyperdrive',
+			firstName: 'Studio',
+			active: true,
+			id: 'SHD2',
+			hello: 'world',
+			amount: 5000,
+		},
 	];
 
 	public dataSet2 = [
@@ -54,7 +63,7 @@ export class AppComponent {
 
 	public data = new BehaviorSubject(this.dataSet1);
 
-	public readonly columns = ['firstName', 'name', 'amount', 'active'];
+	public readonly columns = ['firstName', 'name', 'button', 'amount', 'active'];
 
 	public showDetail = true;
 
@@ -85,4 +94,8 @@ export class AppComponent {
 	public rowEmitted(data: any) {
 		console.log(data);
 	}
+
+	public sort(event: NgxTableSortEvent) {
+		this.currentSort = event;
+	}
 }

libs/table/README.md

@@ -385,6 +385,10 @@ If you wish to provide a custom class to the row of your tables, you can provide
 
 Cells can also have a default class we want to provide to all cells of that kind. All `ngx-date-table-cell` cells have the `ngx-date-table-cell` class and the same applies for the `ngx-currency-table-cell`.
 
+### Accessibility
+
+`ngx-table` provides a WCAG and ARIA compliant implementation to tables. When a table has a detail row or is selectable, the role of the table switches from `table` to `treegrid`. Because of that, `ngx-table` follows the [WAI ARIA Treegrid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/).
+
 ## Acknowledgements
 
 A big thanks goes out to [Sam Verschueren](https://github.com/SamVerschueren) for his help with the initial implementation of this table. Without his help, this table would not have existed.

libs/table/package.json

@@ -9,7 +9,11 @@
 		"angular cdk",
 		"cdk",
 		"table",
-		"detail row"
+		"detail row",
+    "wai",
+    "aria",
+    "wcag",
+    "treegrid"
 	],
 	"homepage": "https://github.com/studiohyperdrive/ngx-tools/tree/master/libs/table",
 	"author": {

libs/table/src/lib/cell/cell.directive.ts

@@ -8,6 +8,23 @@ import { NgxTableCypressDataTags, NgxTableSortEvent } from '../interfaces';
 	standalone: true,
 })
 export class NgxAbstractTableCellDirective {
+	/**
+	 * The current sortDirection of the cell
+	 */
+	public sortDirection: NgxTableSortDirection | null = null;
+
+	/**
+	 * The templates used to set in the table
+	 */
+	public footerTemplate: TemplateRef<any>;
+	public headerTemplate: TemplateRef<any>;
+	public cellTemplate: TemplateRef<any>;
+
+	/**
+	 * An optional class that can be set for the cell
+	 */
+	public cellClass: string;
+
 	/**
 	 * The name of the column we want this cell to represent
 	 */
@@ -24,24 +41,15 @@ export class NgxAbstractTableCellDirective {
 	 */
 	@Input() public cypressDataTags: NgxTableCypressDataTags;
 
-	@Output() sort = new EventEmitter<NgxTableSortEvent>();
-
 	/**
-	 * The current sortDirection of the cell
+	 * Whether the content of a cell is editable. By default, this is set to false
 	 */
-	public sortDirection: NgxTableSortDirection | null = null;
+	@Input() public editable: boolean = false;
 
 	/**
-	 * The templates used to set in the table
+	 * Emits the sortable event if a column is sortable
 	 */
-	public footerTemplate: TemplateRef<any>;
-	public headerTemplate: TemplateRef<any>;
-	public cellTemplate: TemplateRef<any>;
-
-	/**
-	 * An optional class that can be set for the cell
-	 */
-	public cellClass: string;
+	@Output() sort = new EventEmitter<NgxTableSortEvent>();
 
 	/**
 	 * Handles the sorting click events

libs/table/src/lib/directives/has-focus-action/has-focus.directive.ts

@@ -0,0 +1,39 @@
+import { Directive, HostListener } from '@angular/core';
+
+/**
+ * An abstract directive used as a base to handle focussed base actions
+ */
+@Directive({
+	standalone: true,
+})
+export abstract class NgxHasFocusDirective {
+	/**
+	 * Whether the current element is focussed
+	 */
+	protected hasFocus: boolean = false;
+
+	/**
+	 * Set the hasFocus flag
+	 */
+	@HostListener('focus') setFocus() {
+		this.hasFocus = true;
+	}
+
+	/**
+	 * Remove the hasFocus flag
+	 */
+	@HostListener('blur') removeFocus() {
+		this.hasFocus = false;
+	}
+
+	/**
+	 * Execute an action when the element has focussed
+	 *
+	 * @param action - The provided action
+	 */
+	public handleWhenFocussed(action: () => void): void {
+		if (this.hasFocus) {
+			action();
+		}
+	}
+}

libs/table/src/lib/directives/has-focus-action/index.ts

@@ -0,0 +1 @@
+export * from './has-focus.directive';

libs/table/src/lib/directives/index.ts

@@ -0,0 +1,2 @@
+export * from './has-focus-action';
+export * from './tree-grid';

libs/table/src/lib/directives/tree-grid/index.ts

@@ -0,0 +1,9 @@
+import { NgxTreeGridRowDirective } from './tree-grid-row.directive';
+import { NgxTreeGridCellDirective } from './tree-grid.cell.directive';
+import { NgxTreeGridDirective } from './tree-grid.directive';
+
+export const NgxTreeGrid = [
+	NgxTreeGridDirective,
+	NgxTreeGridRowDirective,
+	NgxTreeGridCellDirective,
+];