From d095c98b13a5eeaa405c51636c04372afe2807b4 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Fri, 6 Aug 2021 12:13:41 +0200 Subject: [PATCH 01/18] 81901: Menu item components as ul > li --- .../admin-sidebar-section.component.html | 4 ++-- .../admin-sidebar-section/admin-sidebar-section.component.ts | 3 ++- .../expandable-admin-sidebar-section.component.html | 4 ++-- .../expandable-admin-sidebar-section.component.ts | 3 ++- .../expandable-navbar-section.component.html | 4 ++-- .../expandable-navbar-section.component.ts | 3 ++- src/app/navbar/navbar-section/navbar-section.component.html | 4 ++-- src/app/navbar/navbar-section/navbar-section.component.ts | 5 +++-- src/themes/dspace/styles/_global-styles.scss | 4 ++-- 9 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html index f6bff2dc8f..4ffb690651 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html @@ -1,4 +1,4 @@ -
  • +
    @@ -7,4 +7,4 @@ {{itemModel.text | translate}}
    -
    • + diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts index a19a1f95e4..040bf0eb74 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts @@ -10,7 +10,8 @@ import { MenuSection } from '../../../shared/menu/menu.reducer'; * Represents a non-expandable section in the admin sidebar */ @Component({ - selector: 'ds-admin-sidebar-section', + /* tslint:disable:component-selector */ + selector: 'li[ds-admin-sidebar-section]', templateUrl: './admin-sidebar-section.component.html', styleUrls: ['./admin-sidebar-section.component.scss'], 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 af014f3e1b..304220d3c4 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 @@ -1,4 +1,4 @@ -
  • @@ -24,4 +24,4 @@
    • - + diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts index 112560de16..df71433bbb 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts @@ -14,7 +14,8 @@ import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorat * Represents a expandable section in the sidebar */ @Component({ - selector: 'ds-expandable-admin-sidebar-section', + /* tslint:disable:component-selector */ + selector: 'li[ds-expandable-admin-sidebar-section]', templateUrl: './expandable-admin-sidebar-section.component.html', styleUrls: ['./expandable-admin-sidebar-section.component.scss'], animations: [rotate, slide, bgColor] diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html index bfefcb5a6c..cb96435b77 100644 --- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html +++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html @@ -1,4 +1,4 @@ -
  • @@ -15,4 +15,4 @@ *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"> -
    • + diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts index 068854d6f8..a0c0240159 100644 --- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts +++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts @@ -11,7 +11,8 @@ import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator' * Represents an expandable section in the navbar */ @Component({ - selector: 'ds-expandable-navbar-section', + /* tslint:disable:component-selector */ + selector: 'li[ds-expandable-navbar-section]', templateUrl: './expandable-navbar-section.component.html', styleUrls: ['./expandable-navbar-section.component.scss'], animations: [slide] diff --git a/src/app/navbar/navbar-section/navbar-section.component.html b/src/app/navbar/navbar-section/navbar-section.component.html index 00461995bc..b5f6848050 100644 --- a/src/app/navbar/navbar-section/navbar-section.component.html +++ b/src/app/navbar/navbar-section/navbar-section.component.html @@ -1,4 +1,4 @@ -
  • +
    -
    • + diff --git a/src/app/navbar/navbar-section/navbar-section.component.ts b/src/app/navbar/navbar-section/navbar-section.component.ts index e1488de3d3..397d635eb8 100644 --- a/src/app/navbar/navbar-section/navbar-section.component.ts +++ b/src/app/navbar/navbar-section/navbar-section.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, Injector, OnInit } from '@angular/core'; +import { Component, HostBinding, Inject, Injector, OnInit } from '@angular/core'; import { MenuSectionComponent } from '../../shared/menu/menu-section/menu-section.component'; import { MenuService } from '../../shared/menu/menu.service'; import { MenuID } from '../../shared/menu/initial-menus-state'; @@ -8,7 +8,8 @@ import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator' * Represents a non-expandable section in the navbar */ @Component({ - selector: 'ds-navbar-section', + /* tslint:disable:component-selector */ + selector: 'li[ds-navbar-section]', templateUrl: './navbar-section.component.html', styleUrls: ['./navbar-section.component.scss'] }) diff --git a/src/themes/dspace/styles/_global-styles.scss b/src/themes/dspace/styles/_global-styles.scss index 72fac11156..8682e3dcdf 100644 --- a/src/themes/dspace/styles/_global-styles.scss +++ b/src/themes/dspace/styles/_global-styles.scss @@ -23,8 +23,8 @@ } header { - ds-navbar-section > li, - ds-expandable-navbar-section > li { + li > .navbar-section, + li > .expandable-navbar-section { display: flex; flex-direction: column; justify-content: center; From 2265de8d4499d26838809d5d1575cbf66f5cb082 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Fri, 6 Aug 2021 13:27:32 +0200 Subject: [PATCH 02/18] 81901: Single link in sidebar menu entries + improved focus ring styling --- .../admin-sidebar-section.component.html | 21 +++++-- .../admin-sidebar.component.html | 37 ++++++----- .../admin-sidebar.component.scss | 62 +++++++++++++++++-- ...dable-admin-sidebar-section.component.html | 44 +++++++------ ...dable-admin-sidebar-section.component.scss | 2 +- 5 files changed, 115 insertions(+), 51 deletions(-) diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html index 4ffb690651..d47032c0fb 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html @@ -1,10 +1,19 @@
    - + +
    +
    +
    +
    + + {{itemModel.text | translate}} + +
    +
    -
    - - {{itemModel.text | translate}} - -
    diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html index d3d8031994..95f9932834 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html @@ -9,19 +9,20 @@ role="navigation" [attr.aria-label]="'menu.header.admin.description' |translate">
    diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/app/admin/admin-sidebar/admin-sidebar.component.scss index e6eb4a7037..59ee61c323 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.scss +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.scss @@ -25,6 +25,11 @@ .navbar-nav { .admin-menu-header { background-color: var(--ds-admin-sidebar-header-bg); + + .sidebar-section { + background-color: inherit; + } + .logo-wrapper { img { height: 20px; @@ -34,6 +39,10 @@ line-height: 1.5; } + .navbar-brand { + margin-right: 0; + } + } } @@ -44,26 +53,67 @@ display: flex; align-content: stretch; background-color: var(--ds-admin-sidebar-bg); + overflow-x: visible; + .nav-item { padding-top: var(--bs-spacer); padding-bottom: var(--bs-spacer); + background-color: inherit; + + &:focus-visible { + // since links fill the whole sidebar, we _inset_ the outline + outline-offset: -4px; + + // replace padding with margins so it doesn't extend over the :focus-visible outline + // → can't remove the padding altogether; the icon needs to fill out + // the collapsed width of the sidebar for the slide animation to look decent. + .shortcut-icon { + padding-left: 0; + padding-right: 0; + margin-left: var(--ds-icon-padding); + margin-right: var(--ds-icon-padding); + } + .logo-wrapper { + margin-right: var(--bs-navbar-padding-x) !important; + } + .navbar-brand { + padding-top: 0; + padding-bottom: 0; + margin-top: var(--bs-navbar-brand-padding-y); + margin-bottom: var(--bs-navbar-brand-padding-y); + } + } } + .shortcut-icon { + background-color: inherit; padding-left: var(--ds-icon-padding); padding-right: var(--ds-icon-padding); - } - .shortcut-icon, .icon-wrapper { - background-color: inherit; z-index: var(--ds-icon-z-index); + align-self: baseline; } + .sidebar-collapsible { + padding-left: 0; + padding-right: var(--bs-spacer); width: var(--ds-sidebar-items-width); position: relative; - a { - padding-right: var(--bs-spacer); - width: 100%; + .toggle { + width: 100%; + } + + ul { + padding-top: var(--bs-spacer); + + // move nested elements over to the left and pad so their :focus-visible outline + // doesn't get cut off by the parent section's icon + margin-left: calc(-1 * var(--bs-spacer)); + li a { + padding-left: var(--bs-spacer); + } } } + &.active > .sidebar-collapsible > .nav-link { color: var(--bs-navbar-dark-active-color); } 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 304220d3c4..a94df21bf7 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 @@ -2,26 +2,32 @@ [@bgColor]="{ value: ((expanded | async) ? 'endBackground' : 'startBackground'), params: {endColor: (sidebarActiveBg | async)}}"> -
    - - - + +
    +
    - - - - - - -
      -
    • - -
      • -
    +
    + + + + +
    +
      +
    • + +
      • +
    +
    diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss index 8670cf19aa..802fade8c1 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss @@ -9,7 +9,7 @@ list-style: disc; color: var(--bs-navbar-dark-color); overflow: hidden; - + margin-bottom: calc(-1 * var(--bs-spacer)); // the bottom-most nav-item is padded, no need for double spacing } .sidebar-collapsible { From 1bad7fae3f7feeae2defe849c97eee44bdff1923 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Fri, 6 Aug 2021 14:38:14 +0200 Subject: [PATCH 03/18] 81901: Set aria-disabled for menu links and sidebar sections --- .../admin-sidebar-section.component.html | 4 +++- .../admin-sidebar-section.component.ts | 3 +++ .../shared/menu/menu-item/link-menu-item.component.html | 7 ++++++- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html index d47032c0fb..f493b63215 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html @@ -1,6 +1,8 @@
    {{item.text | translate}} \ No newline at end of file +{{item.text | translate}} From 4ae526d6b2e7696d4222ac6e3a6cc9b95142a3e3 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Fri, 6 Aug 2021 17:51:57 +0200 Subject: [PATCH 04/18] 81901: Expand/collapse admin sidebar preview on focusin/focusout --- .../admin-sidebar/admin-sidebar.component.ts | 36 ++++++++++++++++--- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts index 53a9ecb2ab..14dd22b821 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts @@ -1,7 +1,7 @@ -import { Component, Injector, OnInit } from '@angular/core'; +import { Component, ElementRef, HostListener, Injector, OnInit } from '@angular/core'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; -import { combineLatest, combineLatest as observableCombineLatest, Observable } from 'rxjs'; -import { first, map, take } from 'rxjs/operators'; +import { combineLatest, combineLatest as observableCombineLatest, Observable, Subject } from 'rxjs'; +import { debounceTime, first, map, take } from 'rxjs/operators'; import { AuthService } from '../../core/auth/auth.service'; import { ScriptDataService } from '../../core/data/processes/script-data.service'; import { slideHorizontal, slideSidebar } from '../../shared/animations/slide'; @@ -60,6 +60,8 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { */ sidebarExpanded: Observable; + focusInOut$: Subject; + constructor(protected menuService: MenuService, protected injector: Injector, private variableService: CSSVariableService, @@ -69,6 +71,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { private scriptDataService: ScriptDataService, ) { super(menuService, injector); + this.focusInOut$ = new Subject(); } /** @@ -89,10 +92,25 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { this.sidebarOpen = !collapsed; this.sidebarClosed = collapsed; }); - this.sidebarExpanded = observableCombineLatest(this.menuCollapsed, this.menuPreviewCollapsed) + this.sidebarExpanded = combineLatest([this.menuCollapsed, this.menuPreviewCollapsed]) .pipe( map(([collapsed, previewCollapsed]) => (!collapsed || !previewCollapsed)) ); + combineLatest([ + this.focusInOut$.pipe(debounceTime(50)), // disregard focusout in situations like --(focusout)-(focusin)-- + this.menuCollapsed, + this.menuPreviewCollapsed, + ]).subscribe(([event, collapsed, previewCollapsed]) => { + if (event && collapsed) { + if (event.type === 'focusin' && previewCollapsed) { + this.expandPreview(event); + this.focusInOut$.next(null); // make sure this event is not the latest one anymore + } else if (event.type === 'focusout' && !previewCollapsed) { + this.collapsePreview(event); + this.focusInOut$.next(null); // make sure this event is not the latest one anymore + } + } + }); } /** @@ -590,6 +608,16 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { }); } + @HostListener('focusin', ['$event']) + public handleFocusIn(event: FocusEvent) { + this.focusInOut$.next(event); + } + + @HostListener('focusout', ['$event']) + public handleFocusOut(event: FocusEvent) { + this.focusInOut$.next(event); + } + /** * Method to change this.collapsed to false when the slide animation ends and is sliding open * @param event The animation event From b84e003f27222d10fd87e7f33bb68e1c9443b112 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Fri, 6 Aug 2021 19:03:26 +0200 Subject: [PATCH 05/18] 81901: Update unit tests --- .../admin-sidebar-section.component.ts | 2 +- .../admin-sidebar.component.spec.ts | 17 +---------------- .../admin-sidebar/admin-sidebar.component.ts | 2 +- ...le-admin-sidebar-section.component.spec.ts | 19 ++----------------- ...xpandable-navbar-section.component.spec.ts | 12 ++++++------ 5 files changed, 11 insertions(+), 41 deletions(-) diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts index bf033bc372..66a4c3b28b 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts @@ -32,7 +32,7 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement } ngOnInit(): void { - this.hasLink = isNotEmpty(this.itemModel.link); + this.hasLink = isNotEmpty(this.itemModel?.link); super.ngOnInit(); } } diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts index 0a9ef512d7..948d7d86bc 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts @@ -113,25 +113,10 @@ describe('AdminSidebarComponent', () => { }); }); - describe('when the collapse icon is clicked', () => { - beforeEach(() => { - spyOn(menuService, 'toggleMenu'); - const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle')).query(By.css('a.shortcut-icon')); - sidebarToggler.triggerEventHandler('click', { - preventDefault: () => {/**/ - } - }); - }); - - it('should call toggleMenu on the menuService', () => { - expect(menuService.toggleMenu).toHaveBeenCalled(); - }); - }); - describe('when the collapse link is clicked', () => { beforeEach(() => { spyOn(menuService, 'toggleMenu'); - const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle')).query(By.css('.sidebar-collapsible')).query(By.css('a')); + const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle > a')); sidebarToggler.triggerEventHandler('click', { preventDefault: () => {/**/ } diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts index 14dd22b821..e7bd804d06 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, HostListener, Injector, OnInit } from '@angular/core'; +import { Component, HostListener, Injector, OnInit } from '@angular/core'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { combineLatest, combineLatest as observableCombineLatest, Observable, Subject } from 'rxjs'; import { debounceTime, first, map, take } from 'rxjs/operators'; diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts index 33374f1f46..bf521bd356 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts @@ -46,29 +46,14 @@ describe('ExpandableAdminSidebarSectionComponent', () => { }); it('should set the right icon', () => { - const icon = fixture.debugElement.query(By.css('.icon-wrapper')).query(By.css('i.fas')); + const icon = fixture.debugElement.query(By.css('.shortcut-icon > i.fas')); expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString); }); - describe('when the icon is clicked', () => { - beforeEach(() => { - spyOn(menuService, 'toggleActiveSection'); - const sidebarToggler = fixture.debugElement.query(By.css('a.shortcut-icon')); - sidebarToggler.triggerEventHandler('click', { - preventDefault: () => {/**/ - } - }); - }); - - it('should call toggleActiveSection on the menuService', () => { - expect(menuService.toggleActiveSection).toHaveBeenCalled(); - }); - }); - describe('when the header text is clicked', () => { beforeEach(() => { spyOn(menuService, 'toggleActiveSection'); - const sidebarToggler = fixture.debugElement.query(By.css('.sidebar-collapsible')).query(By.css('a')); + const sidebarToggler = fixture.debugElement.query(By.css('.sidebar-section > a')); sidebarToggler.triggerEventHandler('click', { preventDefault: () => {/**/ } diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts index 1cc138b53e..8eea76e5c6 100644 --- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts +++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts @@ -49,7 +49,7 @@ describe('ExpandableNavbarSectionComponent', () => { describe('when the mouse enters the section header', () => { beforeEach(() => { spyOn(menuService, 'activateSection'); - const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')); + const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown')); sidebarToggler.triggerEventHandler('mouseenter', { preventDefault: () => {/**/ } @@ -64,7 +64,7 @@ describe('ExpandableNavbarSectionComponent', () => { describe('when the mouse leaves the section header', () => { beforeEach(() => { spyOn(menuService, 'deactivateSection'); - const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')); + const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown')); sidebarToggler.triggerEventHandler('mouseleave', { preventDefault: () => {/**/ } @@ -79,7 +79,7 @@ describe('ExpandableNavbarSectionComponent', () => { describe('when a click occurs on the section header', () => { beforeEach(() => { spyOn(menuService, 'toggleActiveSection'); - const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')).query(By.css('a')); + const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > a')); sidebarToggler.triggerEventHandler('click', { preventDefault: () => {/**/ } @@ -122,7 +122,7 @@ describe('ExpandableNavbarSectionComponent', () => { describe('when the mouse enters the section header', () => { beforeEach(() => { spyOn(menuService, 'activateSection'); - const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')); + const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > a')); sidebarToggler.triggerEventHandler('mouseenter', { preventDefault: () => {/**/ } @@ -137,7 +137,7 @@ describe('ExpandableNavbarSectionComponent', () => { describe('when the mouse leaves the section header', () => { beforeEach(() => { spyOn(menuService, 'deactivateSection'); - const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')); + const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > a')); sidebarToggler.triggerEventHandler('mouseleave', { preventDefault: () => {/**/ } @@ -152,7 +152,7 @@ describe('ExpandableNavbarSectionComponent', () => { describe('when a click occurs on the section header link', () => { beforeEach(() => { spyOn(menuService, 'toggleActiveSection'); - const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')).query(By.css('a')); + const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > a')); sidebarToggler.triggerEventHandler('click', { preventDefault: () => {/**/ } From b32226c5edfaf71942333ce8d6ef3594b8f88418 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Fri, 13 Aug 2021 17:14:54 +0200 Subject: [PATCH 06/18] 81901: Fix keyboard/hover expand/collapse interactions --- .../admin-sidebar.component.html | 5 +- .../admin-sidebar/admin-sidebar.component.ts | 60 ++++++++++++------- 2 files changed, 41 insertions(+), 24 deletions(-) diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html index 95f9932834..a71abbf881 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html @@ -4,8 +4,9 @@ value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'), params: {sidebarWidth: (sidebarWidth | async)} }" (@slideSidebar.done)="finishSlide($event)" (@slideSidebar.start)="startSlide($event)" - *ngIf="menuVisible | async" (mouseenter)="expandPreview($event)" - (mouseleave)="collapsePreview($event)" + *ngIf="menuVisible | async" + (mouseenter)="handleMouseEnter($event)" + (mouseleave)="handleMouseLeave($event)" role="navigation" [attr.aria-label]="'menu.header.admin.description' |translate">
      diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts index e7bd804d06..f0d583744c 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts @@ -1,7 +1,7 @@ import { Component, HostListener, Injector, OnInit } from '@angular/core'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; -import { combineLatest, combineLatest as observableCombineLatest, Observable, Subject } from 'rxjs'; -import { debounceTime, first, map, take } from 'rxjs/operators'; +import { combineLatest, combineLatest as observableCombineLatest, Observable, BehaviorSubject } from 'rxjs'; +import { debounceTime, first, map, take, distinctUntilChanged, withLatestFrom } from 'rxjs/operators'; import { AuthService } from '../../core/auth/auth.service'; import { ScriptDataService } from '../../core/data/processes/script-data.service'; import { slideHorizontal, slideSidebar } from '../../shared/animations/slide'; @@ -60,7 +60,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { */ sidebarExpanded: Observable; - focusInOut$: Subject; + inFocus$: BehaviorSubject; constructor(protected menuService: MenuService, protected injector: Injector, @@ -71,7 +71,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { private scriptDataService: ScriptDataService, ) { super(menuService, injector); - this.focusInOut$ = new Subject(); + this.inFocus$ = new BehaviorSubject(false); } /** @@ -96,18 +96,18 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { .pipe( map(([collapsed, previewCollapsed]) => (!collapsed || !previewCollapsed)) ); - combineLatest([ - this.focusInOut$.pipe(debounceTime(50)), // disregard focusout in situations like --(focusout)-(focusin)-- - this.menuCollapsed, - this.menuPreviewCollapsed, - ]).subscribe(([event, collapsed, previewCollapsed]) => { - if (event && collapsed) { - if (event.type === 'focusin' && previewCollapsed) { - this.expandPreview(event); - this.focusInOut$.next(null); // make sure this event is not the latest one anymore - } else if (event.type === 'focusout' && !previewCollapsed) { - this.collapsePreview(event); - this.focusInOut$.next(null); // make sure this event is not the latest one anymore + this.inFocus$.pipe( + debounceTime(50), + distinctUntilChanged(), // disregard focusout in situations like --(focusout)-(focusin)-- + withLatestFrom( + combineLatest([this.menuCollapsed, this.menuPreviewCollapsed]) + ), + ).subscribe(([inFocus, [collapsed, previewCollapsed]]) => { + if (collapsed) { + if (inFocus && previewCollapsed) { + this.expandPreview(new Event('focusin → expand')); + } else if (!inFocus && !previewCollapsed) { + this.collapsePreview(new Event('focusout → collapse')); } } }); @@ -608,14 +608,30 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { }); } - @HostListener('focusin', ['$event']) - public handleFocusIn(event: FocusEvent) { - this.focusInOut$.next(event); + @HostListener('focusin') + public handleFocusIn() { + this.inFocus$.next(true); } - @HostListener('focusout', ['$event']) - public handleFocusOut(event: FocusEvent) { - this.focusInOut$.next(event); + @HostListener('focusout') + public handleFocusOut() { + this.inFocus$.next(false); + } + + public handleMouseEnter(event: any) { + if (!this.inFocus$.getValue()) { + this.expandPreview(event); + } else { + event.preventDefault(); + } + } + + public handleMouseLeave(event: any) { + if (!this.inFocus$.getValue()) { + this.collapsePreview(event); + } else { + event.preventDefault(); + } } /** From 129ea726e8a3e71adfc589633744faf675070a71 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Mon, 16 Aug 2021 09:37:10 +0200 Subject: [PATCH 07/18] 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 @@
    - +
    diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts index bf521bd356..07a26485a8 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts @@ -10,6 +10,8 @@ import { Component } from '@angular/core'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; import { TranslateModule } from '@ngx-translate/core'; +import { Router } from '@angular/router'; +import { RouterStub } from '../../../shared/testing/router.stub'; describe('ExpandableAdminSidebarSectionComponent', () => { let component: ExpandableAdminSidebarSectionComponent; @@ -53,7 +55,7 @@ describe('ExpandableAdminSidebarSectionComponent', () => { describe('when the header text is clicked', () => { beforeEach(() => { spyOn(menuService, 'toggleActiveSection'); - const sidebarToggler = fixture.debugElement.query(By.css('.sidebar-section > a')); + const sidebarToggler = fixture.debugElement.query(By.css('.sidebar-section > div.nav-item')); sidebarToggler.triggerEventHandler('click', { preventDefault: () => {/**/ } From 7ae26d3ebb35eed6678f33f343ed02dd88383bc4 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Mon, 16 Aug 2021 17:21:38 +0200 Subject: [PATCH 12/18] 81901: Fix expandable section submenu spacing * Selection outlines were cut off by the icon (which needs to be full height for the animation- --- src/app/admin/admin-sidebar/admin-sidebar.component.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/app/admin/admin-sidebar/admin-sidebar.component.scss index 59ee61c323..5ed0142c7f 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.scss +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.scss @@ -105,9 +105,6 @@ ul { padding-top: var(--bs-spacer); - // move nested elements over to the left and pad so their :focus-visible outline - // doesn't get cut off by the parent section's icon - margin-left: calc(-1 * var(--bs-spacer)); li a { padding-left: var(--bs-spacer); } From 2a10f6bf9e95a1e19997c51c4e512e6433ea972e Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Mon, 16 Aug 2021 17:23:27 +0200 Subject: [PATCH 13/18] 81901: AdminSidebarSectionComponent navigate on spacebar --- .../admin-sidebar-section.component.html | 1 + .../admin-sidebar-section.component.ts | 15 ++++++++++++++- ...ndable-admin-sidebar-section.component.spec.ts | 1 + .../expandable-admin-sidebar-section.component.ts | 12 +++++++++--- 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html index f493b63215..7122e62604 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html @@ -5,6 +5,7 @@ [attr.aria-labelledby]="'sidebarName-' + section.id" [title]="('menu.section.icon.' + section.id) | translate" [routerLink]="itemModel.link" + (keyup.space)="navigate($event)" href="javascript:void(0);" >
    diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts index 66a4c3b28b..900ade878e 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts @@ -6,6 +6,7 @@ import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorat import { LinkMenuItemModel } from '../../../shared/menu/menu-item/models/link.model'; import { MenuSection } from '../../../shared/menu/menu.reducer'; import { isNotEmpty } from '../../../shared/empty.util'; +import { Router } from '@angular/router'; /** * Represents a non-expandable section in the admin sidebar @@ -26,7 +27,12 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement menuID: MenuID = MenuID.ADMIN; itemModel; hasLink: boolean; - constructor(@Inject('sectionDataProvider') menuSection: MenuSection, protected menuService: MenuService, protected injector: Injector,) { + constructor( + @Inject('sectionDataProvider') menuSection: MenuSection, + protected menuService: MenuService, + protected injector: Injector, + protected router: Router, + ) { super(menuSection, menuService, injector); this.itemModel = menuSection.model as LinkMenuItemModel; } @@ -35,4 +41,11 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement this.hasLink = isNotEmpty(this.itemModel?.link); super.ngOnInit(); } + + navigate(event: any): void { + event.stopPropagation(); + if (this.hasLink) { + this.router.navigate(this.itemModel.link); + } + } } diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts index 07a26485a8..b1f3a63c06 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts @@ -26,6 +26,7 @@ describe('ExpandableAdminSidebarSectionComponent', () => { { provide: 'sectionDataProvider', useValue: { icon: iconString } }, { provide: MenuService, useValue: menuService }, { provide: CSSVariableService, useClass: CSSVariableServiceStub }, + { provide: Router, useValue: new RouterStub() }, ] }).overrideComponent(ExpandableAdminSidebarSectionComponent, { set: { diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts index df71433bbb..aaa6a85c51 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts @@ -9,6 +9,7 @@ import { MenuService } from '../../../shared/menu/menu.service'; import { combineLatest as combineLatestObservable, Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator'; +import { Router } from '@angular/router'; /** * Represents a expandable section in the sidebar @@ -49,9 +50,14 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC */ expanded: Observable; - constructor(@Inject('sectionDataProvider') menuSection, protected menuService: MenuService, - private variableService: CSSVariableService, protected injector: Injector) { - super(menuSection, menuService, injector); + constructor( + @Inject('sectionDataProvider') menuSection, + protected menuService: MenuService, + private variableService: CSSVariableService, + protected injector: Injector, + protected router: Router, + ) { + super(menuSection, menuService, injector, router); } /** From ab6e8be6b133bd10bd03c331b148d09e324a3188 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Mon, 16 Aug 2021 17:53:17 +0200 Subject: [PATCH 14/18] Remove unused import --- src/app/navbar/navbar-section/navbar-section.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/navbar/navbar-section/navbar-section.component.ts b/src/app/navbar/navbar-section/navbar-section.component.ts index 397d635eb8..89d1653bbc 100644 --- a/src/app/navbar/navbar-section/navbar-section.component.ts +++ b/src/app/navbar/navbar-section/navbar-section.component.ts @@ -1,4 +1,4 @@ -import { Component, HostBinding, Inject, Injector, OnInit } from '@angular/core'; +import { Component, Inject, Injector, OnInit } from '@angular/core'; import { MenuSectionComponent } from '../../shared/menu/menu-section/menu-section.component'; import { MenuService } from '../../shared/menu/menu.service'; import { MenuID } from '../../shared/menu/initial-menus-state'; From 9d66bc5167282c6394ec19481c76e0a97e1bdfef Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Fri, 20 Aug 2021 09:43:36 +0200 Subject: [PATCH 15/18] 81901: Use sidebar section text for tooltip --- src/app/shared/menu/menu-item/link-menu-item.component.html | 1 + src/app/shared/menu/menu-item/onclick-menu-item.component.html | 1 + 2 files changed, 2 insertions(+) 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 52ec04a982..022133379b 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 @@ -1,6 +1,7 @@ {{item.text | translate}} From 3c4f3e9104d84149ab57de77f8a6a29d1728c47f Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Fri, 20 Aug 2021 09:46:14 +0200 Subject: [PATCH 16/18] 81901: Fix navigation/onclick function ~ enter key --- .../admin-sidebar-section.component.html | 1 + .../admin-sidebar-section.component.ts | 2 +- src/app/admin/admin-sidebar/admin-sidebar.component.html | 2 +- .../expandable-admin-sidebar-section.component.html | 3 ++- src/app/shared/menu/menu-item/link-menu-item.component.html | 2 ++ src/app/shared/menu/menu-item/link-menu-item.component.ts | 3 ++- .../shared/menu/menu-item/onclick-menu-item.component.html | 5 +++-- .../shared/menu/menu-item/onclick-menu-item.component.ts | 6 ++++++ 8 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html index 7122e62604..8706b40ee0 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html @@ -6,6 +6,7 @@ [title]="('menu.section.icon.' + section.id) | translate" [routerLink]="itemModel.link" (keyup.space)="navigate($event)" + (keyup.enter)="navigate($event)" href="javascript:void(0);" >
    diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts index 900ade878e..50f9f8a79e 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts @@ -43,7 +43,7 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement } navigate(event: any): void { - event.stopPropagation(); + event.preventDefault(); if (this.hasLink) { this.router.navigate(this.itemModel.link); } diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html index 188f2d86b0..84402c64e9 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html @@ -37,7 +37,7 @@
    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 022133379b..4bbd5edb08 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 @@ -3,6 +3,8 @@ [attr.aria-disabled]="!hasLink" [title]="item.text" [routerLink]="getRouterLink()" + (click)="$event.stopPropagation()" (keyup.space)="navigate($event)" + (keyup.enter)="navigate($event)" href="javascript:void(0);" >{{item.text | translate}} 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 86fe33fd47..42314bd362 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 @@ -36,10 +36,11 @@ export class LinkMenuItemComponent implements OnInit { } navigate(event: any) { - event.stopPropagation(); + event.preventDefault(); if (this.getRouterLink()) { this.router.navigate([this.getRouterLink()]); } + event.stopPropagation(); } } 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 c377a8cd0c..bf16a52c29 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 @@ -2,6 +2,7 @@ class="nav-item nav-link" role="button" [title]="item.text" - (click)="item.function()" - (keyup.space)="$event.stopPropagation(); item.function()" + (click)="activate($event)" + (keyup.space)="activate($event)" + (keyup.enter)="activate($event)" >{{item.text | translate}} diff --git a/src/app/shared/menu/menu-item/onclick-menu-item.component.ts b/src/app/shared/menu/menu-item/onclick-menu-item.component.ts index 95b896ed64..002bfbc819 100644 --- a/src/app/shared/menu/menu-item/onclick-menu-item.component.ts +++ b/src/app/shared/menu/menu-item/onclick-menu-item.component.ts @@ -17,4 +17,10 @@ export class OnClickMenuItemComponent { constructor(@Inject('itemModelProvider') item: OnClickMenuItemModel) { this.item = item; } + + public activate(event: any) { + event.preventDefault(); + this.item.function(); + event.stopPropagation(); + } } From 9cb8a77bf8d1e1302a10acfc87d1f3958c992031 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Fri, 20 Aug 2021 18:24:32 +0200 Subject: [PATCH 17/18] 81901: Fix OnClickMenuItemComponent unit test --- .../shared/menu/menu-item/onclick-menu-item.component.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/shared/menu/menu-item/onclick-menu-item.component.spec.ts b/src/app/shared/menu/menu-item/onclick-menu-item.component.spec.ts index c36b46a20d..18ae66b23d 100644 --- a/src/app/shared/menu/menu-item/onclick-menu-item.component.spec.ts +++ b/src/app/shared/menu/menu-item/onclick-menu-item.component.spec.ts @@ -44,8 +44,8 @@ describe('OnClickMenuItemComponent', () => { expect(textContent).toEqual(text); }); - it('should contain call the function on the item when clicked', () => { - debugElement.query(By.css('a.nav-link')).triggerEventHandler('click', {}); + it('should call the function on the item when clicked', () => { + debugElement.query(By.css('a.nav-link')).triggerEventHandler('click', new Event(('click'))); expect(item.function).toHaveBeenCalled(); }); }); From 714ea5d8f9d526e90bcfa650a81475e6bd6e90f5 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Mon, 23 Aug 2021 15:45:22 +0200 Subject: [PATCH 18/18] 81901: Add in forgotten translate pipe --- src/app/shared/menu/menu-item/link-menu-item.component.html | 2 +- src/app/shared/menu/menu-item/onclick-menu-item.component.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 4bbd5edb08..b2cc73bcf4 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 @@ -1,7 +1,7 @@