deps(workbench): update @scion/workbench to Angular 16

closes #429

BREAKING CHANGE: Updating `@scion/workbench` to Angular 16 introduced a breaking change.

To migrate:
- update your application to Angular 16.x; for detailed migration instructions, refer to https://v16.angular.io/guide/update-to-latest-version;
- update @scion/components to version 16; for detailed migration instructions, refer to https://github.com/SchweizerischeBundesbahnen/scion-toolkit/blob/master/CHANGELOG_COMPONENTS.md;

.eslintrc.json

@@ -118,7 +118,8 @@
         "*.html"
       ],
       "extends": [
-        "plugin:@angular-eslint/template/recommended"
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility"
       ],
       "rules": {}
     }

.github/workflows/workflow.yml

@@ -1,7 +1,7 @@
 name: Continuous Integration and Delivery
 on: [ push, pull_request ]
 env:
-  NODE_VERSION: 16.16.0
+  NODE_VERSION: 18.16.0
 jobs:
   install:
     name: 'Installing NPM modules'

CONTRIBUTING.md

@@ -36,7 +36,7 @@ This section explains how to submit a pull request.
   <summary><strong>Development</strong></summary>
   <br>
 
-Make sure to use Node.js version 16.16.0 for contributing to SCION. We suggest using [Node Version Manager](https://github.com/nvm-sh/nvm) if you need different Node.js versions for other projects.
+Make sure to use Node.js version 18.16.0 for contributing to SCION. We suggest using [Node Version Manager](https://github.com/nvm-sh/nvm) if you need different Node.js versions for other projects.
 
 For development, you can uncomment the section `PATH-OVERRIDE-FOR-DEVELOPMENT` in `tsconfig.json`. This allows running tests or serving applications without having to build dependent modules first.
 

README.md

@@ -49,6 +49,7 @@ SCION Workbench enables the creation of Angular web applications that require a
 ***
 
 ### Versions
+- `v16.0.0-beta.1` and newer are compatible with Angular version 16.x.
 - `v15.0.0-beta.1` and newer are compatible with Angular version 15.x.
 - `v14.0.0-beta.1` and newer are compatible with Angular version 14.x.
 - `v13.0.0-beta.1` and newer are compatible with Angular version 13.x.

apps/workbench-client-testing-app/src/app/test-pages/angular-zone-test-page/angular-zone-test-page.component.html

@@ -29,10 +29,10 @@
 
 <ng-template #test_template let-test>
   <section class="panel">
-    <label>
+    <div>
       <sci-checkbox [(ngModel)]="test.runInAngular" class="e2e-run-inside-angular"></sci-checkbox>
       <span>Subscribe in NgZone</span>
-    </label>
+    </div>
     <button (click)="test.onTestClick()" class="e2e-subscribe">Subscribe</button>
     <output *ngFor="let emission of test.emissions" class="zone e2e-emission" [attr.data-zone]="emission.insideAngular ? 'inside-angular' : 'outside-angular'">{{emission.label}}</output>
   </section>

apps/workbench-client-testing-app/src/app/test-pages/angular-zone-test-page/angular-zone-test-page.component.scss

@@ -12,7 +12,7 @@
       flex-direction: column;
       gap: .5em;
 
-      label {
+      > div {
         display: flex;
         gap: .75em;
         align-items: center;

apps/workbench-getting-started-app/src/app/todo/todo.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="todo$ | async as todo">
-  <label>Task:</label>{{todo.task}}
-  <label>Due Date:</label>{{todo.dueDate | date:'short'}}
-  <label>Notes:</label>{{todo.notes}}
+  <span>Task:</span>{{todo.task}}
+  <span>Due Date:</span>{{todo.dueDate | date:'short'}}
+  <span>Notes:</span>{{todo.notes}}
 </ng-container>

apps/workbench-testing-app/src/app/menu/menu.component.html

@@ -1,11 +1,11 @@
 <ng-container *ngFor="let menuItem of menuItems">
-  <div *ngIf="menuItem | appInstanceof:MenuItem as menuItem; else separator_template"
+  <button *ngIf="menuItem | appInstanceof:MenuItem as menuItem; else separator_template"
        class="menu-item"
        [ngClass]="menuItem.cssClass"
        [class.disabled]="menuItem.disabled"
        (click)="onMenuItemClick(menuItem)">
     {{menuItem.text}}
-  </div>
+  </button>
   <ng-template #separator_template>
     <div class="separator"></div>
   </ng-template>

apps/workbench-testing-app/src/app/menu/menu.component.scss

@@ -5,7 +5,8 @@
   background-color: var(--sci-color-P50);
   box-shadow: 8px 8px 9px -9px rgba(var(--sci-color-primary-rgb), .2);
 
-  > div.menu-item {
+  > button.menu-item {
+    all: unset;
     padding: .6em 1.5em;
     cursor: default;
     font-size: smaller;

apps/workbench-testing-app/src/app/start-page/start-page.component.html

@@ -24,8 +24,9 @@
     <section class="tiles e2e-microfrontend-view-tiles">
       <sci-filter-field [formControl]="filterControl" (keydown)="$event.stopPropagation()"></sci-filter-field>
       <a *ngFor="let viewCapability of microfrontendViewCapabilities | appFilter$:filterControl:selectViewCapabilityText | async"
-         (click)="onMicrofrontendViewOpen(viewCapability)"
+         (click)="onMicrofrontendViewOpen(viewCapability, $event)"
          [ngClass]="concat(viewCapability.metadata!.appSymbolicName, viewCapability.properties.cssClass)"
+         href=""
          class="microfrontend">
         {{viewCapability.properties.title}}
         <span class="description">
@@ -41,6 +42,7 @@
       <a *ngFor="let testCapability of testCapabilities | appFilter$:filterControl:selectTestCapabilityText | async"
          (click)="onTestCapabilityOpen(testCapability, $event)"
          [ngClass]="concat(testCapability.metadata!.appSymbolicName, testCapability.properties?.['cssClass'])"
+         href=""
          class="test-capability">
         {{testCapability.properties?.['cssClass']}}
         <span class="description">

apps/workbench-testing-app/src/app/start-page/start-page.component.ts

@@ -95,11 +95,13 @@ export default class StartPageComponent implements OnDestroy {
     this.installFilterFieldDisplayTextSynchronizer();
   }
 
-  public onMicrofrontendViewOpen(viewCapability: WorkbenchViewCapability): void {
+  public onMicrofrontendViewOpen(viewCapability: WorkbenchViewCapability, event: MouseEvent): void {
+    event.preventDefault(); // Prevent href navigation imposed by accessibility rules
     this._workbenchClientRouter.navigate(viewCapability.qualifier, {target: this._view?.id});
   }
 
   public async onTestCapabilityOpen(testCapability: Capability, event: MouseEvent): Promise<void> {
+    event.preventDefault(); // Prevent href navigation imposed by accessibility rules
     // TODO [#343] Remove switch-case after fixed issue https://github.com/SchweizerischeBundesbahnen/scion-workbench/issues/343
     switch (testCapability.type) {
       case WorkbenchCapabilities.View: {

docs/site/getting-started.md

@@ -355,9 +355,9 @@ In this step, we will create a component to open a todo in a view.
 
     ```html
     <ng-container *ngIf="todo$ | async as todo">
-      <label>Task:</label>{{todo.task}}
-      <label>Due Date:</label>{{todo.dueDate | date:'short'}}
-      <label>Notes:</label>{{todo.notes}}
+      <span>Task:</span>{{todo.task}}
+      <span>Due Date:</span>{{todo.dueDate | date:'short'}}
+      <span>Notes:</span>{{todo.notes}}
     </ng-container>
     ```
     Using Angular's `async` pipe, we subscribe to the `todo$` observable and assign its emitted value to the template variable `todo`. Then, we render the todo.