diff --git a/libs/angular-accelerator/assets/i18n/de.json b/libs/angular-accelerator/assets/i18n/de.json index c83b59b2..a9868080 100644 --- 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 index 4dde8185..854f9150 100644 --- 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 index 13e42ca1..26c97131 100644 --- 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 @@ - + @@ -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})" >
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 index a4eca429..be4a3eab 100644 --- 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 = { }), 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,7 +423,7 @@ export const WithOnlyOverflowActions = { showAsOverflow: true, actionEnabledField: 'available', }, - ] + ], }, } @@ -420,7 +431,7 @@ 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 index 3fdad604..13168ee2 100644 --- 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) } diff --git a/libs/portal-integration-angular/assets/i18n/de.json b/libs/portal-integration-angular/assets/i18n/de.json index d05fea69..0c490601 100644 --- a/libs/portal-integration-angular/assets/i18n/de.json +++ b/libs/portal-integration-angular/assets/i18n/de.json @@ -70,6 +70,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", @@ -87,7 +88,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.", @@ -127,10 +130,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/portal-integration-angular/assets/i18n/en.json b/libs/portal-integration-angular/assets/i18n/en.json index 245065c0..9a83b541 100644 --- a/libs/portal-integration-angular/assets/i18n/en.json +++ b/libs/portal-integration-angular/assets/i18n/en.json @@ -70,6 +70,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", @@ -87,7 +88,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.", @@ -127,10 +130,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"