adding main and aria label to controls

src/app/@theme/components/header/header.component.html

@@ -14,7 +14,7 @@
   <nb-actions size="small">
 
     <nb-action class="control-item">
-      <nb-search type="rotate-layout"></nb-search>
+      <nb-search ngxSearchAriaLabel type="rotate-layout"></nb-search>
     </nb-action>
     <nb-action class="control-item" icon="email-outline"></nb-action>
     <nb-action class="control-item" icon="bell-outline"></nb-action>

src/app/@theme/components/search-aria-label.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, ElementRef, AfterViewInit } from '@angular/core';
+
+@Directive({
+  selector: '[ngxSearchAriaLabel]',
+})
+export class SearchAriaLabelDirective implements AfterViewInit {
+  constructor(private el: ElementRef) {}
+
+  ngAfterViewInit() {
+    const nativeElement: HTMLElement = this.el.nativeElement;
+
+    // Add aria-labels to internal buttons
+    const buttons = nativeElement.querySelectorAll('button');
+    buttons.forEach((btn, i) => {
+      if (btn && !btn.hasAttribute('aria-label')) {
+        if (btn.classList.contains('start-search')) {
+          btn.setAttribute('aria-label', 'Search');
+        }
+      }
+    });
+  }
+}

src/app/@theme/layouts/one-column/one-column.layout.ts

@@ -14,7 +14,9 @@ import { Component } from '@angular/core';
       </nb-sidebar>
 
       <nb-layout-column>
-        <ng-content select="router-outlet"></ng-content>
+        <main>
+            <ng-content select="router-outlet"></ng-content>
+        </main>
       </nb-layout-column>
 
       <nb-layout-footer fixed>

src/app/@theme/theme.module.ts

@@ -38,6 +38,7 @@ import { DEFAULT_THEME } from './styles/theme.default';
 import { COSMIC_THEME } from './styles/theme.cosmic';
 import { CORPORATE_THEME } from './styles/theme.corporate';
 import { DARK_THEME } from './styles/theme.dark';
+import {SearchAriaLabelDirective} from './components/search-aria-label.directive';
 
 const NB_MODULES = [
   NbLayoutModule,
@@ -61,6 +62,7 @@ const COMPONENTS = [
   OneColumnLayoutComponent,
   ThreeColumnsLayoutComponent,
   TwoColumnsLayoutComponent,
+  SearchAriaLabelDirective,
 ];
 const PIPES = [
   CapitalizePipe,

src/app/app-routing.module.ts

@@ -6,8 +6,8 @@ import {
   NbLogoutComponent,
   NbRegisterComponent,
   NbRequestPasswordComponent,
-  NbResetPasswordComponent,
 } from '@nebular/auth';
+import {CustomResetPasswordComponent} from './pages/auth/reset-password/custom-reset-password.component';
 
 export const routes: Routes = [
   {
@@ -41,7 +41,7 @@ export const routes: Routes = [
       },
       {
         path: 'reset-password',
-        component: NbResetPasswordComponent,
+        component: CustomResetPasswordComponent,
       },
     ],
   },

src/app/app.module.ts

@@ -20,9 +20,10 @@ import {
   NbToastrModule,
   NbWindowModule,
 } from '@nebular/theme';
+import {CustomResetPasswordComponent} from './pages/auth/reset-password/custom-reset-password.component';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, CustomResetPasswordComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,

src/app/pages/auth/reset-password/custom-reset-password.component.html

@@ -0,0 +1,3 @@
+<main>
+  <nb-reset-password-page></nb-reset-password-page>
+</main>

src/app/pages/auth/reset-password/custom-reset-password.component.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+import {NbResetPasswordComponent} from '@nebular/auth';
+
+@Component({
+  templateUrl: './custom-reset-password.component.html',
+})
+export class CustomResetPasswordComponent extends NbResetPasswordComponent {
+
+}