EUI-8764 Common Lib - Accessibility fixes

package.json

@@ -76,7 +76,7 @@
     "@hmcts/frontend": "0.0.50-alpha",
     "@hmcts/nodejs-healthcheck": "1.7.0",
     "@hmcts/properties-volume": "0.0.13",
-    "@hmcts/rpx-xui-common-lib": "1.9.0-route-expected-feature-2",
+    "@hmcts/rpx-xui-common-lib": "1.9.1-accessibility-fixes-v2",
     "@hmcts/rpx-xui-node-lib": "2.27.1",
     "@ng-idle/core": "^10.0.0",
     "@ng-idle/keepalive": "^10.0.0",

src/app/components/hmcts-global-header/hmcts-global-header.component.spec.ts

@@ -67,7 +67,6 @@ describe('HmctsGlobalHeaderComponent', () => {
     component.headerTitle = { ...component.headerTitle, hideBranding: false };
     fixture.detectChanges();
     const headerTitle = fixture.debugElement.nativeElement.querySelector('.govuk-header__logotype-text');
-    expect(headerTitle).toBeDefined();
     expect(headerTitle).not.toBeNull();
     expect(headerTitle.textContent).toContain('MyHMCTS');
     expect(component.headerTitle.hideBranding).toBeFalsy();

src/app/containers/app/app.component.html

@@ -1,4 +1,4 @@
-<xuilib-cookie-banner 
+<xuilib-cookie-banner
   [identifier]="cookieName"
   [appName]="'MyHMCTS'"
   *ngIf="isCookieBannerVisible"
@@ -8,7 +8,6 @@
 
 <a [routerLink]="" fragment="{{mainContentId}}" class="govuk-skip-link" (click)="onFocusMainContent()">Skip to main content</a>
 <app-loader></app-loader>
-<title>{{pageTitle$ | async}}</title>
 
 <app-header
   [navItems]="navItems$ | async"

src/app/containers/app/app.component.ts

@@ -1,12 +1,12 @@
 import { Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 import { CookieService, FeatureToggleService, FeatureUser, GoogleAnalyticsService, ManageSessionServices } from '@hmcts/rpx-xui-common-lib';
-import { select, Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 import { Observable, Subscription } from 'rxjs';
-import { LoggerService } from '../../../shared/services/logger.service';
-
 import { AppConstants } from '../../../app/app.constants';
-import { EnvironmentConfig, ENVIRONMENT_CONFIG } from '../../../models/environmentConfig.model';
+import { ENVIRONMENT_CONFIG, EnvironmentConfig } from '../../../models/environmentConfig.model';
 import { HeadersService } from '../../../shared/services/headers.service';
+import { LoggerService } from '../../../shared/services/logger.service';
 import { UserService } from '../../../user-profile/services/user.service';
 import * as fromUserProfile from '../../../user-profile/store';
 import { AppTitlesModel } from '../../models/app-titles.model';
@@ -40,6 +40,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public cookieName;
   public isCookieBannerVisible: boolean = false;
   private cookieBannerEnabledSubscription: Subscription;
+  private pageTitleSubscription: Subscription;
 
   private cookieBannerEnabled: boolean = false;
   constructor(
@@ -52,6 +53,7 @@ export class AppComponent implements OnInit, OnDestroy {
     private readonly idleService: ManageSessionServices,
     private readonly loggerService: LoggerService,
     private readonly cookieService: CookieService,
+    private titleService: Title
   ) {}
 
   public ngOnInit(): void {
@@ -73,6 +75,11 @@ export class AppComponent implements OnInit, OnDestroy {
         this.store.dispatch(new fromRoot.SetPageTitle(rootState.state.url));
       }
     });
+
+    this.pageTitleSubscription = this.pageTitle$.subscribe((title) => {
+      this.titleService.setTitle(title? title : 'Manage organisation');
+    });
+
     if (this.headersService.isAuthenticated()) {
       this.userService.getUserDetails().subscribe((user) => {
         const featureUser: FeatureUser = {
@@ -97,9 +104,8 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   public ngOnDestroy(): void {
-    if (this.cookieBannerEnabledSubscription) {
-      this.cookieBannerEnabledSubscription.unsubscribe();
-    }
+    this.cookieBannerEnabledSubscription?.unsubscribe();
+    this.pageTitleSubscription?.unsubscribe();
   }
 
   public handleCookieBannerFeatureToggle(): void {

src/app/containers/redirect/redirect.component.spec.ts

@@ -37,6 +37,6 @@ describe('AppRedirectComponent', () => {
   });
 
   it('should have redirect property ', () => {
-    expect(app.redirected).toBeDefined();
+    expect(app.redirected).toBe(false);
   });
 });

src/app/utils/app-utils.spec.ts

@@ -1,3 +1,4 @@
+import { LovRefDataModel } from 'src/shared/models/lovRefData.model';
 import { propsExist } from '../../../api/lib/objectUtilities';
 import { AppConstants } from '../app.constants';
 import { AppFeatureFlag } from '../store/reducers/app.reducer';
@@ -89,64 +90,131 @@ describe('AppUtils', () => {
     expect(array).toEqual(state.userNav);
   });
 
-  it('should set correct page titles', () => {
-    const array = AppUtils.setPageTitle('invite-users');
-    expect(array).toEqual('Invite user - Manage organisation');
-  });
+  describe('Page title', () => {
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org-new/register');
+      expect(array).toEqual('Register - Register organisation');
+    });
 
-  it('should set correct page titles', () => {
-    const array = AppUtils.setPageTitle('organisation-name');
-    expect(array).toEqual('Organisation name - Register organisation');
-  });
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org-new/organisation-type');
+      expect(array).toEqual('Organisation type - Register organisation');
+    });
 
-  it('should set correct page titles', () => {
-    const array = AppUtils.setPageTitle('organisation-address');
-    expect(array).toEqual('Organisation address - Register organisation');
-  });
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org-new/company-house-details');
+      expect(array).toEqual('Company house details - Register organisation');
+    });
 
-  it('should set correct page titles', () => {
-    const array = AppUtils.setPageTitle('organisation-pba');
-    expect(array).toEqual('PBA - Register organisation');
-  });
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org-new/document-exchange-reference');
+      expect(array).toEqual('Document exchange reference - Register organisation');
+    });
 
-  it('should set correct page titles', () => {
-    const array = AppUtils.setPageTitle('have-dx');
-    expect(array).toEqual('DX - Register organisation');
-  });
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org-new/regulatory-organisation-type');
+      expect(array).toEqual('Organisation regulators - Register organisation');
+    });
 
