fix: checkbox accessibility

siemens · Dec 17, 2024 · 1bca9d5 · 1bca9d5
1 parent b16e6a3
commit 1bca9d5
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 18 deletions.
diff --git 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
@@ -42,6 +42,7 @@ import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
               type="checkbox"
               [disabled]="disable$ | async"
               [checked]="isSelected"
+              [attr.aria-label]="rowCheckboxAriaLabel"
               (click)="onCheckboxChange($event)"
             />
           </label>
@@ -221,6 +222,8 @@ export class DataTableBodyCellComponent<TRow extends { level?: number } = any>
 
   @Input() ghostLoadingIndicator = false;
 
+  @Input() rowCheckboxAriaLabel?: string;
+
   @Output() activate: EventEmitter<ActivateEvent<TRow>> = new EventEmitter();
 
   @Output() treeAction: EventEmitter<any> = 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
@@ -20,6 +20,12 @@ export class DatatableGroupHeaderDirective<TRow = any> {
   @Input('template')
   _templateInput: TemplateRef<GroupContext<TRow>>;
 
+  /**
+   * aria label text for group header checkbox
+   * required for accessibility
+   */
+  @Input() headerCheckboxAriaLabel = 'Select row group';
+
   @ContentChild(DatatableGroupHeaderTemplateDirective, { read: TemplateRef, static: true })
   _templateQuery: TemplateRef<GroupContext<TRow>>;
 

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
@@ -45,6 +45,7 @@ import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive'
                 <input
                   #select
                   type="checkbox"
+                  [attr.aria-label]="groupHeader.headerCheckboxAriaLabel"
                   [checked]="selectedGroupRows().length === group().value.length"
                   (change)="onCheckboxChange(select.checked)"
                 />

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
@@ -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<TRow = any> implements DoCheck, OnChanges
   @Input() treeStatus?: TreeStatus = 'collapsed';
   @Input() ghostLoadingIndicator = false;
   @Input() verticalScrollVisible = false;
+  @Input() rowCheckboxAriaLabel?: string;
 
   @Input() disable$: BehaviorSubject<boolean>;
   @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
@@ -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<TRow extends { treeStatus?: TreeStatus } = a
   }
 
   @Input() verticalScrollVisible = false;
+  @Input() rowCheckboxAriaLabel?: string;
 
   @Output() scroll: EventEmitter<ScrollEvent> = new EventEmitter();
   @Output() page: EventEmitter<number> = new EventEmitter();

diff --git 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
@@ -481,6 +481,18 @@ export class DatatableComponent<TRow = any>
    */
   @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
@@ -36,7 +36,12 @@ import { NgTemplateOutlet } from '@angular/common';
       }
       @if (isCheckboxable) {
         <label class="datatable-checkbox">
-          <input type="checkbox" [checked]="allRowsSelected" (change)="select.emit()" />
+          <input
+            type="checkbox"
+            [attr.aria-label]="headerCheckboxAriaLabel"
+            [checked]="allRowsSelected"
+            (change)="select.emit()"
+          />
         </label>
       }
       @if (column.headerTemplate) {
@@ -74,6 +79,7 @@ export class DataTableHeaderCellComponent implements OnInit {
   @Input() targetMarkerTemplate: TemplateRef<any>;
   @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
@@ -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;