[ENG-9073] Search: ARIA attributes must conform to valid values (#830)

- Ticket: [ENG-9073]
- Feature flag: n/a

## Summary of Changes
1. Changed tabs to buttons to fix the accessibility issue.

Author: nsemets

src/app/core/components/nav-menu/nav-menu.component.ts

@@ -78,9 +78,7 @@ export class NavMenuComponent {
 
     const items = updateMenuItems(filtered, routeContext);
 
-    items.forEach((item) => {
-      item.label = item.label ? this.translateService.instant(item.label) : item.label;
-    });
+    this.translateMenuItems(items);
 
     return items;
   });
@@ -138,4 +136,16 @@ export class NavMenuComponent {
 
   readonly hasVisibleChildren = (item: CustomMenuItem): boolean =>
     Array.isArray(item.items) && item.items.some((child) => !!child.visible);
+
+  private translateMenuItems(items: CustomMenuItem[]): void {
+    items.forEach((item) => {
+      if (item.label) {
+        item.label = this.translateService.instant(item.label);
+      }
+
+      if (item.items && item.items.length > 0) {
+        this.translateMenuItems(item.items);
+      }
+    });
+  }
 }

src/app/shared/components/search-results-container/search-results-container.component.html

@@ -1,12 +1,19 @@
 <div class="flex flex-column flex-1 w-full" [class.pt-6]="showTabs()">
   @if (showTabs()) {
-    <p-tabs [value]="selectedTab()" (valueChange)="selectTab(+$event)" class="flex-1 px-3 hidden md:px-5 md:inline">
-      <p-tablist>
-        @for (item of tabOptions(); track $index) {
-          <p-tab [value]="item.value">{{ item.label | translate }}</p-tab>
-        }
-      </p-tablist>
-    </p-tabs>
+    <nav class="align-items-center flex-1 px-3 hidden md:px-5 md:flex">
+      @for (item of tabOptions(); track $index) {
+        <p-button
+          class="tab-btn border-round-top-xl"
+          [class.active]="selectedTab() === item.value"
+          link
+          styleClass="font-semibold"
+          [attr.aria-selected]="selectedTab() === item.value"
+          (onClick)="selectTab(item.value)"
+        >
+          {{ item.label | translate }}
+        </p-button>
+      }
+    </nav>
   }
   <div class="flex flex-column gap-3 py-4 px-3 md:px-5 xl:px-4 bg-white">
     <div class="flex justify-content-between align-items-start column-gap-3">

src/app/shared/components/search-results-container/search-results-container.component.scss

@@ -2,6 +2,16 @@
   color: var(--pr-blue-1);
 }
 
+.tab-btn {
+  --p-button-link-color: var(--dark-blue-1);
+  --p-button-padding-x: 1.5rem;
+  --p-button-padding-y: 0.5rem;
+
+  &.active {
+    background-color: var(--white);
+  }
+}
+
 .sort-card {
   display: flex;
   align-items: center;

src/app/shared/components/search-results-container/search-results-container.component.ts

@@ -2,7 +2,6 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Select } from 'primeng/select';
-import { Tab, TabList, Tabs } from 'primeng/tabs';
 
 import { NgTemplateOutlet } from '@angular/common';
 import {
@@ -38,9 +37,6 @@ import { SelectComponent } from '../select/select.component';
     TranslatePipe,
     SelectComponent,
     NgTemplateOutlet,
-    Tab,
-    TabList,
-    Tabs,
     LoadingSpinnerComponent,
   ],
   templateUrl: './search-results-container.component.html',
@@ -85,6 +81,10 @@ export class SearchResultsContainerComponent {
   }
 
   selectTab(value?: ResourceType): void {
+    if (value === this.selectedTab()) {
+      return;
+    }
+
     this.tabChanged.emit(value !== undefined ? value : this.selectedTab());
   }