81901: Enable spacebar toggling for admin sidebar items

src/app/admin/admin-sidebar/admin-sidebar.component.html

@@ -36,7 +36,9 @@
         <div class="sidebar-section" id="sidebar-collapse-toggle">
             <a class="nav-item nav-link sidebar-section d-flex flex-row flex-nowrap"
                href="javascript:void(0);"
-               (click)="toggle($event)">
+               (click)="toggle($event)"
+               (keyup.space)="$event.stopPropagation(); toggle($event)"
+            >
               <div class="shortcut-icon">
                 <i *ngIf="(menuCollapsed | async)" class="fas fa-fw fa-angle-double-right"
                    [title]="'menu.section.icon.pin' | translate"></i>

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html

@@ -3,9 +3,10 @@
      value: ((expanded | async) ? 'endBackground' : 'startBackground'),
      params: {endColor: (sidebarActiveBg | async)}}">
   <a class="nav-item nav-link d-flex flex-row flex-nowrap"
-     attr.aria.labelledby="sidebarName-{{section.id}}"
+     attr.aria-labelledby="sidebarName-{{section.id}}"
      [title]="('menu.section.icon.' + section.id) | translate"
      (click)="toggleSection($event)"
+     (keyup.space)="$event.stopPropagation(); toggleSection($event)"
      href="javascript:void(0);"
   >
     <div class="shortcut-icon">

src/app/shared/menu/menu-item/link-menu-item.component.html

@@ -2,5 +2,6 @@
    [ngClass]="{ 'disabled': !hasLink }"
    [attr.aria-disabled]="!hasLink"
    [routerLink]="getRouterLink()"
+   (keyup.space)="navigate($event)"
    href="javascript:void(0);"
 >{{item.text | translate}}</a>

src/app/shared/menu/menu-item/link-menu-item.component.spec.ts

@@ -5,6 +5,8 @@ import { By } from '@angular/platform-browser';
 import { LinkMenuItemComponent } from './link-menu-item.component';
 import { RouterLinkDirectiveStub } from '../../testing/router-link-directive.stub';
 import { environment } from '../../../../environments/environment';
+import { RouterStub } from '../../testing/router.stub';
+import { Router } from '@angular/router';
 
 describe('LinkMenuItemComponent', () => {
   let component: LinkMenuItemComponent;
@@ -25,6 +27,7 @@ describe('LinkMenuItemComponent', () => {
       declarations: [LinkMenuItemComponent, RouterLinkDirectiveStub],
       providers: [
         { provide: 'itemModelProvider', useValue: { text: text, link: link } },
+        { provide: Router, useValue: RouterStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })

src/app/shared/menu/menu-item/link-menu-item.component.ts

@@ -4,6 +4,7 @@ import { MenuItemType } from '../initial-menus-state';
 import { rendersMenuItemForType } from '../menu-item.decorator';
 import { isNotEmpty } from '../../empty.util';
 import { environment } from '../../../../environments/environment';
+import { Router } from '@angular/router';
 
 /**
  * Component that renders a menu section of type LINK
@@ -16,7 +17,10 @@ import { environment } from '../../../../environments/environment';
 export class LinkMenuItemComponent implements OnInit {
   item: LinkMenuItemModel;
   hasLink: boolean;
-  constructor(@Inject('itemModelProvider') item: LinkMenuItemModel) {
+  constructor(
+    @Inject('itemModelProvider') item: LinkMenuItemModel,
+    private router: Router,
+  ) {
     this.item = item;
   }
 
@@ -31,4 +35,11 @@ export class LinkMenuItemComponent implements OnInit {
     return undefined;
   }
 
+  navigate(event: any) {
+    event.stopPropagation();
+    if (this.getRouterLink()) {
+      this.router.navigate([this.getRouterLink()]);
+    }
+  }
+
 }

src/app/shared/menu/menu-item/onclick-menu-item.component.html

@@ -1 +1,6 @@
-<a href="javascript:void(0);" class="nav-item nav-link" role="button" (click)="item.function()">{{item.text | translate}}</a>
+<a href="javascript:void(0);"
+   class="nav-item nav-link"
+   role="button"
+   (click)="item.function()"
+   (keyup.space)="$event.stopPropagation(); item.function()"
+>{{item.text | translate}}</a>