-  it('should set correct page titles', () => {
-    const array = AppUtils.setPageTitle('organisation-dx');
-    expect(array).toEqual('DX reference - Register organisation');
-  });
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org-new/organisation-services-access');
+      expect(array).toEqual('Services to access - Register organisation');
+    });
 
-  it('should set correct page titles', () => {
-    const array = AppUtils.setPageTitle('haveSra');
-    expect(array).toEqual('SRA - Register organisation');
-  });
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org-new/payment-by-account');
+      expect(array).toEqual('Payment by account - Register organisation');
+    });
 
-  it('should set correct page titles', () => {
-    const array = AppUtils.setPageTitle('sraNumber');
-    expect(array).toEqual('SRA number - Register organisation');
-  });
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org-new/individual-registered-with-regulator');
+      expect(array).toEqual('Individual regulators - Register organisation');
+    });
 
-  it('should set correct page titles', () => {
-    const array = AppUtils.setPageTitle('name');
-    expect(array).toEqual('Name - Register organisation');
-  });
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org-new/check-your-answers');
+      expect(array).toEqual('Check your answers - Register organisation');
+    });
 
-  it('should set correct page titles', () => {
-    const array = AppUtils.setPageTitle('email-address');
-    expect(array).toEqual('Email - Register organisation');
-  });
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org/register/organisation-name');
+      expect(array).toEqual('Organisation name - Register organisation');
+    });
 
