Navbar theming & accessibility fixes

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;

src/app/shared/auth-nav-menu/user-menu/user-menu.component.html

@@ -6,8 +6,8 @@
     [ngClass]="inExpandableNavbar ? 'user-menu-mobile pb-2 mb-2 border-bottom' : 'user-menu-dropdown'"
     [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" id="user-menu-dropdown">
     <li class="ds-menu-item-wrapper username-email-wrapper" role="presentation">
-      {{dsoNameService.getName(user$ | async)}}<br>
-      <span class="text-muted">{{(user$ | async)?.email}}</span>
+      <span class="username-wrapper">{{dsoNameService.getName(user$ | async)}}<br></span>
+      <span class="email-wrapper">{{(user$ | async)?.email}}</span>
     </li>
     <li class="ds-menu-item-wrapper" role="presentation" (click)="onMenuItemClick()">
       <a class="ds-menu-item" role="menuitem"

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

@@ -4,42 +4,33 @@
     margin: 0;
     padding: 0;
 
-    &.user-menu-dropdown {
-      .ds-menu-item-wrapper {
-        a.ds-menu-item, &.username-email-wrapper {
-          padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-dropdown-padding);
-        }
-
-        a.ds-menu-item {
-          display: block;
-          color: var(--ds-expandable-navbar-link-color);
-          &:hover {
-            color: var(--ds-expandable-navbar-link-color-hover);
-            background-color: var(--ds-user-menu-dropdown-link-background-hover);
-          }
-        }
-      }
+    .username-email-wrapper, .ds-menu-item {
+      display: block;
+      padding: var(--ds-user-menu-item-padding);
+      width: 100%;
     }
 
-    &.user-menu-mobile {
-      .ds-menu-item-wrapper {
-        padding-top: var(--ds-user-menu-item-vertical-padding);
-        padding-bottom: var(--ds-user-menu-item-vertical-padding);
+    .username-email-wrapper {
+      background-color: var(--ds-user-menu-user-info-bg);
+      padding: var(--ds-user-menu-item-padding);
+
+      .username-wrapper {
+        color: var(--ds-user-menu-username-color);
       }
 
-      .ds-menu-item {
-        display: inline-block;
+      .email-wrapper {
+        color: var(--ds-user-menu-email-color);
       }
+    }
 
-      .ds-menu-item, .ds-menu-toggler-wrapper {
-        color: var(--ds-expandable-navbar-link-color) !important;
+    .ds-menu-item {
+      color: var(--ds-user-menu-dropdown-link-color);
+      background-color: var(--ds-user-menu-dropdown-link-bg);
 
-        &:hover, &:focus {
-          color: var(--ds-expandable-navbar-link-background-hover) !important;
-        }
+      &:hover, &:focus {
+        color: var(--ds-user-menu-dropdown-link-color-hover);
+        background-color: var(--ds-user-menu-dropdown-link-bg-hover);
       }
-
     }
   }
-
 }

src/styles/_bootstrap_variables.scss

@@ -65,9 +65,9 @@ $pagination-disabled-bg: white;
 
 $icon-font-family: "Font Awesome 6 Free"; /* Define the font-family for icons */
 
-$border-radius: 0.25em;
+$border-radius: 0.25em !default;
 
-$bs-border-radius-lg: 0.3rem;
+$border-radius-lg: 0.3rem !default;
 
 $badge-padding-x: 0.4em;
 $badge-padding-y: 0.25em;
@@ -89,11 +89,14 @@ $ds-header-icon-color: $link-color !default;
 $ds-header-icon-color-hover: $link-hover-color !default;
 
 $ds-navbar-bg: #fff !default;
-$ds-navbar-dropdown-bg: #fff !default;
 $ds-expandable-navbar-bg: #fff !default;
 $ds-navbar-link-color: $link-color !default;
 $ds-navbar-link-color-hover: #{darken($ds-navbar-link-color, 15%)} !default;
 
+$ds-user-menu-bg: #fff !default;
+$ds-user-menu-link-color: $link-color !default;
+$ds-user-menu-link-color-hover: #{darken($ds-user-menu-link-color, 15%)} !default;
+
 $ds-slider-color: darken(#94BA65, 17%) !default;
 $ds-slider-handle-color: darken(#2B4E72, 17%) !default;
 

src/styles/_bootstrap_variables_mapping.scss

@@ -89,7 +89,7 @@
   --bs-zindex-popover: #{$zindex-popover};
   --bs-zindex-sticky: #{$zindex-sticky};
 
-  --bs-border-radius-lg: #{$bs-border-radius-lg};
+  --bs-border-radius-lg: #{$border-radius-lg};
 
 }