fix(storefront): polish compare
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>
This commit is contained in:
@@ -27,7 +27,7 @@
|
|||||||
@for (product of products(); track product.itemID) {
|
@for (product of products(); track product.itemID) {
|
||||||
<article class="compare-product-chip">
|
<article class="compare-product-chip">
|
||||||
<a [routerLink]="['/product', product.itemID] | langRoute">{{ product.name }}</a>
|
<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>
|
</article>
|
||||||
}
|
}
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -1098,6 +1098,7 @@ export const en: Translations = {
|
|||||||
compareEmptyTitle: 'No products to compare',
|
compareEmptyTitle: 'No products to compare',
|
||||||
compareEmptyDescription: 'Add products from catalog cards to compare specs and prices.',
|
compareEmptyDescription: 'Add products from catalog cards to compare specs and prices.',
|
||||||
clearCompare: 'Clear compare',
|
clearCompare: 'Clear compare',
|
||||||
|
removeFromCompare: 'Remove from compare',
|
||||||
hideIdentical: 'Hide identical values',
|
hideIdentical: 'Hide identical values',
|
||||||
highlightDifferences: 'Highlight differences',
|
highlightDifferences: 'Highlight differences',
|
||||||
clearRecentlyViewed: 'Clear recently viewed',
|
clearRecentlyViewed: 'Clear recently viewed',
|
||||||
|
|||||||
@@ -1098,6 +1098,7 @@ export const hy: Translations = {
|
|||||||
compareEmptyTitle: 'Համեմատելու ապրանքներ չկան',
|
compareEmptyTitle: 'Համեմատելու ապրանքներ չկան',
|
||||||
compareEmptyDescription: 'Ավելացրեք ապրանքներ կատալոգից՝ բնութագրերը և գները համեմատելու համար։',
|
compareEmptyDescription: 'Ավելացրեք ապրանքներ կատալոգից՝ բնութագրերը և գները համեմատելու համար։',
|
||||||
clearCompare: 'Մաքրել համեմատումը',
|
clearCompare: 'Մաքրել համեմատումը',
|
||||||
|
removeFromCompare: 'Հեռացնել համեմատումից',
|
||||||
hideIdentical: 'Թաքցնել նույն արժեքները',
|
hideIdentical: 'Թաքցնել նույն արժեքները',
|
||||||
highlightDifferences: 'Ընդգծել տարբերությունները',
|
highlightDifferences: 'Ընդգծել տարբերությունները',
|
||||||
clearRecentlyViewed: 'Մաքրել դիտվածները',
|
clearRecentlyViewed: 'Մաքրել դիտվածները',
|
||||||
|
|||||||
@@ -1098,6 +1098,7 @@ export const ru: Translations = {
|
|||||||
compareEmptyTitle: 'Нет товаров для сравнения',
|
compareEmptyTitle: 'Нет товаров для сравнения',
|
||||||
compareEmptyDescription: 'Добавьте товары из каталога, чтобы сравнить характеристики и цену.',
|
compareEmptyDescription: 'Добавьте товары из каталога, чтобы сравнить характеристики и цену.',
|
||||||
clearCompare: 'Очистить сравнение',
|
clearCompare: 'Очистить сравнение',
|
||||||
|
removeFromCompare: 'Убрать из сравнения',
|
||||||
hideIdentical: 'Скрыть одинаковые значения',
|
hideIdentical: 'Скрыть одинаковые значения',
|
||||||
highlightDifferences: 'Подсвечивать различия',
|
highlightDifferences: 'Подсвечивать различия',
|
||||||
clearRecentlyViewed: 'Очистить просмотренные',
|
clearRecentlyViewed: 'Очистить просмотренные',
|
||||||
|
|||||||
@@ -1097,6 +1097,7 @@ export interface Translations {
|
|||||||
compareEmptyTitle: string;
|
compareEmptyTitle: string;
|
||||||
compareEmptyDescription: string;
|
compareEmptyDescription: string;
|
||||||
clearCompare: string;
|
clearCompare: string;
|
||||||
|
removeFromCompare: string;
|
||||||
hideIdentical: string;
|
hideIdentical: string;
|
||||||
highlightDifferences: string;
|
highlightDifferences: string;
|
||||||
clearRecentlyViewed: string;
|
clearRecentlyViewed: string;
|
||||||
|
|||||||
Reference in New Issue
Block a user