feat: increased accessibility of data table

onecx · Sep 24, 2024 · f6f41e6 · f6f41e6
1 parent ff4c5a2
commit f6f41e6
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 19 deletions.
diff --git a/libs/angular-accelerator/assets/i18n/de.json b/libs/angular-accelerator/assets/i18n/de.json
@@ -49,6 +49,7 @@
       "EMPTY_RESULT": "Keine Daten gefunden.",
       "EMPTY_FILTER_MESSAGE": "Keine Filter gefunden.",
       "ACTIONS_COLUMN_NAME": "Aktionen",
+      "COLUMN_FILTER_ARIA_LABEL": "Spaltenfilter",
       "FILTER_TITLE": "Filter",
       "FILTER_ARIA_LABEL": "Filter {{column}}",
       "EDITED": "Bearbeitet",
@@ -66,7 +67,9 @@
         "DESCENDING_TITLE": "Absteigend",
         "DEFAULT_TITLE": "Standard",
         "ARIA_LABEL": "{{column}} {{direction}} sortieren"
-      }
+      },
+      "SELECT_ALL_ARIA_LABEL": "Selektiere alle Zeilen der Tabelle",
+      "SELECT_ARIA_LABEL": "Selektiere die Tabellenspalte mit der ID {{key}}"
     },
     "OCX_DATA_LIST_GRID": {
       "EMPTY_RESULT": "Keine Daten gefunden.",
@@ -106,10 +109,12 @@
       "HEADER": "Suche",
       "RESET_BUTTON": {
         "TEXT": "Zurücksetzen",
+        "ARIA_LABEL": "Suchkriterien zurücksetzen",
         "DETAIL": "Suchkriterien zurücksetzen"
       },
       "SEARCH_BUTTON": {
         "TEXT": "Suchen",
+        "ARIA_LABEL": "Suche starten",
         "DETAIL": "Suche starten"
       },
       "EXPORT": "Alle Ereignisse exportieren"

diff --git a/libs/angular-accelerator/assets/i18n/en.json b/libs/angular-accelerator/assets/i18n/en.json
@@ -49,6 +49,7 @@
       "EMPTY_RESULT": "No data found.",
       "EMPTY_FILTER_MESSAGE": "No filters found.",
       "ACTIONS_COLUMN_NAME": "Actions",
+      "COLUMN_FILTER_ARIA_LABEL": "Column filter",
       "FILTER_TITLE": "Filter",
       "FILTER_ARIA_LABEL": "Filter {{column}}",
       "EDITED": "Edited",
@@ -66,7 +67,9 @@
         "DESCENDING_TITLE": "Descending",
         "DEFAULT_TITLE": "Default",
         "ARIA_LABEL": "Toggle {{column}} sorting direction to {{direction}}"
-      }
+      },
+      "SELECT_ALL_ARIA_LABEL": "Select all table rows",
+      "SELECT_ARIA_LABEL": "Select table row with id {{key}}"
     },
     "OCX_DATA_LIST_GRID": {
       "EMPTY_RESULT": "No data found.",
@@ -106,10 +109,12 @@
       "HEADER": "Search",
       "RESET_BUTTON": {
         "TEXT": "Reset",
+        "ARIA_LABEL": "Reset search criteria",
         "DETAIL": "Reset search criteria"
       },
       "SEARCH_BUTTON": {
         "TEXT": "Search",
+        "ARIA_LABEL": "Start search",
         "DETAIL": "Start search"
       },
       "EXPORT": "Export all events"

diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
@@ -124,7 +124,10 @@
     <ng-template pTemplate="header">
       <tr>
         <th style="width: 4rem" scope="col" *ngIf="selectionChangedObserved">
-          <p-tableHeaderCheckbox *ngIf="allowSelectAll"></p-tableHeaderCheckbox>
+          <p-tableHeaderCheckbox
+            *ngIf="allowSelectAll"
+            ariaLabel="{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}"
+          ></p-tableHeaderCheckbox>
         </th>
         <ng-container *ngIf="actionColumnPosition === 'left';">
           <ng-container *ngTemplateOutlet="actionColumnHeader"></ng-container>
@@ -156,9 +159,10 @@
                   (onChange)="onFilterChange(column, $event)"
                   placeholder="Icon"
                   appendTo="body"
-                  (onClick)="onFilterClick(column)"
+                  (onFocus)="onFilterChosen(column)"
                   [title]="'OCX_DATA_TABLE.FILTER_TITLE' | translate"
-                  [attr.aria-label]="('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})"
+                  [ariaLabel]="'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate"
+                  [ariaFilterLabel]="('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})"
                 >
                   <ng-template pTemplate="selectedItems" let-value>
                     <div
@@ -199,11 +203,13 @@
             [(ngModel)]="checked"
             [binary]="true"
             [disabled]="true"
+            [ariaLabel]="'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}"
           ></p-checkbox>
           <ng-template #defaultCheckbox>
             <p-tableCheckbox
               [value]="rowObject"
               [disabled]="!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)"
+              [ariaLabel]="'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}"
             ></p-tableCheckbox>
           </ng-template>
         </td>

diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts
@@ -38,7 +38,16 @@ const DataTableComponentSBConfig: Meta<DataTableComponent> = {
     }),
     moduleMetadata({
       declarations: [DataTableComponent, IfPermissionDirective],
-      imports: [TableModule, ButtonModule, MultiSelectModule, StorybookTranslateModule, MockAuthModule, MenuModule, CheckboxModule, FormsModule],
+      imports: [
+        TableModule,
+        ButtonModule,
+        MultiSelectModule,
+        StorybookTranslateModule,
+        MockAuthModule,
+        MenuModule,
+        CheckboxModule,
+        FormsModule,
+      ],
     }),
   ],
 }
