fix(storefront): polish search

Add accessible label to the search input (was placeholder-only),
role=status/alert + aria-live on loading and error states so screen
reader users get announced updates, type=button on retry, and a
:focus-visible outline on the retry button for keyboard users.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/pages/search/search.component.html

@@ -2,11 +2,12 @@
   <div class="search-header">
     <h1>{{ 'search.title' | translate }}</h1>
     <div class="search-box">
-      <input 
-        type="text" 
+      <input
+        type="text"
         [(ngModel)]="searchQuery"
         (input)="onSearchInput(searchQuery)"
         [placeholder]="'search.placeholder' | translate"
+        [attr.aria-label]="'search.title' | translate"
         class="search-input"
         autofocus
       />
@@ -26,16 +27,16 @@
   }
 
   @if (loading() && items().length === 0) {
-    <div class="loading-initial">
+    <div class="loading-initial" role="status" aria-live="polite">
       <div class="spinner"></div>
       <p>{{ 'search.searching' | translate }}</p>
     </div>
   }
 
   @if (error()) {
-    <div class="error">
+    <div class="error" role="alert">
       <p>{{ error() }}</p>
-      <button (click)="performSearch(searchQuery)">{{ 'search.retry' | translate }}</button>
+      <button type="button" (click)="performSearch(searchQuery)">{{ 'search.retry' | translate }}</button>
     </div>
   }
 

src/app/pages/search/search.component.scss

@@ -142,6 +142,11 @@
     &:hover {
       background: var(--primary-hover);
     }
+
+    &:focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+    }
   }
 }