accessibility page heading

src/app/app.component.html

@@ -1 +1,2 @@
+<h1 class="sr-only">{{ pageHeading | translate }}</h1>
 <router-outlet></router-outlet>

src/app/app.component.scss

@@ -1,4 +1,15 @@
 :host {
   display: flex;
   flex: 1;
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
 }

src/app/app.component.ts

@@ -59,6 +59,7 @@ import { INITIAL_APP_STATE } from './store/initial-state';
 })
 export class AppComponent implements OnInit, OnDestroy {
   onDestroy$: Subject<boolean> = new Subject<boolean>();
+  pageHeading = '';
 
   constructor(
     private route: ActivatedRoute,
@@ -111,6 +112,7 @@ export class AppComponent implements OnInit, OnDestroy {
         const snapshot: any = event.snapshot || {};
         const data: any = snapshot.data || {};
 
+        this.pageHeading = data.title || '';
         pageTitle.setTitle(data.title || '');
         this.store.dispatch(new SetCurrentUrlAction(router.url));
       });