From 6b1dc15c80c89c5b34ffc7d98026216c0834dfcc Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Sun, 19 Jul 2026 23:32:23 +0400
Subject: [PATCH] fix(storefront): polish product-details

Add role=status/alert + aria-live to loading/error sections (matching
the pattern already applied to home/search/catalog).

Add missing :focus-visible states to the buying-flow controls that had
none: add-to-cart/buy-now/wishlist/compare/share buttons, variant
colour-swatch and size-chip pickers, and the star rating selector.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../product-actions/product-actions.component.scss     |  5 +++++
 .../variant-selector/variant-selector.component.scss   | 10 ++++++++++
 .../product-details-container.component.html           |  4 ++--
 .../star-selector/star-selector.component.scss         |  6 ++++++
 4 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/app/features/website/product/components/product-actions/product-actions.component.scss b/src/app/features/website/product/components/product-actions/product-actions.component.scss
index cf4e733..9991967 100644
--- a/src/app/features/website/product/components/product-actions/product-actions.component.scss
+++ b/src/app/features/website/product/components/product-actions/product-actions.component.scss
@@ -31,6 +31,11 @@ button.secondary.active {
   box-shadow: 0 0 0 2px rgba(73, 118, 113, 0.18);
 }
 
+button:focus-visible {
+  outline: 2px solid #497671;
+  outline-offset: 2px;
+}
+
 @media (max-width: 640px) {
   .product-actions {
     display: grid;
diff --git a/src/app/features/website/product/components/variant-selector/variant-selector.component.scss b/src/app/features/website/product/components/variant-selector/variant-selector.component.scss
index 422e9af..410fe15 100644
--- a/src/app/features/website/product/components/variant-selector/variant-selector.component.scss
+++ b/src/app/features/website/product/components/variant-selector/variant-selector.component.scss
@@ -38,6 +38,11 @@
     display: inline-block;
     cursor: default;
   }
+
+  &:focus-visible {
+    outline: 2px solid #1e3c38;
+    outline-offset: 2px;
+  }
 }
 
 .size-chip {
@@ -61,4 +66,9 @@
     align-items: center;
     cursor: default;
   }
+
+  &:focus-visible {
+    outline: 2px solid #497671;
+    outline-offset: 2px;
+  }
 }
diff --git a/src/app/features/website/product/containers/product-details-container.component.html b/src/app/features/website/product/containers/product-details-container.component.html
index 426c58b..1ccb75e 100644
--- a/src/app/features/website/product/containers/product-details-container.component.html
+++ b/src/app/features/website/product/containers/product-details-container.component.html
@@ -1,13 +1,13 @@
 <main class="product-details-page">
   @if (loading()) {
-    <section class="product-details-loading">
+    <section class="product-details-loading" role="status" aria-live="polite">
       <div class="product-details-spinner"></div>
       <p>{{ 'productDetails.loading' | translate }}</p>
     </section>
   }
 
   @if (error()) {
-    <section class="product-details-message error">
+    <section class="product-details-message error" role="alert">
       <h1>{{ 'productDetails.errorTitle' | translate }}</h1>
       <p>{{ error()! | translate }}</p>
       <button type="button" (click)="retry()">{{ 'productDetails.retry' | translate }}</button>
diff --git a/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss b/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss
index d093f2f..22478ef 100644
--- a/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss
+++ b/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss
@@ -22,3 +22,9 @@
 .star-btn.selected {
   color: var(--primary-color);
 }
+
+.star-btn:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+  border-radius: 4px;
+}