@@ -70,19 +79,21 @@ const defaultComponentArgs: DataTableInputTypes = {
       columnType: ColumnType.NUMBER,
       nameKey: 'Amount',
       sortable: true,
+      filterable: true,
     },
     {
       id: 'available',
       columnType: ColumnType.STRING,
       nameKey: 'Available',
       sortable: false,
+      filterable: true,
     },
     {
       id: 'expiration',
       columnType: ColumnType.DATE,
       nameKey: 'Expiration Date',
       sortable: true,
-    }
+    },
   ],
   rows: [
     {
@@ -151,7 +162,7 @@ export const WithRowSelectionAndDisabledDefaultSelection = {
   args: {
     ...defaultComponentArgs,
     selectedRows: [1],
-    selectionEnabledField: 'available'
+    selectionEnabledField: 'available',
   },
 }
 
@@ -298,9 +309,9 @@ export const WithAdditionalActions = {
         id: '1',
         labelKey: 'Additional 1',
         icon: 'pi pi-plus',
-        permission: 'TEST_MGMT#TEST_VIEW'
-      }
-    ]
+        permission: 'TEST_MGMT#TEST_VIEW',
+      },
+    ],
   },
 }
 
@@ -321,8 +332,8 @@ export const WithConditionallyEnabledAdditionalActions = {
         icon: 'pi pi-plus',
         permission: 'TEST_MGMT#TEST_VIEW',
         actionEnabledField: 'available',
-      }
-    ]
+      },
+    ],
   },
 }
 
@@ -343,8 +354,8 @@ export const WithConditionallyVisibleAdditionalActions = {
         icon: 'pi pi-plus',
         permission: 'TEST_MGMT#TEST_VIEW',
         actionVisibleField: 'available',
-      }
-    ]
+      },
+    ],
   },
 }
 
@@ -380,7 +391,7 @@ export const WithAdditionalOverflowActions = {
         showAsOverflow: true,
         actionEnabledField: 'available',
       },
-    ]
+    ],
   },
 }
 
@@ -412,15 +423,15 @@ export const WithOnlyOverflowActions = {
         showAsOverflow: true,
         actionEnabledField: 'available',
       },
-    ]
+    ],
   },
 }
 
 export const WithPageSizes = {
   render: Template,
   args: {
     ...defaultComponentArgs,
-    pageSizes: [2, 15, 25]
+    pageSizes: [2, 15, 25],
   },
 }
 

diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts
@@ -563,7 +563,7 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
     this.editTableRow.emit(selectedTableRow)
   }
 
-  onFilterClick(column: DataTableColumn) {
+  onFilterChosen(column: DataTableColumn) {
     this.currentFilterColumn$.next(column)
   }