From 129ea726e8a3e71adfc589633744faf675070a71 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Mon, 16 Aug 2021 09:37:10 +0200
Subject: [PATCH] 81901: Enable spacebar toggling for admin sidebar items

---
 .../admin-sidebar/admin-sidebar.component.html      |  4 +++-
 .../expandable-admin-sidebar-section.component.html |  3 ++-
 .../menu/menu-item/link-menu-item.component.html    |  1 +
 .../menu/menu-item/link-menu-item.component.spec.ts |  3 +++
 .../menu/menu-item/link-menu-item.component.ts      | 13 ++++++++++++-
 .../menu/menu-item/onclick-menu-item.component.html |  7 ++++++-
 6 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html
index a71abbf881..76d1af35ba 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.html
+++ b/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>
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
index a94df21bf7..cb56d84668 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
+++ b/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">
diff --git a/src/app/shared/menu/menu-item/link-menu-item.component.html b/src/app/shared/menu/menu-item/link-menu-item.component.html
index 705c04a62a..52ec04a982 100644
--- a/src/app/shared/menu/menu-item/link-menu-item.component.html
+++ b/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>
diff --git a/src/app/shared/menu/menu-item/link-menu-item.component.spec.ts b/src/app/shared/menu/menu-item/link-menu-item.component.spec.ts
index 43e17b8f03..c15cd08725 100644
--- a/src/app/shared/menu/menu-item/link-menu-item.component.spec.ts
+++ b/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]
     })
diff --git a/src/app/shared/menu/menu-item/link-menu-item.component.ts b/src/app/shared/menu/menu-item/link-menu-item.component.ts
index e5b66c5aab..86fe33fd47 100644
--- a/src/app/shared/menu/menu-item/link-menu-item.component.ts
+++ b/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()]);
+    }
+  }
+
 }
diff --git a/src/app/shared/menu/menu-item/onclick-menu-item.component.html b/src/app/shared/menu/menu-item/onclick-menu-item.component.html
index 950b80f10f..e42752fcad 100644
--- a/src/app/shared/menu/menu-item/onclick-menu-item.component.html
+++ b/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>
\ No newline at end of file
+<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>