feat: basic search to simple search with aria labels improvements (#146)

* refactor: basic renamed to simple * feat: search header now has buttons with informational aria labels * feat: german translations * refactor: reverted naming changes * fix: basic directive error throw adjusted * feat: search-header tooltips
onecx · Mar 4, 2024 · a3a009d · a3a009d
1 parent 0f67c78
commit a3a009d
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 34 deletions.
diff --git a/libs/portal-integration-angular/assets/i18n/de.json b/libs/portal-integration-angular/assets/i18n/de.json
@@ -70,13 +70,27 @@
   },
   "OCX_SEARCH_HEADER": {
     "TOGGLE_BUTTON": {
-      "BASIC": "Basis",
-      "ADVANCED": "Erweitert"
+      "SIMPLE": {
+        "TEXT": "Einfach",
+        "DETAIL": "Zu einfachen Suchkriterien wechseln"
+      },
+      "ADVANCED": {
+        "TEXT": "Erweitert",
+        "DETAIL": "Zu erweiterten Suchkriterien wechseln"
+      }
     },
     "OCX_SEARCH_CONFIG": {
       "DROPDOWN_DEFAULT": "Gespeicherte Suchvorlage auswählen"
     },
     "HEADER": "Suche",
+    "RESET_BUTTON": {
+      "TEXT": "Zurücksetzen",
+      "DETAIL": "Suchkriterien zurücksetzen"
+    },
+    "SEARCH_BUTTON": {
+      "TEXT": "Suchen",
+      "DETAIL": "Suche starten"
+    },
     "RESET_BUTTON_TEXT": "Zurücksetzen",
     "SEARCH_BUTTON_TEXT": "Suchen",
     "EXPORT": "Alle Ereignisse exportieren"

diff --git a/libs/portal-integration-angular/assets/i18n/en.json b/libs/portal-integration-angular/assets/i18n/en.json
@@ -70,15 +70,27 @@
   },
   "OCX_SEARCH_HEADER": {
     "TOGGLE_BUTTON": {
-      "BASIC": "Basic",
-      "ADVANCED": "Advanced"
+      "SIMPLE": {
+        "TEXT": "Simple",
+        "DETAIL": "Switch to simple search criteria"
+      },
+      "ADVANCED": {
+        "TEXT": "Advanced",
+        "DETAIL": "Switch to advanced search criteria"
+      }
     },
     "OCX_SEARCH_CONFIG": {
       "DROPDOWN_DEFAULT": "Pick predefined template"
     },
     "HEADER": "Search",
-    "RESET_BUTTON_TEXT": "Reset",
-    "SEARCH_BUTTON_TEXT": "Search",
+    "RESET_BUTTON": {
+      "TEXT": "Reset",
+      "DETAIL": "Reset search criteria"
+    },
+    "SEARCH_BUTTON": {
+      "TEXT": "Search",
+      "DETAIL": "Start search"
+    },
     "EXPORT": "Export all events"
   },
   "OCX_PAGE_HEADER": {

diff --git a/...portal-integration-angular/src/lib/core/components/page-header/page-header.component.html b/...portal-integration-angular/src/lib/core/components/page-header/page-header.component.html
@@ -48,6 +48,7 @@ <h4>{{ subheader }}</h4>
               [title]="(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)"
               [disabled]="action.disabled ? action.disabled : false"
               [attr.name]="action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'"
+              [ariaLabel]="(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)"
             ></p-button>
           </ng-container>
         </div>

diff --git a/...integration-angular/src/lib/core/components/search-config/search-config.component.spec.ts b/...integration-angular/src/lib/core/components/search-config/search-config.component.spec.ts
@@ -33,7 +33,7 @@ describe('SearchConfigComponent', () => {
   const searchConfigs: SearchConfig[] = [
     {
       id: '01',
-      name: 'Basic search config',
+      name: 'Simple search config',
       fieldListVersion: 1,
       isReadonly: true,
       isAdvanced: true,

diff --git a/...tion-angular/src/lib/core/components/search-criteria/search-criteria.component.stories.ts b/...tion-angular/src/lib/core/components/search-criteria/search-criteria.component.stories.ts
@@ -47,7 +47,7 @@ export default {
         MenuModule,
         BreadcrumbModule,
         SkeletonModule,
-        StorybookTranslateModule
+        StorybookTranslateModule,
       ],
       providers: [],
     }),
@@ -117,7 +117,7 @@ const TemplateWithProjectionAndExtraToolbar: StoryFn<SearchCriteriaComponent> =
   </ocx-search-criteria>`,
 })
 
-export const Basic = {
+export const Simple = {
   render: Template,
 
   args: {

diff --git a/...-integration-angular/src/lib/core/components/search-criteria/search-criteria.component.ts b/...-integration-angular/src/lib/core/components/search-criteria/search-criteria.component.ts
@@ -51,7 +51,7 @@ export class SearchCriteriaComponent extends PageHeaderComponent implements OnIn
 
   protected advancedSearchActive = false
 
-  // in BASIC mode ... enable switching to ADVANCED
+  // in SIMPLE mode ... enable switching to ADVANCED
   private enableAdvancedSearch: Action = {
     label: 'Advanced',
     title: 'Switch to Advanced Search',
@@ -60,10 +60,10 @@ export class SearchCriteriaComponent extends PageHeaderComponent implements OnIn
       this.activateAdvancedSearch(true)
     },
   }
-  // in ADVANCED mode ... enable switching to BASIC
-  private enableBasicSearch: Action = {
-    label: 'Basic',
-    title: 'Switch to Basic Search',
+  // in ADVANCED mode ... enable switching to SIMPLE
+  private enableSimpleSearch: Action = {
+    label: 'Simple',
+    title: 'Switch to Simple Search',
     show: 'always',
     actionCallback: () => {
       this.activateAdvancedSearch(false)
@@ -75,7 +75,7 @@ export class SearchCriteriaComponent extends PageHeaderComponent implements OnIn
     translateService: TranslateService,
     appStateService: AppStateService,
     userService: UserService,
-    @Inject(PortalSearchPage) @Optional() private searchPage?: PortalSearchPage<unknown>,
+    @Inject(PortalSearchPage) @Optional() private searchPage?: PortalSearchPage<unknown>
   ) {
     super(breadcrumbs, translateService, appStateService, userService)
   }
@@ -111,12 +111,12 @@ export class SearchCriteriaComponent extends PageHeaderComponent implements OnIn
     this.advancedSearchActive = advanced
     const actions = [...(this.actions || [])]
     const index = actions.findIndex(
-      (a) => (advanced && a === this.enableAdvancedSearch) || (!advanced && a === this.enableBasicSearch)
+      (a) => (advanced && a === this.enableAdvancedSearch) || (!advanced && a === this.enableSimpleSearch)
     )
     if (index >= 0) {
-      actions[index] = advanced ? this.enableBasicSearch : this.enableAdvancedSearch
+      actions[index] = advanced ? this.enableSimpleSearch : this.enableAdvancedSearch
     } else {
-      actions.push(advanced ? this.enableBasicSearch : this.enableAdvancedSearch)
+      actions.push(advanced ? this.enableSimpleSearch : this.enableAdvancedSearch)
     }
     this.actions = actions
   }

diff --git a/...al-integration-angular/src/lib/core/components/search-header/search-header.component.html b/...al-integration-angular/src/lib/core/components/search-header/search-header.component.html
@@ -17,20 +17,20 @@
           id="resetButton"
           *ngIf="resetted.observed"
           (onClick)="onResetClicked()"
-          label="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON_TEXT' | translate }}"
+          label="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}"
           icon="pi pi-eraser"
-          [attr.aria-label]="'OCX_SEARCH_HEADER.RESET_BUTTON_TEXT' | translate"
-          title="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON_TEXT' | translate }}"
+          [ariaLabel]="'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate"
+          title="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}"
         >
         </p-button>
 
         <p-button
           id="searchButton"
           (onClick)="onSearchClicked()"
-          label="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON_TEXT' | translate }}"
+          label="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}"
           icon="pi pi-search"
-          [attr.aria-label]="'OCX_SEARCH_HEADER.SEARCH_BUTTON_TEXT' | translate"
-          title="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON_TEXT' | translate }}"
+          [ariaLabel]="'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate"
+          title="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}"
         >
         </p-button>
       </div>

diff --git a/...rtal-integration-angular/src/lib/core/components/search-header/search-header.component.ts b/...rtal-integration-angular/src/lib/core/components/search-header/search-header.component.ts
@@ -89,13 +89,17 @@ export class SearchHeaderComponent implements AfterViewInit {
     const headerActions: Action[] = []
     if (this.hasAdvanced) {
       headerActions.push({
-        id: 'basicAdvancedButton',
+        id: 'simpleAdvancedButton',
         labelKey:
           this.viewMode === 'basic'
-            ? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED'
-            : 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.BASIC',
+            ? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED.TEXT'
+            : 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.SIMPLE.TEXT',
         actionCallback: () => this.toggleViewMode(),
         show: 'always',
+        titleKey:
+          this.viewMode === 'basic'
+            ? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED.DETAIL'
+            : 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.SIMPLE.DETAIL',
       })
     }
     this.headerActions = headerActions.concat(this.actions)

diff --git a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.spec.ts b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.spec.ts
@@ -209,7 +209,7 @@ describe('PortalDialogService', () => {
   let fixture: ComponentFixture<BaseTestComponent>
 
   const translations = {
-    TITLE_TRANSLATE: 'basicTitle',
+    TITLE_TRANSLATE: 'simpleTitle',
     TITLE_TRANSLATE_PARAM: 'translatedTitle {{val}}',
     MESSAGE: 'myMessage',
     MESSAGE_PARAM: 'myMessage {{val}}',

diff --git a/libs/portal-integration-angular/testing/search-header.harness.ts b/libs/portal-integration-angular/testing/search-header.harness.ts
@@ -18,9 +18,9 @@ export class SearchHeaderHarness extends ContentContainerComponentHarness {
     })
   )
 
-  getBasicAdvancedButton = this.locatorForOptional(
+  getSimpleAdvancedButton = this.locatorForOptional(
     ButtonHarness.with({
-      id: 'basicAdvancedButton',
+      id: 'simpleAdvancedButton',
     })
   )
 
@@ -34,11 +34,11 @@ export class SearchHeaderHarness extends ContentContainerComponentHarness {
     await (await this.getResetButton()).click()
   }
 
-  async toggleBasicAdvanced() {
-    if (await this.getBasicAdvancedButton()) {
-      await (await this.getBasicAdvancedButton())?.click()
+  async toggleSimpleAdvanced() {
+    if (await this.getSimpleAdvancedButton()) {
+      await (await this.getSimpleAdvancedButton())?.click()
     } else {
-      console.warn('No BasicAdvancedButton is being displayed to toggle, because no advanced form field is defined.')
+      console.warn('No SimpleAdvancedButton is being displayed to toggle, because no advanced form field is defined.')
     }
   }
 }