Merge branch 'css-navbar-fixes_contribute-9.0' into css-navbar-fixes_contribute-main

# Conflicts:
#	src/app/info/accessibility-settings/accessibility-settings.component.html
#	src/app/search-navbar/search-navbar.component.html

Author: alexandrevryghem

src/app/breadcrumbs/breadcrumbs.component.html

@@ -3,7 +3,7 @@
     <nav aria-label="breadcrumb" class="nav-breadcrumb">
       <ol class="container breadcrumb my-0">
         <ng-container
-        *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container>
+        *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/home'}"></ng-container>
         @for (bc of breadcrumbs; track bc; let last = $last) {
           <ng-container *ngTemplateOutlet="!last ? breadcrumb : activeBreadcrumb; context: bc"></ng-container>
         }

src/app/breadcrumbs/breadcrumbs.component.spec.ts

@@ -75,7 +75,7 @@ describe('BreadcrumbsComponent', () => {
   it('should render the breadcrumbs', () => {
     const breadcrumbs = fixture.debugElement.queryAll(By.css('.breadcrumb-item'));
     expect(breadcrumbs.length).toBe(3);
-    expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/');
+    expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/home');
     expectBreadcrumb(breadcrumbs[1], 'bc 1', '/example.com');
     expectBreadcrumb(breadcrumbs[2].query(By.css('.text-truncate')), 'bc 2', null);
   });

src/app/header-nav-wrapper/header-navbar-wrapper.component.scss

@@ -1,6 +1,16 @@
 :host {
   position: relative;
   div#header-navbar-wrapper {
-    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
+    border-bottom: var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color) solid;
+  }
+
+  ::ng-deep {
+    nav#desktop-navbar {
+      .ds-menu-item-wrapper {
+        &:hover, &:focus {
+          background-color: var(--ds-navbar-link-bg-hover);
+        }
+      }
+    }
   }
 }

src/app/info/accessibility-settings/accessibility-settings.component.html

@@ -1,14 +1,14 @@
 <div class="container">
-  <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
+  <h1>{{ 'info.accessibility-settings.title' | translate }}</h1>
 
   <form>
     <div class="mb-3 row">
-      <label [for]="'disableNotificationTimeOutInput'" class="col-sm-4 col-form-label">
+      <span aria-hidden="true" class="col-sm-4 col-form-label">
         {{ 'info.accessibility-settings.disableNotificationTimeOut.label' | translate }}
-      </label>
+      </span>
 
       <div class="col-sm-4">
-        <ui-switch [id]="'disableNotificationTimeOutInput'"
+        <ui-switch [ariaLabel]="'info.accessibility-settings.disableNotificationTimeOut.label' | translate"
                    [(ngModel)]="formValues.notificationTimeOutEnabled"
                    [ngModelOptions]="{ standalone: true }"
         ></ui-switch>
@@ -33,8 +33,7 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
           [ngClass]="{'is-invalid': !settingsService.isValid('notificationTimeOut', formValues)}"
           [min]="1"
           [readOnly]="!formValues.notificationTimeOutEnabled"
