From 56e311109a717229f46e6297cfad259502a0c095 Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Sun, 19 Jul 2026 23:35:17 +0400
Subject: [PATCH] fix(storefront): polish compare
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add accessible label to the compare-chip remove button: it rendered
only a bare × glyph with no aria-label, announced as meaningless
symbol text by screen readers. Added ux.removeFromCompare across all
three locales.

Global :focus-visible already covers .btn/.btn-primary/.btn-ghost, so
no separate focus styling was needed here.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../compare/containers/compare-page.component.html              | 2 +-
 src/app/i18n/en.ts                                              | 1 +
 src/app/i18n/hy.ts                                              | 1 +
 src/app/i18n/ru.ts                                              | 1 +
 src/app/i18n/translations.ts                                    | 1 +
 5 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/features/website/user-experience/compare/containers/compare-page.component.html b/src/app/features/website/user-experience/compare/containers/compare-page.component.html
index 0fcd0b8..792a472 100644
--- a/src/app/features/website/user-experience/compare/containers/compare-page.component.html
+++ b/src/app/features/website/user-experience/compare/containers/compare-page.component.html
@@ -27,7 +27,7 @@
       @for (product of products(); track product.itemID) {
         <article class="compare-product-chip">
           <a [routerLink]="['/product', product.itemID] | langRoute">{{ product.name }}</a>
-          <button type="button" (click)="remove(product.itemID)">×</button>
+          <button type="button" [attr.aria-label]="'ux.removeFromCompare' | translate" (click)="remove(product.itemID)">×</button>
         </article>
       }
     </section>
diff --git a/src/app/i18n/en.ts b/src/app/i18n/en.ts
index a0f9481..faf3573 100644
--- a/src/app/i18n/en.ts
+++ b/src/app/i18n/en.ts
@@ -1098,6 +1098,7 @@ export const en: Translations = {
     compareEmptyTitle: 'No products to compare',
     compareEmptyDescription: 'Add products from catalog cards to compare specs and prices.',
     clearCompare: 'Clear compare',
+    removeFromCompare: 'Remove from compare',
     hideIdentical: 'Hide identical values',
     highlightDifferences: 'Highlight differences',
     clearRecentlyViewed: 'Clear recently viewed',
diff --git a/src/app/i18n/hy.ts b/src/app/i18n/hy.ts
index 3d4cc58..cc1b728 100644
--- a/src/app/i18n/hy.ts
+++ b/src/app/i18n/hy.ts
@@ -1098,6 +1098,7 @@ export const hy: Translations = {
     compareEmptyTitle: 'Համեմատելու ապրանքներ չկան',
     compareEmptyDescription: 'Ավելացրեք ապրանքներ կատալոգից՝ բնութագրերը և գները համեմատելու համար։',
     clearCompare: 'Մաքրել համեմատումը',
+    removeFromCompare: 'Հեռացնել համեմատումից',
     hideIdentical: 'Թաքցնել նույն արժեքները',
     highlightDifferences: 'Ընդգծել տարբերությունները',
     clearRecentlyViewed: 'Մաքրել դիտվածները',
diff --git a/src/app/i18n/ru.ts b/src/app/i18n/ru.ts
index cfe1c7b..eed793d 100644
--- a/src/app/i18n/ru.ts
+++ b/src/app/i18n/ru.ts
@@ -1098,6 +1098,7 @@ export const ru: Translations = {
     compareEmptyTitle: 'Нет товаров для сравнения',
     compareEmptyDescription: 'Добавьте товары из каталога, чтобы сравнить характеристики и цену.',
     clearCompare: 'Очистить сравнение',
+    removeFromCompare: 'Убрать из сравнения',
     hideIdentical: 'Скрыть одинаковые значения',
     highlightDifferences: 'Подсвечивать различия',
     clearRecentlyViewed: 'Очистить просмотренные',
diff --git a/src/app/i18n/translations.ts b/src/app/i18n/translations.ts
index c17a8db..2c1bf4c 100644
--- a/src/app/i18n/translations.ts
+++ b/src/app/i18n/translations.ts
@@ -1097,6 +1097,7 @@ export interface Translations {
     compareEmptyTitle: string;
     compareEmptyDescription: string;
     clearCompare: string;
+    removeFromCompare: string;
     hideIdentical: string;
     highlightDifferences: string;
     clearRecentlyViewed: string;