-  it('should set correct page titles', () => {
-    const array = AppUtils.setPageTitle('check');
-    expect(array).toEqual('Check answers - Register organisation');
-  });
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org/register/organisation-address');
+      expect(array).toEqual('Organisation address - Register organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org/register/organisation-pba');
+      expect(array).toEqual('PBA - Register organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org/register/organisation-have-dx');
+      expect(array).toEqual('DX - Register organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org/register/organisation-dx');
+      expect(array).toEqual('DX reference - Register organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org/register/haveSra');
+      expect(array).toEqual('SRA - Register organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org/register/sraNumber');
+      expect(array).toEqual('SRA number - Register organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org/register/name');
+      expect(array).toEqual('Name - Register organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org/register/email-address');
+      expect(array).toEqual('Email - Register organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org/register/check');
+      expect(array).toEqual('Check answers - Register organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('register-org/register');
+      expect(array).toEqual('Register - Register organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('invite-users');
+      expect(array).toEqual('Invite user - Manage organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('organisation');
+      expect(array).toEqual('Organisation details - Manage organisation');
+    });
 
-  it('should set correct page titles', () => {
-    const array = AppUtils.setPageTitle('register-org/register');
-    expect(array).toEqual('Register - Register organisation');
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('users');
+      expect(array).toEqual('Users - Manage organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('unassigned-cases');
+      expect(array).toEqual('Unassigned cases - Manage organisation');
+    });
+
+    it('should set correct page title', () => {
+      const array = AppUtils.setPageTitle('assigned-cases');
+      expect(array).toEqual('Assigned cases - Manage organisation');
+    });
   });
 
   it('should switch title', () => {
@@ -360,4 +428,68 @@ describe('AppUtils', () => {
     const result = AppUtils.findLastIndex(htmlComponentArray2, predicate);
     expect(result).toEqual(-1);
   });
+
+  describe('setOtherAsLastOption', () => {
+    let itmes: LovRefDataModel[];
+    let other: LovRefDataModel;
+
+    beforeEach(() => {
+      itmes = [
+        {
+          active_flag: 'Y',
+          category_key: 'Org',
+          child_nodes: null,
+          hint_text_cy: '',
+          hint_text_en: '',
+          key: 'DEFENCE',
+          lov_order: null,
+          parent_category: '',
+          parent_key: '',
+          value_cy: '',
+          value_en: 'Defence'
+        },
+        {
+          active_flag: 'Y',
+          category_key: 'Org',
+          child_nodes: null,
+          hint_text_cy: '',
+          hint_text_en: '',
+          key: 'CHARITY',
+          lov_order: null,
+          parent_category: '',
+          parent_key: '',
+          value_cy: '',
+          value_en: 'Charity'
+        }
+      ];
+
+      other = {
+        active_flag: '',
+        category_key: '',
+        hint_text_cy: '',
+        hint_text_en: '',
+        key: 'OTHER',
+        lov_order: null,
+        parent_category: '',
+        parent_key: '',
+        value_cy: '',
+        value_en: 'Other',
+        child_nodes: null
+      };
+    });
+
+    it('should set Other as last option if not available in the input list', () => {
+      const itemsWithOther = AppUtils.setOtherAsLastOption(itmes);
+      itmes.push(other);
+      expect(itemsWithOther).toEqual(itmes);
+      expect(itemsWithOther[itemsWithOther.length - 1]).toEqual(other);
+    });
+
+    it('should move other to the last position if it is available in the input list', () => {
+      itmes.splice(1, 0, other);
+      const itemsWithOther = AppUtils.setOtherAsLastOption(itmes);
+      expect(itemsWithOther).toBe(itmes);
+      expect(itemsWithOther[itemsWithOther.length - 1]).toEqual(other);
+    });
+  });
 });