From 46e67b704fe36fd63c2270c650bb111b7e2124e6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-FD57EEK\\Joshua Matamorros" <yosh.matava@gmail.com>
Date: Mon, 14 Jul 2025 19:16:49 -0600
Subject: [PATCH] adding main and aria label to controls

---
 .../components/header/header.component.html   |  2 +-
 .../components/search-aria-label.directive.ts | 22 +++++++++++++++++++
 .../layouts/one-column/one-column.layout.ts   |  4 +++-
 src/app/@theme/theme.module.ts                |  2 ++
 src/app/app-routing.module.ts                 |  4 ++--
 src/app/app.module.ts                         |  3 ++-
 .../custom-reset-password.component.html      |  3 +++
 .../custom-reset-password.component.ts        |  9 ++++++++
 8 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 src/app/@theme/components/search-aria-label.directive.ts
 create mode 100644 src/app/pages/auth/reset-password/custom-reset-password.component.html
 create mode 100644 src/app/pages/auth/reset-password/custom-reset-password.component.ts

diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html
index b84589ee..b5837f64 100644
--- a/src/app/@theme/components/header/header.component.html
+++ b/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>
diff --git a/src/app/@theme/components/search-aria-label.directive.ts b/src/app/@theme/components/search-aria-label.directive.ts
new file mode 100644
index 00000000..af9527c9
--- /dev/null
+++ b/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');
+        }
+      }
+    });
+  }
+}
diff --git a/src/app/@theme/layouts/one-column/one-column.layout.ts b/src/app/@theme/layouts/one-column/one-column.layout.ts
index cc0b789a..15d1ce32 100644
--- a/src/app/@theme/layouts/one-column/one-column.layout.ts
+++ b/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>
diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts
index 9bb44420..84fdc2a6 100644
--- a/src/app/@theme/theme.module.ts
+++ b/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,
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index eb53c65c..e942674b 100644
--- a/src/app/app-routing.module.ts
+++ b/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,
       },
     ],
   },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d55f48ee..36f6f4d0 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/pages/auth/reset-password/custom-reset-password.component.html b/src/app/pages/auth/reset-password/custom-reset-password.component.html
new file mode 100644
index 00000000..2ce3a0c0
--- /dev/null
+++ b/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>
diff --git a/src/app/pages/auth/reset-password/custom-reset-password.component.ts b/src/app/pages/auth/reset-password/custom-reset-password.component.ts
new file mode 100644
index 00000000..34b11feb
--- /dev/null
+++ b/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 {
+
+}