diff --git a/playwright/e2e/row-group.spec.ts b/playwright/e2e/row-group.spec.ts index b1aba11b1..3c64363ed 100644 --- a/playwright/e2e/row-group.spec.ts +++ b/playwright/e2e/row-group.spec.ts @@ -12,11 +12,6 @@ test.describe('row grouping', () => { { id: 'aria-required-children', enabled: false - }, - // disable label required with forms elements - { - id: 'label', - enabled: false } ]); @@ -29,10 +24,6 @@ test.describe('row grouping', () => { { id: 'aria-required-children', enabled: false - }, - { - id: 'label', - enabled: false } ]); }); @@ -48,10 +39,6 @@ test.describe('row grouping', () => { { id: 'aria-required-children', enabled: false - }, - { - id: 'label', - enabled: false } ]); groupHeader.click(); @@ -60,10 +47,6 @@ test.describe('row grouping', () => { { id: 'aria-required-children', enabled: false - }, - { - id: 'label', - enabled: false } ]); }); diff --git a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts b/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts index fe7cfb605..40da4f607 100644 --- a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts @@ -42,6 +42,7 @@ import { AsyncPipe, NgTemplateOutlet } from '@angular/common'; type="checkbox" [disabled]="disable$ | async" [checked]="isSelected" + [attr.aria-label]="rowCheckboxAriaLabel" (click)="onCheckboxChange($event)" /> @@ -221,6 +222,8 @@ export class DataTableBodyCellComponent @Input() ghostLoadingIndicator = false; + @Input() rowCheckboxAriaLabel?: string; + @Output() activate: EventEmitter> = new EventEmitter(); @Output() treeAction: EventEmitter = new EventEmitter(); diff --git a/projects/ngx-datatable/src/lib/components/body/body-group-header.directive.ts b/projects/ngx-datatable/src/lib/components/body/body-group-header.directive.ts index 1fb6ce5e4..77931e3fa 100644 --- a/projects/ngx-datatable/src/lib/components/body/body-group-header.directive.ts +++ b/projects/ngx-datatable/src/lib/components/body/body-group-header.directive.ts @@ -20,6 +20,12 @@ export class DatatableGroupHeaderDirective { @Input('template') _templateInput: TemplateRef>; + /** + * aria label text for group header checkbox + * required for accessibility + */ + @Input() headerCheckboxAriaLabel = 'Select row group'; + @ContentChild(DatatableGroupHeaderTemplateDirective, { read: TemplateRef, static: true }) _templateQuery: TemplateRef>; diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts index 91fff1ee5..ca5a82e18 100644 --- a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts @@ -45,6 +45,7 @@ import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive' diff --git a/projects/ngx-datatable/src/lib/components/body/body-row.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row.component.ts index 46d6eaa7b..4a4b4753b 100644 --- a/projects/ngx-datatable/src/lib/components/body/body-row.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body-row.component.ts @@ -50,6 +50,7 @@ import { DataTableBodyCellComponent } from './body-cell.component'; [disable$]="disable$" [treeStatus]="treeStatus" [ghostLoadingIndicator]="ghostLoadingIndicator" + [rowCheckboxAriaLabel]="rowCheckboxAriaLabel" (activate)="onActivate($event, ii)" (treeAction)="onTreeAction()" > @@ -97,6 +98,7 @@ export class DataTableBodyRowComponent implements DoCheck, OnChanges @Input() treeStatus?: TreeStatus = 'collapsed'; @Input() ghostLoadingIndicator = false; @Input() verticalScrollVisible = false; + @Input() rowCheckboxAriaLabel?: string; @Input() disable$: BehaviorSubject; @Input() diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts index aa6ef90a1..f1c2277de 100644 --- a/projects/ngx-datatable/src/lib/components/body/body.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body.component.ts @@ -142,6 +142,7 @@ import { ProgressBarComponent } from './progress-bar.component'; [ghostLoadingIndicator]="ghostLoadingIndicator" [draggable]="rowDraggable" [verticalScrollVisible]="verticalScrollVisible" + [rowCheckboxAriaLabel]="rowCheckboxAriaLabel" (treeAction)="onTreeAction(group)" (activate)="selector.onActivate($event, indexes().first + i)" (drop)="drop($event, group, rowElement)" @@ -176,6 +177,7 @@ import { ProgressBarComponent } from './progress-bar.component'; [ghostLoadingIndicator]="ghostLoadingIndicator" [draggable]="rowDraggable" [verticalScrollVisible]="verticalScrollVisible" + [rowCheckboxAriaLabel]="rowCheckboxAriaLabel" (treeAction)="onTreeAction(group)" (activate)="selector.onActivate($event, indexes().first + i)" (drop)="drop($event, group, rowElement)" @@ -210,6 +212,7 @@ import { ProgressBarComponent } from './progress-bar.component'; [ghostLoadingIndicator]="ghostLoadingIndicator" [draggable]="rowDraggable" [verticalScrollVisible]="verticalScrollVisible" + [rowCheckboxAriaLabel]="rowCheckboxAriaLabel" (activate)="selector.onActivate($event, i)" (drop)="drop($event, row, rowElement)" (dragover)="dragOver($event, row)" @@ -393,6 +396,7 @@ export class DataTableBodyComponent = new EventEmitter(); @Output() page: EventEmitter = new EventEmitter(); diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.html b/projects/ngx-datatable/src/lib/components/datatable.component.html index 96eb260e7..55d90654f 100644 --- a/projects/ngx-datatable/src/lib/components/datatable.component.html +++ b/projects/ngx-datatable/src/lib/components/datatable.component.html @@ -20,6 +20,7 @@ [selectionType]="selectionType" [verticalScrollVisible]="verticalScrollVisible" [enableClearingSortState]="enableClearingSortState" + [headerCheckboxAriaLabel]="headerCheckboxAriaLabel" (sort)="onColumnSort($event)" (resize)="onColumnResize($event)" (resizing)="onColumnResizing($event)" @@ -63,6 +64,7 @@ [summaryHeight]="summaryHeight" [summaryPosition]="summaryPosition" [verticalScrollVisible]="verticalScrollVisible" + [rowCheckboxAriaLabel]="rowCheckboxAriaLabel" (page)="onBodyPage($event)" (activate)="activate.emit($event)" (rowContextmenu)="onRowContextmenu($event)" diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts index 8b4097603..9fd81b613 100644 --- a/projects/ngx-datatable/src/lib/components/datatable.component.ts +++ b/projects/ngx-datatable/src/lib/components/datatable.component.ts @@ -481,6 +481,18 @@ export class DatatableComponent */ @Input({ transform: booleanAttribute }) enableClearingSortState = false; + /** + * aria label text for header checkbox + * required for accessibility + */ + @Input() headerCheckboxAriaLabel = 'Select all rows'; + + /** + * aria label text for row selection checkbox + * required for accessibility + */ + @Input() rowCheckboxAriaLabel = 'Select row'; + /** * Body was scrolled typically in a `scrollbarV:true` scenario. */ diff --git a/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts b/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts index 9be783394..5983899a2 100644 --- a/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts +++ b/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts @@ -36,7 +36,12 @@ import { NgTemplateOutlet } from '@angular/common'; } @if (isCheckboxable) { } @if (column.headerTemplate) { @@ -74,6 +79,7 @@ export class DataTableHeaderCellComponent implements OnInit { @Input() targetMarkerTemplate: TemplateRef; @Input() targetMarkerContext: any; @Input() enableClearingSortState = false; + @Input() headerCheckboxAriaLabel?: string; _allRowsSelected: boolean; diff --git a/projects/ngx-datatable/src/lib/components/header/header.component.ts b/projects/ngx-datatable/src/lib/components/header/header.component.ts index 4692544dc..374feb2fe 100644 --- a/projects/ngx-datatable/src/lib/components/header/header.component.ts +++ b/projects/ngx-datatable/src/lib/components/header/header.component.ts @@ -80,6 +80,7 @@ import { OrderableDirective } from '../../directives/orderable.directive'; [sortUnsetIcon]="sortUnsetIcon" [allRowsSelected]="allRowsSelected" [enableClearingSortState]="enableClearingSortState" + [headerCheckboxAriaLabel]="headerCheckboxAriaLabel" (sort)="onSort($event)" (select)="select.emit($event)" (columnContextmenu)="columnContextmenu.emit($event)" @@ -137,6 +138,7 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges { @Input() selectionType: SelectionType; @Input() reorderable: boolean; @Input() verticalScrollVisible = false; + @Input() headerCheckboxAriaLabel?: string; dragEventTarget?: MouseEvent;