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>

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;

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;
+  }
 }

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>

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;
+}