From bb461e007e693e6995055e48c6aec315797e02a3 Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Sun, 19 Jul 2026 23:26:32 +0400
Subject: [PATCH] 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 | 11 ++++++-----
 src/app/pages/search/search.component.scss |  5 +++++
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/search/search.component.html b/src/app/pages/search/search.component.html
index 3c0124b..b0d72f0 100644
--- a/src/app/pages/search/search.component.html
+++ b/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>
   }
 
diff --git a/src/app/pages/search/search.component.scss b/src/app/pages/search/search.component.scss
index 93cbce6..d78e539 100644
--- a/src/app/pages/search/search.component.scss
+++ b/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;
+    }
   }
 }