From ec918e91a05544bb160aa56ca64351ba18cd25de Mon Sep 17 00:00:00 2001
From: bensbits91 <benbpnw@gmail.com>
Date: Tue, 10 Jun 2025 09:54:02 -0700
Subject: [PATCH] address feedback: add ngClass; improve accessibility

---
 libs/components/src/search/search.component.html | 12 ++++++++----
 libs/components/src/search/search.component.ts   |  4 ++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/libs/components/src/search/search.component.html b/libs/components/src/search/search.component.html
index 2ba4ef525af..18fc48ee7ab 100644
--- a/libs/components/src/search/search.component.html
+++ b/libs/components/src/search/search.component.html
@@ -1,6 +1,6 @@
-<label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
 <div class="tw-relative tw-flex tw-items-center">
-  <form class="tw-relative tw-flex tw-items-center tw-w-full">
+  <form role="search" class="tw-relative tw-flex tw-items-center tw-w-full">
+    <label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
     <label
       [for]="id"
       aria-hidden="true"
@@ -29,10 +29,14 @@
       *ngIf="searchText"
       (mouseenter)="resetHovered = true"
       (mouseleave)="resetHovered = false"
-      [class.opacity-0]="!isInputFocused && !isInputHovered && !resetHovered"
-      [class.tw-bg-text-muted]="isInputFocused || isInputHovered || resetHovered"
+      [ngClass]="{
+        'tw-opacity-0': !isInputFocused && !isInputHovered && !resetHovered,
+        'tw-bg-text-muted': isInputFocused || isInputHovered || resetHovered,
+      }"
       class="bw-reset-btn tw-size-6 tw-absolute hover:tw-bg-text-main tw-right-2 tw-z-20 !tw-mb-0 tw-cursor-pointer"
       type="reset"
+      [attr.aria-label]="searchText ? ('Reset search' | i18n) : ('' | i18n)"
+      [attr.aria-hidden]="!searchText"
       (click)="clearSearch()"
     ></button>
   </form>
diff --git a/libs/components/src/search/search.component.ts b/libs/components/src/search/search.component.ts
index ffd8dc6947e..325a790e4e7 100644
--- a/libs/components/src/search/search.component.ts
+++ b/libs/components/src/search/search.component.ts
@@ -1,6 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { NgIf } from "@angular/common";
+import { NgIf, NgClass } from "@angular/common";
 import { Component, ElementRef, Input, ViewChild } from "@angular/core";
 import {
   ControlValueAccessor,
@@ -32,7 +32,7 @@ let nextId = 0;
     },
   ],
   standalone: true,
-  imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe, NgIf],
+  imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe, NgIf, NgClass],
 })
 export class SearchComponent implements ControlValueAccessor, FocusableElement {
   private notifyOnChange: (v: string) => void;