From 3804dd6613834f999f3e809dc09580ac1c4a8e90 Mon Sep 17 00:00:00 2001 From: markuczy <129275100+markuczy@users.noreply.github.com> Date: Fri, 27 Sep 2024 15:52:30 +0200 Subject: [PATCH 1/2] feat: increased accessibility of data list grid component (#496) --- libs/angular-accelerator/assets/i18n/de.json | 3 ++- libs/angular-accelerator/assets/i18n/en.json | 3 ++- .../data-list-grid.component.html | 23 ++++++++++++------- .../assets/i18n/de.json | 3 ++- .../assets/i18n/en.json | 3 ++- 5 files changed, 23 insertions(+), 12 deletions(-) diff --git a/libs/angular-accelerator/assets/i18n/de.json b/libs/angular-accelerator/assets/i18n/de.json index 45bd76af..ac98c363 100644 --- a/libs/angular-accelerator/assets/i18n/de.json +++ b/libs/angular-accelerator/assets/i18n/de.json @@ -78,7 +78,8 @@ "EDIT": "Bearbeiten", "DELETE": "Löschen" }, - "MORE_ACTIONS": "Weitere Aktionen" + "MORE_ACTIONS_ARIA_LABEL": "Weitere Aktionen", + "MORE_ACTIONS_TOOLTIP": "Weitere Aktionen anzeigen" }, "OCX_DATA_LAYOUT_SELECTION": { "LAYOUT": { diff --git a/libs/angular-accelerator/assets/i18n/en.json b/libs/angular-accelerator/assets/i18n/en.json index adfa7ae5..edb81a0d 100644 --- a/libs/angular-accelerator/assets/i18n/en.json +++ b/libs/angular-accelerator/assets/i18n/en.json @@ -78,7 +78,8 @@ "EDIT": "Edit", "DELETE": "Delete" }, - "MORE_ACTIONS": "More actions" + "MORE_ACTIONS_ARIA_LABEL": "More actions", + "MORE_ACTIONS_TOOLTIP": "Display more actions" }, "OCX_DATA_LAYOUT_SELECTION": { "LAYOUT": { diff --git a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.html b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.html index 6caac5c4..37e8e9e7 100644 --- a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.html +++ b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.html @@ -23,7 +23,7 @@ - +
@@ -70,9 +70,11 @@ pButton (click)="setSelectedItem(item); updateGridMenuItems(true); menu.toggle($event)" icon="pi pi-ellipsis-v" - [attr.ariaLabel]="'OCX_DATA_LIST_GRID.MORE_ACTIONS' | translate" + [attr.aria-label]="'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate" class="more-actions-menu-button menu-btn" [attr.name]="'data-grid-item-menu-button'" + [pTooltip]="'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate" + tooltipPosition="top" >
@@ -102,7 +104,8 @@ icon="pi pi-eye" pButton class="p-button-rounded p-button-text mb-1 mr-2 viewListItemButton" - title="{{ (viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate }}" + [pTooltip]="(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate" + tooltipPosition="top" [attr.aria-label]="(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate" (click)="onViewRow(item)" *ocxIfPermission="viewPermission" @@ -118,7 +121,8 @@ 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 }}" + [pTooltip]="(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate" + tooltipPosition="top" [attr.aria-label]="(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate" (click)="onEditRow(item)" *ocxIfPermission="editPermission" @@ -134,7 +138,8 @@ icon="pi pi-trash" 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 }}" + [pTooltip]="(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate" + tooltipPosition="top" [attr.aria-label]="(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate" (click)="onDeleteRow(item)" *ocxIfPermission="deletePermission" @@ -151,7 +156,8 @@ [ngClass]="action.classes" [icon]="action.icon || ''" (click)="action.callback(item)" - [title]="action.labelKey ? (action.labelKey | translate) : ''" + [pTooltip]="action.labelKey ? (action.labelKey | translate) : ''" + tooltipPosition="top" [attr.aria-label]="action.labelKey ? (action.labelKey | translate) : ''" [disabled]="action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))" > @@ -164,8 +170,9 @@ class="p-button-rounded p-button-text" [icon]="'pi pi-ellipsis-v'" (click)="toggleOverflowMenu($event, menu, item)" - [ariaLabel]="'OCX_DATA_TABLE.MORE_ACTIONS' | translate" - [title]="'OCX_DATA_TABLE.MORE_ACTIONS' | translate" + [attr.aria-label]="'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate" + [pTooltip]="'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate" + tooltipPosition="top" > diff --git a/libs/portal-integration-angular/assets/i18n/de.json b/libs/portal-integration-angular/assets/i18n/de.json index 7d5ce992..537d9a44 100644 --- a/libs/portal-integration-angular/assets/i18n/de.json +++ b/libs/portal-integration-angular/assets/i18n/de.json @@ -99,7 +99,8 @@ "EDIT": "Bearbeiten", "DELETE": "Löschen" }, - "MORE_ACTIONS": "Weitere Aktionen" + "MORE_ACTIONS_ARIA_LABEL": "Weitere Aktionen", + "MORE_ACTIONS_TOOLTIP": "Weitere Aktionen anzeigen" }, "OCX_DATA_LAYOUT_SELECTION": { "LAYOUT": { diff --git a/libs/portal-integration-angular/assets/i18n/en.json b/libs/portal-integration-angular/assets/i18n/en.json index 2f4c8cce..c81c3a00 100644 --- a/libs/portal-integration-angular/assets/i18n/en.json +++ b/libs/portal-integration-angular/assets/i18n/en.json @@ -99,7 +99,8 @@ "EDIT": "Edit", "DELETE": "Delete" }, - "MORE_ACTIONS": "More actions" + "MORE_ACTIONS_ARIA_LABEL": "More actions", + "MORE_ACTIONS_TOOLTIP": "Display more actions" }, "OCX_DATA_LAYOUT_SELECTION": { "LAYOUT": { From f54c93f8c81401981e857348360e0e6a360d3a73 Mon Sep 17 00:00:00 2001 From: markuczy <129275100+markuczy@users.noreply.github.com> Date: Fri, 27 Sep 2024 15:57:02 +0200 Subject: [PATCH 2/2] 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 --- libs/angular-accelerator/assets/i18n/de.json | 14 ++++--- libs/angular-accelerator/assets/i18n/en.json | 14 ++++--- .../lib/angular-accelerator-primeng.module.ts | 3 ++ .../column-group-selection.component.html | 7 ++-- ...ustom-group-column-selector.component.html | 39 +++++++++++++------ .../custom-group-column-selector.component.ts | 14 ++++++- .../data-layout-selection.component.html | 5 ++- .../data-layout-selection.component.ts | 35 +++++++++++++---- .../data-list-grid-sorting.component.html | 8 ++-- .../data-list-grid-sorting.component.ts | 10 ++--- .../interactive-data-view.component.spec.ts | 16 ++++---- ...interactive-data-view.component.stories.ts | 8 ++-- .../custom-group-column-selector.harness.ts | 2 +- .../testing/data-layout-selection.harness.ts | 13 +++---- .../harnesses/primeng/p-dropdown.harness.ts | 13 +++++-- .../assets/i18n/de.json | 14 ++++--- .../assets/i18n/en.json | 14 ++++--- 17 files changed, 155 insertions(+), 74 deletions(-) diff --git a/libs/angular-accelerator/assets/i18n/de.json b/libs/angular-accelerator/assets/i18n/de.json index ac98c363..0b43e64f 100644 --- 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 index edb81a0d..a0b5c98c 100644 --- 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 index e2f5cedf..26a6e018 100644 --- 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/libs/angular-accelerator/src/lib/components/column-group-selection/column-group-selection.component.html b/libs/angular-accelerator/src/lib/components/column-group-selection/column-group-selection.component.html index a9c445b0..d24689c4 100644 --- a/libs/angular-accelerator/src/lib/components/column-group-selection/column-group-selection.component.html +++ b/libs/angular-accelerator/src/lib/components/column-group-selection/column-group-selection.component.html @@ -1,6 +1,6 @@ - + {{ item ? (item | translate) : ''}} {{ item ? (item | translate) : ''}} @@ -15,4 +16,4 @@ - + diff --git a/libs/angular-accelerator/src/lib/components/custom-group-column-selector/custom-group-column-selector.component.html b/libs/angular-accelerator/src/lib/components/custom-group-column-selector/custom-group-column-selector.component.html index c97c788d..91616151 100644 --- a/libs/angular-accelerator/src/lib/components/custom-group-column-selector/custom-group-column-selector.component.html +++ b/libs/angular-accelerator/src/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" > - + - {{ dialogTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate) }}{{ dialogTitle || (dialogTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate) + }} - {{option.label | translate}} + + +
@@ -65,7 +78,9 @@ class="mt-2" name="action-column-position-select-button" > - {{option.label | translate}} + + +
@@ -75,13 +90,15 @@ diff --git a/libs/angular-accelerator/src/lib/components/custom-group-column-selector/custom-group-column-selector.component.ts b/libs/angular-accelerator/src/lib/components/custom-group-column-selector/custom-group-column-selector.component.ts index 75a6e59e..ccaccff9 100644 --- a/libs/angular-accelerator/src/lib/components/custom-group-column-selector/custom-group-column-selector.component.ts +++ b/libs/angular-accelerator/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/libs/angular-accelerator/src/lib/components/data-layout-selection/data-layout-selection.component.html b/libs/angular-accelerator/src/lib/components/data-layout-selection/data-layout-selection.component.html index 68b23333..c4a33c38 100644 --- a/libs/angular-accelerator/src/lib/components/data-layout-selection/data-layout-selection.component.html +++ b/libs/angular-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)" > - + + diff --git a/libs/angular-accelerator/src/lib/components/data-layout-selection/data-layout-selection.component.ts b/libs/angular-accelerator/src/lib/components/data-layout-selection/data-layout-selection.component.ts index f1d89afd..2c3d9d73 100644 --- a/libs/angular-accelerator/src/lib/components/data-layout-selection/data-layout-selection.component.ts +++ b/libs/angular-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/libs/angular-accelerator/src/lib/components/data-list-grid-sorting/data-list-grid-sorting.component.html b/libs/angular-accelerator/src/lib/components/data-list-grid-sorting/data-list-grid-sorting.component.html index 379e5545..397f5797 100644 --- a/libs/angular-accelerator/src/lib/components/data-list-grid-sorting/data-list-grid-sorting.component.html +++ b/libs/angular-accelerator/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)" > {{ item?.columnName ? (item.columnName | translate) : ''}} @@ -15,10 +15,12 @@ > diff --git a/libs/angular-accelerator/src/lib/components/data-list-grid-sorting/data-list-grid-sorting.component.ts b/libs/angular-accelerator/src/lib/components/data-list-grid-sorting/data-list-grid-sorting.component.ts index 39d0c761..8d5556c4 100644 --- a/libs/angular-accelerator/src/lib/components/data-list-grid-sorting/data-list-grid-sorting.component.ts +++ b/libs/angular-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' } } } diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.spec.ts b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.spec.ts index aec3b3d2..5eb1dce7 100644 --- a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.spec.ts +++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.spec.ts @@ -617,7 +617,7 @@ describe('InteractiveDataViewComponent', () => { ] const columnGroupSelectionDropdown = await loader.getHarness( - PDropdownHarness.with({ id: 'columnGroupSelectionDropdown' }) + PDropdownHarness.with({ inputId: 'columnGroupSelectionDropdown' }) ) const dropdownItems = await columnGroupSelectionDropdown.getDropdownItems() await dropdownItems[1].selectItem() @@ -682,7 +682,7 @@ describe('InteractiveDataViewComponent', () => { ] const columnGroupSelectionDropdown = await loader.getHarness( - PDropdownHarness.with({ id: 'columnGroupSelectionDropdown' }) + PDropdownHarness.with({ inputId: 'columnGroupSelectionDropdown' }) ) const dropdownItems = await columnGroupSelectionDropdown.getDropdownItems() await dropdownItems[1].selectItem() @@ -748,7 +748,7 @@ describe('InteractiveDataViewComponent', () => { ] const columnGroupSelectionDropdown = await loader.getHarness( - PDropdownHarness.with({ id: 'columnGroupSelectionDropdown' }) + PDropdownHarness.with({ inputId: 'columnGroupSelectionDropdown' }) ) const dropdownItems = await columnGroupSelectionDropdown.getDropdownItems() await dropdownItems[1].selectItem() @@ -815,7 +815,7 @@ describe('InteractiveDataViewComponent', () => { ] const columnGroupSelectionDropdown = await loader.getHarness( - PDropdownHarness.with({ id: 'columnGroupSelectionDropdown' }) + PDropdownHarness.with({ inputId: 'columnGroupSelectionDropdown' }) ) const dropdownItems = await columnGroupSelectionDropdown.getDropdownItems() await dropdownItems[1].selectItem() @@ -1114,7 +1114,7 @@ describe('InteractiveDataViewComponent', () => { beforeEach(async () => { dataLayoutSelection = await loader.getHarness(DataLayoutSelectionHarness) - + const gridLayoutSelectionButton = await dataLayoutSelection.getGridLayoutSelectionButton() await gridLayoutSelectionButton?.click() @@ -1453,7 +1453,7 @@ describe('InteractiveDataViewComponent', () => { it('should remain sorted after switching data view from table view to grid view and to list view', async () => { window.HTMLElement.prototype.scrollIntoView = jest.fn() const columnGroupSelectionDropdown = await loader.getHarness( - PDropdownHarness.with({ id: 'columnGroupSelectionDropdown' }) + PDropdownHarness.with({ inputId: 'columnGroupSelectionDropdown' }) ) const dropdownItems = await columnGroupSelectionDropdown.getDropdownItems() await dropdownItems[1].selectItem() @@ -1482,7 +1482,7 @@ describe('InteractiveDataViewComponent', () => { it('should remain sorted after switching data view from table view to list view then sort again and switch to grid view', async () => { window.HTMLElement.prototype.scrollIntoView = jest.fn() const columnGroupSelectionDropdown = await loader.getHarness( - PDropdownHarness.with({ id: 'columnGroupSelectionDropdown' }) + PDropdownHarness.with({ inputId: 'columnGroupSelectionDropdown' }) ) const dropdownItems = await columnGroupSelectionDropdown.getDropdownItems() await dropdownItems[1].selectItem() @@ -1585,7 +1585,7 @@ describe('InteractiveDataViewComponent', () => { }, ] component.titleLineId = 'name' - + fixture.detectChanges() await fixture.whenStable() } diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts index 48b3c76a..92b6ef59 100644 --- a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts +++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts @@ -16,6 +16,7 @@ import { MultiSelectModule } from 'primeng/multiselect' import { PickListModule } from 'primeng/picklist' import { ProgressBarModule } from 'primeng/progressbar' import { SelectButtonModule } from 'primeng/selectbutton' +import { FloatLabelModule } from 'primeng/floatlabel' import { TableModule } from 'primeng/table' import { IfPermissionDirective } from '../../directives/if-permission.directive' import { MockAuthModule } from '../../mock-auth/mock-auth.module' @@ -79,6 +80,7 @@ const InteractiveDataViewComponentSBConfig: Meta = FormsModule, ProgressBarModule, InputTextModule, + FloatLabelModule, ], }), ], @@ -95,21 +97,21 @@ const defaultComponentArgs: InteractiveDataViewInputTypes = { nameKey: 'Product', sortable: false, filterable: true, - predefinedGroupKeys: ['test'] + predefinedGroupKeys: ['test'], }, { id: 'amount', columnType: ColumnType.NUMBER, nameKey: 'Amount', sortable: true, - predefinedGroupKeys: ['test', 'test1'] + predefinedGroupKeys: ['test', 'test1'], }, { id: 'available', columnType: ColumnType.STRING, nameKey: 'Available', sortable: false, - predefinedGroupKeys: ['test2'] + predefinedGroupKeys: ['test2'], }, ], data: [ diff --git a/libs/angular-accelerator/testing/custom-group-column-selector.harness.ts b/libs/angular-accelerator/testing/custom-group-column-selector.harness.ts index 35df7b8d..ead1e38d 100644 --- a/libs/angular-accelerator/testing/custom-group-column-selector.harness.ts +++ b/libs/angular-accelerator/testing/custom-group-column-selector.harness.ts @@ -11,7 +11,7 @@ export class CustomGroupColumnSelectorHarness extends ContentContainerComponentH ) getDialog = this.locatorFor(PDialogHarness) - getCancelButton = this.locatorFor(PButtonHarness) + getCancelButton = this.locatorFor(PButtonHarness.with({ id: 'cancelButton' })) getSaveButton = this.locatorFor(PButtonHarness.with({ id: 'saveButton' })) getPicklist = this.locatorFor(PPicklistHarness) getSelectButtons = this.locatorForOptional('[name]') diff --git a/libs/angular-accelerator/testing/data-layout-selection.harness.ts b/libs/angular-accelerator/testing/data-layout-selection.harness.ts index 9de4e8f6..0368c125 100644 --- a/libs/angular-accelerator/testing/data-layout-selection.harness.ts +++ b/libs/angular-accelerator/testing/data-layout-selection.harness.ts @@ -1,6 +1,5 @@ import { ContentContainerComponentHarness, TestElement } from '@angular/cdk/testing' -import { PrimeIcons } from 'primeng/api' -import { PSelectButtonHarness, PrimeIcon } from '@onecx/angular-testing' +import { PSelectButtonHarness } from '@onecx/angular-testing' export class DataLayoutSelectionHarness extends ContentContainerComponentHarness { static hostSelector = 'ocx-data-layout-selection' @@ -10,15 +9,15 @@ export class DataLayoutSelectionHarness extends ContentContainerComponentHarness } async getListLayoutSelectionButton() { - return await this.isDesiredButton(await this.getAllSelectionButtons(), PrimeIcons.LIST) + return await this.isDesiredButton(await this.getAllSelectionButtons(), 'ocx-data-layout-selection-list') } async getGridLayoutSelectionButton() { - return await this.isDesiredButton(await this.getAllSelectionButtons(), PrimeIcons.TH_LARGE) + return await this.isDesiredButton(await this.getAllSelectionButtons(), 'ocx-data-layout-selection-grid') } async getTableLayoutSelectionButton() { - return await this.isDesiredButton(await this.getAllSelectionButtons(), PrimeIcons.TABLE) + return await this.isDesiredButton(await this.getAllSelectionButtons(), 'ocx-data-layout-selection-table') } async getCurrentLayout() { @@ -29,9 +28,9 @@ export class DataLayoutSelectionHarness extends ContentContainerComponentHarness await (await this.getListLayoutSelectionButton())?.click() } - private async isDesiredButton(value: TestElement[], icon: PrimeIcon) { + private async isDesiredButton(value: TestElement[], id: string) { for (let index = 0; index < value.length; index++) { - if ((await value[index].getAttribute('aria-labelledby')) === icon) { + if ((await value[index].getAttribute('aria-labelledby')) === id) { return value[index] } } diff --git a/libs/angular-testing/src/lib/harnesses/primeng/p-dropdown.harness.ts b/libs/angular-testing/src/lib/harnesses/primeng/p-dropdown.harness.ts index 8b83a968..f6ca0a26 100644 --- a/libs/angular-testing/src/lib/harnesses/primeng/p-dropdown.harness.ts +++ b/libs/angular-testing/src/lib/harnesses/primeng/p-dropdown.harness.ts @@ -3,15 +3,22 @@ import { ListItemHarness } from '../list-item.harness' export interface PDropdownHarnessFilters extends BaseHarnessFilters { id?: string + inputId?: string } export class PDropdownHarness extends ContentContainerComponentHarness { static hostSelector = 'p-dropdown' static with(options: PDropdownHarnessFilters): HarnessPredicate { - return new HarnessPredicate(PDropdownHarness, options).addOption('id', options.id, (harness, id) => - HarnessPredicate.stringMatches(harness.getId(), id) - ) + return new HarnessPredicate(PDropdownHarness, options) + .addOption('id', options.id, (harness, id) => HarnessPredicate.stringMatches(harness.getId(), id)) + .addOption('inputId', options.inputId, (harness, inputId) => + HarnessPredicate.stringMatches(harness.getInputId(), inputId) + ) + } + + async getInputId(): Promise { + return await (await this.host()).getAttribute('inputId') } async getId(): Promise { diff --git a/libs/portal-integration-angular/assets/i18n/de.json b/libs/portal-integration-angular/assets/i18n/de.json index 537d9a44..0f0f7d30 100644 --- a/libs/portal-integration-angular/assets/i18n/de.json +++ b/libs/portal-integration-angular/assets/i18n/de.json @@ -21,12 +21,16 @@ "CANCEL": "Absagen" }, "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", @@ -57,12 +61,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/portal-integration-angular/assets/i18n/en.json b/libs/portal-integration-angular/assets/i18n/en.json index c81c3a00..849c63d3 100644 --- a/libs/portal-integration-angular/assets/i18n/en.json +++ b/libs/portal-integration-angular/assets/i18n/en.json @@ -21,12 +21,16 @@ "CANCEL": "Cancel" }, "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", @@ -57,12 +61,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}}" },