-          [(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }"
-          [attr.aria-describedby]="'notificationTimeOutHint'">
+          [(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }">
         <div class="invalid-feedback" [ngClass]="{ 'd-block': !settingsService.isValid('notificationTimeOut', formValues) }">
           {{ 'info.accessibility-settings.notificationTimeOut.invalid' | translate }}
         </div>
@@ -59,8 +58,7 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
         <input [type]="'number'" [id]="'liveRegionTimeOutInput'" class="form-control"
           [ngClass]="{'is-invalid': !settingsService.isValid('liveRegionTimeOut', formValues)}"
           [min]="1"
-          [(ngModel)]="formValues.liveRegionTimeOut" [ngModelOptions]="{ standalone: true }"
-          [attr.aria-describedby]="'liveRegionTimeOutHint'">
+          [(ngModel)]="formValues.liveRegionTimeOut" [ngModelOptions]="{ standalone: true }">
         <div class="invalid-feedback" [ngClass]="{ 'd-block': !settingsService.isValid('liveRegionTimeOut', formValues) }">
           {{ 'info.accessibility-settings.liveRegionTimeOut.invalid' | translate }}
         </div>

src/app/info/feedback/feedback-form/feedback-form.component.html

@@ -6,7 +6,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
       <div class="row mt-3">
         <div class="control-group col-sm-12">
             <label class="control-label form-label" for="email">{{ 'info.feedback.email-label' | translate }}&nbsp;</label>
-          <input id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus" title="{{ 'info.feedback.email_help' | translate }}">
+          <input autocomplete="email" id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus">
           <small class="text-muted">{{ 'info.feedback.email_help' | translate }}</small>
         </div>
       </div>
@@ -27,7 +27,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
       <div class="row mt-3">
         <div class="control-group col-sm-12">
             <label class="control-label form-label" for="comments">{{ 'info.feedback.comments' | translate }}:&nbsp;</label>
-          <textarea id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea>
+          <textarea autocomplete="off" id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea>
         </div>
       </div>
 
@@ -44,7 +44,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
       <div class="row mt-3">
         <div class="control-group col-sm-12">
             <label class="control-label form-labe" for="page">{{ 'info.feedback.page-label' | translate }}&nbsp;</label>
-          <input id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus" title="{{ 'info.feedback.page_help' | translate }}">
+          <input autocomplete="off" id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus">
           <small class="text-muted">{{ 'info.feedback.page_help' | translate }}</small>
         </div>
       </div>

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html

@@ -28,7 +28,7 @@
         [dsHoverOutsideOfParentSelector]="'#expandable-navbar-section-' + section.id"
         (dsHoverOutside)="deactivateSection($event, false)"
         role="menu"
-        class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
+        class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0">
         <div @slide role="presentation">
           @for (subSection of (subSections$ | async); track subSection) {
             <div class="text-nowrap" role="presentation">

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss

@@ -7,14 +7,19 @@
     overflow: hidden;
     min-width: 100%;
     top: 100%;
-    @include media-breakpoint-down(xs) {
+    padding: var(--ds-expandable-navbar-padding);
+
+    @include media-breakpoint-down(md) {
       border: 0;
-      background-color: var(--ds-expandable-navbar-bg);
+      border-radius: 0;
     }
     @include media-breakpoint-up(md) {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
-      background-color: var(--ds-navbar-dropdown-bg);
+    }
+
+    ::ng-deep .ds-menu-item {
+      padding: var(--ds-expandable-navbar-item-padding);
     }
   }
 

src/app/navbar/navbar.component.scss

@@ -10,7 +10,7 @@
   /** Mobile menu styling **/
   @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
     .navbar {
-      width: 100vw;
+      width: 100%;
       background-color: var(--bs-white);
       position: absolute;
       overflow: hidden;
@@ -19,18 +19,11 @@
       &.open {
         height: auto;
         min-height: 100vh; //doesn't matter because wrapper is sticky
-        border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
+        border-bottom: var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
       }
     }
   }
 
-  @media screen and (min-width: map-get($grid-breakpoints, md)) {
-    .reset-padding-md {
-      margin-left: calc(var(--bs-spacer) / -1);
-      margin-right: calc(var(--bs-spacer) / -1);
-    }
-  }
-
   /* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
   .navbar-expand-md.navbar-container {
     @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
@@ -42,23 +35,48 @@
   }
 
   #main-navbar ::ng-deep {
-    .ds-menu-item, .ds-menu-toggler-wrapper {
-      white-space: nowrap;
+    .ds-menu-toggler-wrapper {
       text-decoration: none;
     }
 
-    .dropdown-menu {
-      padding: 0.5rem !important;
-    }
-
     .ds-menu-item {
+      text-decoration: none;
       display: block;
+      width: 100%;
+
+      &:not(.dropdown-menu .ds-menu-item) {
+        padding: var(--ds-navbar-item-padding);
+      }
+    }
+  }
+
+  #main-navbar ::ng-deep .ds-menu-item-wrapper:not(ds-user-menu .ds-menu-item-wrapper) {
+    background-color: var(--ds-navbar-link-bg);
+
+    .toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
       color: var(--ds-navbar-link-color);
-      padding: 0.5rem 0;
+    }
+
+    &:hover, &:focus {
+      background-color: var(--ds-navbar-link-bg-hover);
 
-      &:hover, &:focus {
+      .toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
         color: var(--ds-navbar-link-color-hover);
       }
+
+      .dropdown-menu {
+        background-color: var(--ds-expandable-navbar-bg);
+
+        .ds-menu-item {
+          color: var(--ds-expandable-navbar-link-color);
+          background-color: var(--ds-expandable-navbar-link-bg);
+
+          &:hover, &:focus {
+            color: var(--ds-expandable-navbar-link-color-hover);
+            background-color: var(--ds-expandable-navbar-link-bg-hover);
+          }
+        }
+      }
     }
   }
 }

src/app/search-navbar/search-navbar.component.html

@@ -1,8 +1,9 @@
-<div [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
+<div (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
-    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
+    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
+             autocomplete="off"
              class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-end p1"
              [class.display]="searchExpanded ? 'inline-block' : 'none'"
              [tabIndex]="searchExpanded ? 0 : -1"

src/app/shared/auth-nav-menu/auth-nav-menu.component.scss

@@ -7,6 +7,10 @@
   min-height: 75px;
 }
 
+#logoutDropdownMenu {
+  background-color: var(--ds-user-menu-bg);
+}
+
 .dropdown-item.active, .dropdown-item:active,
 .dropdown-item:hover, .dropdown-item:focus {
   background-color: transparent !important;