feat: interactive data view and its children accessibility (#502)

* feat: data-layout accessibility improvements * feat: interactive data component and children accessibility improvements * feat: support translation keys in custom group column selector * fix: tests * fix: lint * feat: removed tooltip hover
onecx · Sep 27, 2024 · f54c93f · f54c93f
1 parent 3804dd6
commit f54c93f
Show file tree

Hide file tree

Showing 17 changed files with 155 additions and 74 deletions.
diff --git a/libs/angular-accelerator/assets/i18n/de.json b/libs/angular-accelerator/assets/i18n/de.json
@@ -1,11 +1,15 @@
 {
   "OCX_CUSTOM_GROUP_COLUMN_SELECTOR": {
-    "DROPDOWN_LABEL": "Spalten",
+    "ARIA_LABEL": "Spaltengruppe-Selektor",
+    "DROPDOWN_LABEL": "Spaltengruppe",
     "OPEN_BUTTON_DETAIL": "Dialog zur Auswahl einer benutzerdefinierten Gruppe öffnen",
+    "OPEN_BUTTON_ARIA_LABEL": "Dialog zur Auswahl einer benutzerdefinierten Gruppe öffnen",
     "ACTIVE_COLUMNS_LABEL": "Aktive Spalten",
     "INACTIVE_COLUMNS_LABEL": "Inaktive Spalten",
     "SAVE_BUTTON_LABEL": "Speichern",
+    "SAVE_BUTTON_ARIA_LABEL": "Speichern",
     "CANCEL_BUTTON_LABEL": "Abbrechen",
+    "CANCEL_BUTTON_ARIA_LABEL": "Abbrechen",
     "DIALOG_TITLE": "Spalten für benutzerdefinierte Gruppe auswählen",
     "CONFIGURE_ACTION_COLUMN": {
       "TITLE": "Aktionsspalte konfigurieren",
@@ -36,12 +40,12 @@
   "OCX_LIST_GRID_SORT": {
     "DROPDOWN": {
       "PLACEHOLDER": "Sortierung auswählen",
-      "TITLE": "Sortieren nach"
+      "ARIA_LABEL": "Sortieren nach"
     },
     "TOGGLE_BUTTON": {
-      "ASCENDING_TITLE": "Aufsteigend",
-      "DESCENDING_TITLE": "Absteigend",
-      "DEFAULT_TITLE": "Standard"
+      "ASCENDING_TOOLTIP": "Aufsteigend",
+      "DESCENDING_TOOLTIP": "Absteigend",
+      "DEFAULT_TOOLTIP": "Standard"
     },
     "SORTING_BUTTON_ARIA_LABEL": "{{direction}} sortieren"
   },

diff --git a/libs/angular-accelerator/assets/i18n/en.json b/libs/angular-accelerator/assets/i18n/en.json
@@ -1,11 +1,15 @@
 {
   "OCX_CUSTOM_GROUP_COLUMN_SELECTOR": {
-    "DROPDOWN_LABEL": "Columns",
+    "ARIA_LABEL": "Column group selector",
+    "DROPDOWN_LABEL": "Column group",
     "OPEN_BUTTON_DETAIL": "Open custom group selection dialog",
+    "OPEN_BUTTON_ARIA_LABEL": "Open custom group selection dialog",
     "ACTIVE_COLUMNS_LABEL": "Active columns",
     "INACTIVE_COLUMNS_LABEL": "Inactive columns",
     "SAVE_BUTTON_LABEL": "Save",
+    "SAVE_BUTTON_ARIA_LABEL": "Save",
     "CANCEL_BUTTON_LABEL": "Cancel",
+    "CANCEL_BUTTON_ARIA_LABEL": "Cancel",
     "DIALOG_TITLE": "Custom group column selection",
     "CONFIGURE_ACTION_COLUMN": {
       "TITLE": "Configure action column",
@@ -36,12 +40,12 @@
   "OCX_LIST_GRID_SORT": {
     "DROPDOWN": {
       "PLACEHOLDER": "Select sorting",
-      "TITLE": "Sort by"
+      "ARIA_LABEL": "Sort by"
     },
     "TOGGLE_BUTTON": {
-      "ASCENDING_TITLE": "Ascending",
-      "DESCENDING_TITLE": "Descending",
-      "DEFAULT_TITLE": "Default"
+      "ASCENDING_TOOLTIP": "Ascending",
+      "DESCENDING_TOOLTIP": "Descending",
+      "DEFAULT_TOOLTIP": "Default"
     },
     "SORTING_BUTTON_ARIA_LABEL": "Toggle sorting direction to {{direction}}"
   },

diff --git a/libs/angular-accelerator/src/lib/angular-accelerator-primeng.module.ts b/libs/angular-accelerator/src/lib/angular-accelerator-primeng.module.ts
@@ -14,6 +14,7 @@ import { SkeletonModule } from 'primeng/skeleton'
 import { MessageModule } from 'primeng/message'
 import { SharedModule } from 'primeng/api'
 import { CheckboxModule } from 'primeng/checkbox'
+import { FloatLabelModule } from 'primeng/floatlabel'
 
 @NgModule({
   imports: [
@@ -31,6 +32,7 @@ import { CheckboxModule } from 'primeng/checkbox'
     MultiSelectModule,
     SkeletonModule,
     MessageModule,
+    FloatLabelModule,
     SharedModule,
   ],
   exports: [
@@ -48,6 +50,7 @@ import { CheckboxModule } from 'primeng/checkbox'
     MultiSelectModule,
     SkeletonModule,
     MessageModule,
+    FloatLabelModule,
     SharedModule,
   ],
 })

diff --git a/...celerator/src/lib/components/column-group-selection/column-group-selection.component.html b/...celerator/src/lib/components/column-group-selection/column-group-selection.component.html
@@ -1,18 +1,19 @@
-<span class="p-float-label">
+<p-floatLabel>
   <p-dropdown
-    id="columnGroupSelectionDropdown"
+    inputId="columnGroupSelectionDropdown"
     *ngIf="(allGroupKeys$ | async)?.length"
     (onClear)="clearGroupSelection()"
     (onChange)="changeGroupSelection($event)"
     [options]="(allGroupKeys$ | async) || []"
     [placeholder]="placeholderKey | translate"
     [showClear]="selectedGroupKey !== defaultGroupKey"
     [(ngModel)]="selectedGroupKey"
+    [ariaLabel]="'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate"
   >
     <ng-template let-item pTemplate="item"> {{ item ? (item | translate) : ''}} </ng-template>
     <ng-template let-item pTemplate="selectedItem"> {{ item ? (item | translate) : ''}} </ng-template>
   </p-dropdown>
   <label *ngIf="(allGroupKeys$ | async)?.length" for="columnGroupSelectionDropdown"
     >{{ ("OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL" | translate) }}</label
   >
-</span>
+</p-floatLabel>
diff --git a/...c/lib/components/custom-group-column-selector/custom-group-column-selector.component.html b/...c/lib/components/custom-group-column-selector/custom-group-column-selector.component.html
@@ -2,24 +2,35 @@
   id="customGroupColumnSelectorButton"
   type="button"
   (onClick)="onOpenCustomGroupColumnSelectionDialogClick()"
-  [title]="openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)"
+  [pTooltip]="openButtonTitle || (openButtonTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)"
+  tooltipPosition="top"
   icon="pi pi-cog"
   styleClass="p-button"
-  [attr.aria-label]="openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)"
+  [ariaLabel]="(openButtonAriaLabelKey ? (openButtonAriaLabelKey | translate) : openButtonAriaLabel) || openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)"
+  [attr.aria-controls]="visible ? 'customGroupColumnSelectorDialog' : null"
+  [attr.aria-expanded]="visible ? true : false"
 ></p-button>
 
-<p-dialog header="Header" [(visible)]="visible" [style]="{ width: '70%' }" [modal]="true" [closeAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)">
+<p-dialog
+  #dialog
+  id="customGroupColumnSelectorDialog"
+  [(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
+    <span [id]="dialog.ariaLabelledBy" class="text-xl font-bold"
+      >{{ dialogTitle || (dialogTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate)
+      }}</span
     >
   </ng-template>
 
   <p-pickList
     [source]="displayedColumnsModel"
     [target]="hiddenColumnsModel"
-    [sourceHeader]="activeColumnsLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)"
-    [targetHeader]="inactiveColumnsLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)"
+    [sourceHeader]="activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)"
+    [targetHeader]="inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)"
     [dragdrop]="true"
     [responsive]="false"
     [sourceStyle]="{ height: '300px' }"
@@ -51,7 +62,9 @@
           id="frozenActionColumn"
           name="frozen-action-column-select-button"
         >
-          <ng-template let-option pTemplate> {{option.label | translate}} </ng-template>
+          <ng-template let-option pTemplate>
+            <label id="{{option.label}}">{{option.label | translate}}</label>
+          </ng-template>
         </p-selectButton>
       </div>
       <div>
@@ -65,7 +78,9 @@
           class="mt-2"
           name="action-column-position-select-button"
         >
-          <ng-template let-option pTemplate> {{option.label | translate}} </ng-template>
+          <ng-template let-option pTemplate>
+            <label id="{{option.label}}">{{option.label | translate}}</label>
+          </ng-template>
         </p-selectButton>
       </div>
     </div>
@@ -75,13 +90,15 @@
     <p-button
       id="cancelButton"
       (onClick)="onCancelClick()"
-      [label]="cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)"
+      [label]="cancelButtonLabel || (cancelButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)"
       styleClass="p-button"
+      [ariaLabel]="cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)"
     ></p-button>
     <p-button
       id="saveButton"
       (onClick)="onSaveClick()"
-      [label]="saveButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)"
+      [label]="saveButtonLabel || (saveButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)"
+      [ariaLabel]="saveButtonAriaLabelKey || (saveButtonAriaLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)"
     ></p-button>
   </ng-template>
 </p-dialog>
diff --git a/...src/lib/components/custom-group-column-selector/custom-group-column-selector.component.ts b/...src/lib/components/custom-group-column-selector/custom-group-column-selector.component.ts
@@ -26,11 +26,23 @@ export class CustomGroupColumnSelectorComponent implements OnInit {
   @Input() columns: DataTableColumn[] = []
   @Input() displayedColumns: DataTableColumn[] = []
   @Input() dialogTitle = ''
+  @Input() dialogTitleKey = ''
   @Input() openButtonTitle = ''
+  @Input() openButtonTitleKey = ''
+  @Input() openButtonAriaLabel = ''
+  @Input() openButtonAriaLabelKey = ''
   @Input() saveButtonLabel = ''
+  @Input() saveButtonLabelKey = ''
+  @Input() saveButtonAriaLabel = ''
+  @Input() saveButtonAriaLabelKey = ''
   @Input() cancelButtonLabel = ''
+  @Input() cancelButtonLabelKey = ''
+  @Input() cancelButtonAriaLabel = ''
+  @Input() cancelButtonAriaLabelKey = ''
   @Input() activeColumnsLabel = ''
+  @Input() activeColumnsLabelKey = ''
   @Input() inactiveColumnsLabel = ''
+  @Input() inactiveColumnsLabelKey = ''
   @Input() frozenActionColumn = false
   @Input() actionColumnPosition: 'left' | 'right' = 'right'
 
@@ -100,7 +112,7 @@ export class CustomGroupColumnSelectorComponent implements OnInit {
           frozen: this.frozenActionColumnModel,
           position: this.actionColumnPositionModel,
         },
-        activeColumnGroupKey: undefined
+        activeColumnGroupKey: undefined,
       })
     }
 

diff --git a/...accelerator/src/lib/components/data-layout-selection/data-layout-selection.component.html b/...accelerator/src/lib/components/data-layout-selection/data-layout-selection.component.html
@@ -3,11 +3,12 @@
     *ngIf="viewingLayouts.length > 1"
     [options]="viewingLayouts"
     [(ngModel)]="selectedViewLayout"
-    optionLabel="icon"
+    optionLabel="id"
     (onChange)="onDataViewLayoutChange($event.value)"
   >
     <ng-template let-item pTemplate>
-      <i [class]="item.icon" [pTooltip]="item.title || (item.titleKey | translate)" tooltipPosition="top"></i>
+      <i [class]="item.icon" [pTooltip]="item.tooltip || (item.tooltipKey | translate)" tooltipPosition="top"></i>
+      <label style="display: none" id="{{item.id}}">{{item.labelKey | translate}}</label>
     </ng-template>
   </p-selectButton>
 </div>
diff --git a/...r-accelerator/src/lib/components/data-layout-selection/data-layout-selection.component.ts b/...r-accelerator/src/lib/components/data-layout-selection/data-layout-selection.component.ts
@@ -3,16 +3,37 @@ import { PrimeIcons } from 'primeng/api'
 import { PrimeIcon } from '../../utils/primeicon.utils'
 
 interface ViewingLayouts {
+  id: string
   icon: PrimeIcon
   layout: 'grid' | 'list' | 'table'
-  title?: string
-  titleKey: string
+  tooltip?: string
+  tooltipKey: string
+  label?: string
+  labelKey: string
 }
 
 const ALL_VIEW_LAYOUTS: ViewingLayouts[] = [
-  { icon: PrimeIcons.LIST, layout: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' },
-  { icon: PrimeIcons.TH_LARGE, layout: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' },
-  { icon: PrimeIcons.TABLE, layout: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' },
+  {
+    id: 'ocx-data-layout-selection-list',
+    icon: PrimeIcons.LIST,
+    layout: 'list',
+    tooltipKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST',
+    labelKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST',
+  },
+  {
+    id: 'ocx-data-layout-selection-grid',
+    icon: PrimeIcons.TH_LARGE,
+    layout: 'grid',
+    tooltipKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID',
+    labelKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID',
+  },
+  {
+    id: 'ocx-data-layout-selection-table',
+    icon: PrimeIcons.TABLE,
+    layout: 'table',
+    tooltipKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE',
+    labelKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE',
+  },
 ]
 
 export interface DataLayoutSelectionComponentState {
@@ -42,14 +63,14 @@ export class DataLayoutSelectionComponent implements OnInit {
   ngOnInit(): void {
     this.viewingLayouts = ALL_VIEW_LAYOUTS.filter((vl) => this.supportedViewLayouts.includes(vl.layout))
     this.componentStateChanged.emit({
-      layout: this.layout
+      layout: this.layout,
     })
   }
 
   onDataViewLayoutChange(event: { icon: PrimeIcon; layout: 'grid' | 'list' | 'table' }): void {
     this.dataViewLayoutChange.emit(event.layout)
     this.componentStateChanged.emit({
-      layout: event.layout
+      layout: event.layout,
     })
   }
 }
diff --git a/...celerator/src/lib/components/data-list-grid-sorting/data-list-grid-sorting.component.html b/...celerator/src/lib/components/data-list-grid-sorting/data-list-grid-sorting.component.html
@@ -6,7 +6,7 @@
     [options]="dropdownOptions"
     [placeholder]="('OCX_LIST_GRID_SORT.DROPDOWN.PLACEHOLDER' | translate)"
     (onChange)="selectSorting($event)"
-    [title]="('OCX_LIST_GRID_SORT.DROPDOWN.TITLE' | translate)"
+    [ariaLabel]="('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)"
   >
     <ng-template let-item pTemplate="item"> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>
     <ng-template let-item pTemplate="selectedItem">
@@ -15,10 +15,12 @@
   >
   <p-button
     id="dataListGridSortingButton"
+    type="button"
     icon="pi {{sortIcon()}}"
     styleClass="p-button-outlined"
     (onClick)="sortDirectionChanged()"
-    [title]="(sortIconTitle() | translate)"
-    [attr.aria-label]="('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})"
+    [pTooltip]="(sortIconTitle() | translate)"
+    tooltipPosition="top"
+    [ariaLabel]="('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})"
   ></p-button>
 </div>
diff --git a/...accelerator/src/lib/components/data-list-grid-sorting/data-list-grid-sorting.component.ts b/...accelerator/src/lib/components/data-list-grid-sorting/data-list-grid-sorting.component.ts
@@ -68,8 +68,8 @@ export class DataListGridSortingComponent implements OnInit {
     this.componentStateChanged.emit({
       sorting: {
         sortColumn: this.sortField,
-        sortDirection: this.sortDirection
-      }
+        sortDirection: this.sortDirection,
+      },
     })
   }
 
@@ -91,11 +91,11 @@ export class DataListGridSortingComponent implements OnInit {
   sortDirectionToTitle(sortDirection: DataSortDirection) {
     switch (sortDirection) {
       case DataSortDirection.ASCENDING:
-        return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.ASCENDING_TITLE'
+        return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.ASCENDING_TOOLTIP'
       case DataSortDirection.DESCENDING:
-        return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DESCENDING_TITLE'
+        return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DESCENDING_TOOLTIP'
       default:
-        return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DEFAULT_TITLE'
+        return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DEFAULT_TOOLTIP'
     }
   }
 }