feat: search widget accessibility (#149)

feat: search widget accessibility

libs/portal-integration-angular/assets/i18n/de.json

@@ -1,7 +1,7 @@
 {
   "OCX_CUSTOM_GROUP_COLUMN_SELECTOR": {
     "DROPDOWN_LABEL": "Spalten",
-    "OPEN_BUTTON_TITLE": "Dialog zur Auswahl einer benutzerdefinierten Gruppe öffnen",
+    "OPEN_BUTTON_DETAIL": "Dialog zur Auswahl einer benutzerdefinierten Gruppe öffnen",
     "ACTIVE_COLUMNS_LABEL": "Aktive Spalten",
     "INACTIVE_COLUMNS_LABEL": "Inaktive Spalten",
     "SAVE_BUTTON_LABEL": "Speichern",
@@ -15,6 +15,17 @@
       "NO": "Nein",
       "LEFT": "Links",
       "RIGHT": "Rechts"
+    },
+    "ARIA_LABELS": {
+      "UP": "Spalte nach oben verschieben",
+      "TOP": "Spalte an den Anfang verschieben",
+      "DOWN": "Spalte nach unten verschieben",
+      "BOTTOM": "Spalte ans Ende verschieben",
+      "RIGHT": "Spalte als inaktiv setzen",
+      "ALL_RIGHT": "Alle Spalten als inaktiv setzen",
+      "LEFT": "Spalte als aktiv setzen",
+      "ALL_LEFT": "Alle Spalten als aktiv setzen",
+      "CLOSE": "Dialog schließen"
     }
   },
   "OCX_SEARCH_CONFIG": {
@@ -28,16 +39,18 @@
       "TITLE": "Sortieren nach"
     },
     "TOGGLE_BUTTON": {
-      "ASCENDING_TITLE": "Auftseigend",
+      "ASCENDING_TITLE": "Aufsteigend",
       "DESCENDING_TITLE": "Absteigend",
       "DEFAULT_TITLE": "Standard"
-    }
+    },
+    "SORTING_BUTTON_ARIA_LABEL": "{{direction}} sortieren"
   },
   "OCX_DATA_TABLE": {
     "EMPTY_RESULT": "Keine Daten gefunden.",
     "EMPTY_FILTER_MESSAGE": "Keine Filter gefunden.",
     "ACTIONS_COLUMN_NAME": "Aktionen",
     "FILTER_TITLE": "Filter",
+    "FILTER_ARIA_LABEL": "Filter {{column}}",
     "EDITED": "Bearbeitet",
     "SHOWING": "{{first}} - {{last}} von {{totalRecords}}",
     "SHOWING_WITH_TOTAL_ON_SERVER": "{{first}} - {{last}} von {{totalRecords}} ({{totalRecordsOnServer}})",
@@ -46,6 +59,12 @@
       "VIEW": "Anzeigen",
       "EDIT": "Bearbeiten",
       "DELETE": "Löschen"
+    },
+    "TOGGLE_BUTTON": {
+      "ASCENDING_TITLE": "Aufsteigend",
+      "DESCENDING_TITLE": "Absteigend",
+      "DEFAULT_TITLE": "Standard",
+      "ARIA_LABEL": "{{column}} {{direction}} sortieren"
     }
   },
   "OCX_DATA_LIST_GRID": {
@@ -54,7 +73,8 @@
       "VIEW": "Anzeigen",
       "EDIT": "Bearbeiten",
       "DELETE": "Löschen"
-    }
+    },
+    "MORE_ACTIONS": "Weitere Aktionen"
   },
   "OCX_DATA_LAYOUT_SELECTION": {
     "LAYOUT": {
@@ -91,12 +111,12 @@
       "TEXT": "Suchen",
       "DETAIL": "Suche starten"
     },
-    "RESET_BUTTON_TEXT": "Zurücksetzen",
-    "SEARCH_BUTTON_TEXT": "Suchen",
     "EXPORT": "Alle Ereignisse exportieren"
   },
   "OCX_PAGE_HEADER": {
-    "MORE_ACTIONS": "Weitere Aktionen"
+    "MORE_ACTIONS": "Weitere Aktionen",
+    "HOME_DEFAULT_ARIA_LABEL": "Zur Startseite navigieren",
+    "HOME_ARIA_LABEL": "Zu {{page}} navigieren"
   },
   "OCX_HEADER": {
     "MENU_TOGGLE": "Menü"

libs/portal-integration-angular/assets/i18n/en.json

@@ -1,7 +1,7 @@
 {
   "OCX_CUSTOM_GROUP_COLUMN_SELECTOR": {
     "DROPDOWN_LABEL": "Columns",
-    "OPEN_BUTTON_TITLE": "Open custom group selection dialog",
+    "OPEN_BUTTON_DETAIL": "Open custom group selection dialog",
     "ACTIVE_COLUMNS_LABEL": "Active columns",
     "INACTIVE_COLUMNS_LABEL": "Inactive columns",
     "SAVE_BUTTON_LABEL": "Save",
@@ -15,6 +15,17 @@
       "NO": "No",
       "LEFT": "Left",
       "RIGHT": "Right"
+    },
+    "ARIA_LABELS": {
+      "UP": "Move column up",
+      "TOP": "Move column to the top",
+      "DOWN": "Move column down",
+      "BOTTOM": "Move column to the bottom",
+      "RIGHT": "Set column as inactive",
+      "ALL_RIGHT": "Set all columns as inactive",
+      "LEFT": "Set column as active",
+      "ALL_LEFT": "Set all columns as active",
+      "CLOSE": "Close dialog"
     }
   },
   "OCX_SEARCH_CONFIG": {
@@ -31,13 +42,15 @@
       "ASCENDING_TITLE": "Ascending",
       "DESCENDING_TITLE": "Descending",
       "DEFAULT_TITLE": "Default"
-    }
+    },
+    "SORTING_BUTTON_ARIA_LABEL": "Toggle sorting direction to {{direction}}"
   },
   "OCX_DATA_TABLE": {
     "EMPTY_RESULT": "No data found.",
     "EMPTY_FILTER_MESSAGE": "No filters found.",
     "ACTIONS_COLUMN_NAME": "Actions",
     "FILTER_TITLE": "Filter",
+    "FILTER_ARIA_LABEL": "Filter {{column}}",
     "EDITED": "Edited",
     "SHOWING": "{{first}} - {{last}} of {{totalRecords}}",
     "SHOWING_WITH_TOTAL_ON_SERVER": "{{first}} - {{last}} of {{totalRecords}} ({{totalRecordsOnServer}})",
@@ -46,15 +59,22 @@
       "VIEW": "View",
       "EDIT": "Edit",
       "DELETE": "Delete"
-    } 
+    },
+    "TOGGLE_BUTTON": {
+      "ASCENDING_TITLE": "Ascending",
+      "DESCENDING_TITLE": "Descending",
+      "DEFAULT_TITLE": "Default",
+      "ARIA_LABEL": "Toggle {{column}} sorting direction to {{direction}}"
+    }
   },
   "OCX_DATA_LIST_GRID": {
     "EMPTY_RESULT": "No data found.",
     "MENU": {
       "VIEW": "View",
       "EDIT": "Edit",
       "DELETE": "Delete"
-    }
+    },
+    "MORE_ACTIONS": "More actions"
   },
   "OCX_DATA_LAYOUT_SELECTION": {
     "LAYOUT": {
@@ -94,7 +114,9 @@
     "EXPORT": "Export all events"
   },
   "OCX_PAGE_HEADER": {
-    "MORE_ACTIONS": "More actions"
+    "MORE_ACTIONS": "More actions",
+    "HOME_DEFAULT_ARIA_LABEL": "Go to home page",
+    "HOME_ARIA_LABEL": "Go to {{page}} home page"
   },
   "OCX_HEADER": {
     "MENU_TOGGLE": "Menu"

libs/portal-integration-angular/src/lib/core/components/custom-group-column-selector/custom-group-column-selector.component.html

@@ -2,12 +2,13 @@
   id="customGroupColumnSelectorButton"
   type="button"
   (click)="onOpenCustomGroupColumnSelectionDialogClick()"
-  [title]="openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_TITLE' | translate)"
+  [title]="openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)"
   icon="pi pi-cog"
   styleClass="p-button"
+  [ariaLabel]="openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)"
 ></p-button>
 
-<p-dialog header="Header" [(visible)]="visible" [style]="{ width: '70%' }" [modal]="true">
+<p-dialog header="Header" [(visible)]="visible" [style]="{ width: '70%' }" [modal]="true" [closeAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)">
   <ng-template pTemplate="header">
     <span class="text-xl font-bold"
       >{{ dialogTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate) }}</span
@@ -23,6 +24,14 @@
     [responsive]="false"
     [sourceStyle]="{ height: '300px' }"
     [targetStyle]="{ height: '300px' }"
+    [upButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)"
+    [topButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)"
+    [downButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)"
+    [bottomButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)"
+    [rightButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)"
+    [allRightButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)"
+    [leftButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)"
+    [allLeftButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)"
   >
     <ng-template let-item pTemplate="item">
       <div>{{ item.nameKey | translate }}</div>

libs/portal-integration-angular/src/lib/core/components/data-list-grid-sorting/data-list-grid-sorting.component.html

@@ -19,5 +19,6 @@
     styleClass="p-button-outlined"
     (onClick)="sortDirectionChanged()"
     [title]="(sortIconTitle() | translate)"
+    [ariaLabel]="('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})"
   ></p-button>
 </div>

libs/portal-integration-angular/src/lib/core/components/data-list-grid-sorting/data-list-grid-sorting.component.ts

@@ -45,11 +45,15 @@ export class DataListGridSortingComponent implements OnInit {
     this.sortChange.emit(event.value.columnId)
   }
   sortDirectionChanged(): void {
-    const newSortDirection = this.sortStates[(this.sortStates.indexOf(this.sortDirection) + 1) % this.sortStates.length]
+    const newSortDirection = this.nextSortDirection()
     this._sortDirection$.next(newSortDirection)
     this.sortDirectionChange.emit(newSortDirection)
   }
 
+  nextSortDirection() {
+    return this.sortStates[(this.sortStates.indexOf(this.sortDirection) + 1) % this.sortStates.length]
+  }
+
   sortIcon() {
     switch (this.sortDirection) {
       case DataSortDirection.ASCENDING:
@@ -62,7 +66,11 @@ export class DataListGridSortingComponent implements OnInit {
   }
 
   sortIconTitle() {
-    switch (this.sortDirection) {
+    return this.sortDirectionToTitle(this.sortDirection)
+  }
+
+  sortDirectionToTitle(sortDirection: DataSortDirection) {
+    switch (sortDirection) {
       case DataSortDirection.ASCENDING:
         return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.ASCENDING_TITLE'
       case DataSortDirection.DESCENDING:

libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.html

@@ -58,6 +58,7 @@
             pButton
             (click)="setSelectedItem(item); menu.toggle($event)"
             icon="pi pi-ellipsis-v"
+            [ariaLabel]="'OCX_DATA_LIST_GRID.MORE_ACTIONS' | translate"
             class="more-actions-menu-button menu-btn"
           ></button>
         </div>
@@ -81,11 +82,10 @@
           <div class="flex flex-column md:flex-row md:justify-content-between">
             <ng-container *ngIf="viewItemObserved">
               <button
-                id="viewListItemButton"
                 type="button"
                 icon="pi pi-eye"
                 pButton
-                class="p-button-rounded p-button-text mb-1 mr-2"
+                class="p-button-rounded p-button-text mb-1 mr-2 viewListItemButton"
                 title="{{ (viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate }}"
                 [attr.aria-label]="(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate"
                 (click)="onViewRow(item)"
@@ -94,9 +94,8 @@
             </ng-container>
             <ng-container *ngIf="editItemObserved">
               <button
-                id="editListItemButton"
                 type="button"
-                class="p-button-rounded p-button-text mb-1 mr-2"
+                class="p-button-rounded p-button-text mb-1 mr-2 editListItemButton"
                 icon="pi pi-pencil"
                 pButton
                 title="{{ (editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate }}"
@@ -107,10 +106,9 @@
             </ng-container>
             <ng-container *ngIf="deleteItemObserved">
               <button
-                id="deleteListItemButton"
                 type="button"
                 icon="pi pi-trash"
-                class="p-button-rounded p-button-text p-button-danger mb-1 mr-2"
+                class="p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton"
                 pButton
                 title="{{ (deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate }}"
                 [attr.aria-label]="(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate"

libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.html

@@ -11,10 +11,9 @@
       <div class="icon-button-row-wrapper">
         <ng-container *ngIf="viewTableRowObserved">
           <button
-            id="viewTableRowButton"
             *ocxIfPermission="viewPermission"
             pButton
-            class="p-button-rounded p-button-text"
+            class="p-button-rounded p-button-text viewTableRowButton"
             title="{{ 'OCX_DATA_TABLE.ACTIONS.VIEW' | translate }}"
             [attr.aria-label]="'OCX_DATA_TABLE.ACTIONS.VIEW' | translate"
             icon="pi pi-eye"
@@ -23,10 +22,9 @@
         </ng-container>
         <ng-container *ngIf="editTableRowObserved">
           <button
-            id="editTableRowButton"
             *ocxIfPermission="editPermission"
             pButton
-            class="p-button-rounded p-button-text"
+            class="p-button-rounded p-button-text editTableRowButton"
             title="{{ 'OCX_DATA_TABLE.ACTIONS.EDIT' | translate }}"
             [attr.aria-label]="'OCX_DATA_TABLE.ACTIONS.EDIT' | translate"
             icon="pi pi-pencil"
@@ -35,10 +33,9 @@
         </ng-container>
         <ng-container *ngIf="deleteTableRowObserved">
           <button
-            id="deleteTableRowButton"
             *ocxIfPermission="deletePermission"
             pButton
-            class="p-button-rounded p-button-text p-button-danger"
+            class="p-button-rounded p-button-text p-button-danger deleteTableRowButton"
             title="{{ 'OCX_DATA_TABLE.ACTIONS.DELETE' | translate }}"
             [attr.aria-label]="'OCX_DATA_TABLE.ACTIONS.DELETE' | translate"
             icon="pi pi-trash"
@@ -106,20 +103,20 @@
       <ng-container *ngFor="let column of columns">
         <th *ngIf="column.sortable || column.filterable; else simpleHeader" scope="col">
           <div class="table-header-wrapper">
-            <span>{{ column.nameKey | translate }}</span>
+            <span id="{{column.id}}-header-name">{{ column.nameKey | translate }}</span>
             <span class="icon-button-header-wrapper">
               <button
-                id="sortButton"
                 *ngIf="column.sortable"
-                class="pi"
+                class="pi sortButton"
                 [class.pi-sort-alt-slash]="(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn"
                 [class.pi-sort-amount-up]="column?.id === sortColumn && sortDirection === 'ASCENDING'"
                 [class.pi-sort-amount-down]="column?.id === sortColumn && sortDirection === 'DESCENDING'"
                 (click)="onSortColumnClick(column.id)"
-                [title]="(sortIconTitle() | translate)"
+                [title]="(sortIconTitle(column.id) | translate)"
+                [attr.aria-label]="('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})"
               ></button>
               <p-multiSelect
-                id="filterMultiSelect"
+                class="filterMultiSelect"
                 *ngIf="column.filterable"
                 [options]="(currentFilterOptions$ | async) || []"
                 [ngModel]="(currentSelectedFilters$ | async) || []"
@@ -132,6 +129,7 @@
                 appendTo="body"
                 (onClick)="onFilterClick(column)"
                 [title]="'OCX_DATA_TABLE.FILTER_TITLE' | translate"
+                aria-label="{{('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})}}"
               >
                 <ng-template pTemplate="selectedItems" let-value>
                   <div