fix(storefront): polish cart

Fix real regression: the payment success checkmark and timeout clock
icons had been corrupted to literal '?' glyphs (confirmed via git
history — ✓ and ⏱ were replaced), so a customer who just paid saw a
confusing '?' instead of a success indicator. Restored both icons and
marked them aria-hidden since the adjacent heading already conveys
the status.

Add missing accessible names to icon-only buttons that had none:
quantity increase/decrease controls and the mobile delete button
(desktop remove button had a title attribute only, which is not
reliably announced by screen readers — added aria-label alongside it).
New cart.increaseQuantity/decreaseQuantity keys added across all
three locales.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-19 23:39:14 +04:00
parent 56e311109a
commit f5225ac326
5 changed files with 15 additions and 7 deletions

View File

@@ -105,6 +105,8 @@ export const en: Translations = {
autoClose: 'Window will close automatically...',
confirmClear: 'Are you sure you want to clear the cart?',
removeItem: 'Remove item',
increaseQuantity: 'Increase quantity',
decreaseQuantity: 'Decrease quantity',
paymentQrAlt: 'Payment QR code',
acceptTerms: 'Please accept the offer terms, return policy, and warranty terms to proceed with the order.',
copyError: 'Copy error:',

View File

@@ -105,6 +105,8 @@ export const hy: Translations = {
autoClose: 'Պատուհանը կփակվի ավտոմատ...',
confirmClear: 'Վստա՞հ եք, որ ցանկանում եք մաքրել զամբյուղը',
removeItem: 'Հեռացնել ապրանքը',
increaseQuantity: 'Ավելացնել քանակը',
decreaseQuantity: 'Նվազեցնել քանակը',
paymentQrAlt: 'Վճարման QR կոդ',
acceptTerms: 'Խնդրում ենք ընդունել պայմանները՝ պատվերը հաստատելու համար։',
copyError: 'Պատճենման սխալ՝',

View File

@@ -105,6 +105,8 @@ export const ru: Translations = {
autoClose: 'Окно закроется автоматически...',
confirmClear: 'Вы уверены, что хотите очистить корзину?',
removeItem: 'Удалить товар',
increaseQuantity: 'Увеличить количество',
decreaseQuantity: 'Уменьшить количество',
paymentQrAlt: 'QR-код для оплаты',
acceptTerms: 'Пожалуйста, примите условия оферты, политику возврата и возврата для подтверждения оформления заказа.',
copyError: 'Ошибка копирования:',

View File

@@ -103,6 +103,8 @@ export interface Translations {
autoClose: string;
confirmClear: string;
removeItem: string;
increaseQuantity: string;
decreaseQuantity: string;
paymentQrAlt: string;
acceptTerms: string;
copyError: string;

View File

@@ -37,7 +37,7 @@
<div class="item-info">
<div class="item-header">
<a [routerLink]="['/product', item.itemID] | langRoute" class="item-name">{{ itemName(item) }}</a>
<button class="remove-btn" (click)="removeItem(item)" [attr.title]="'cart.removeItem' | translate">
<button class="remove-btn" (click)="removeItem(item)" [attr.title]="'cart.removeItem' | translate" [attr.aria-label]="'cart.removeItem' | translate">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
@@ -81,13 +81,13 @@
</div>
<div class="quantity-controls">
<button class="qty-btn" (click)="decreaseQuantity(item)" [disabled]="item.quantity <= 1">
<button class="qty-btn" (click)="decreaseQuantity(item)" [disabled]="item.quantity <= 1" [attr.aria-label]="'cart.decreaseQuantity' | translate">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M5 12h14"/>
</svg>
</button>
<span class="qty-value">{{ item.quantity }}</span>
<button class="qty-btn" (click)="increaseQuantity(item)">
<button class="qty-btn" (click)="increaseQuantity(item)" [attr.aria-label]="'cart.increaseQuantity' | translate">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M12 5v14M5 12h14"/>
</svg>
@@ -104,7 +104,7 @@
</div>
</div>
<button class="delete-btn-mobile" (click)="removeItem(item)">
<button class="delete-btn-mobile" (click)="removeItem(item)" [attr.aria-label]="'cart.removeItem' | translate">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
@@ -258,7 +258,7 @@
@if (paymentStatus() === 'error') {
<div class="payment-status-screen error">
<div class="error-icon">!</div>
<div class="error-icon" aria-hidden="true">!</div>
<h2>{{ 'cart.paymentError' | translate }}</h2>
<p>{{ 'cart.paymentErrorDesc' | translate }}</p>
@@ -272,7 +272,7 @@
@if (paymentStatus() === 'success') {
<div class="payment-status-screen success">
<div class="success-icon">?</div>
<div class="success-icon" aria-hidden="true"></div>
<h2>{{ 'cart.paymentSuccess' | translate }}</h2>
<!-- <p class="success-text">{{ 'cart.paymentSuccessDesc' | translate }}</p> -->
@@ -331,7 +331,7 @@
@if (paymentStatus() === 'timeout') {
<div class="payment-status-screen timeout">
<div class="timeout-icon">?</div>
<div class="timeout-icon" aria-hidden="true"></div>
<h2>{{ 'cart.paymentTimeout' | translate }}</h2>
<p>{{ 'cart.paymentTimeoutDesc' | translate }}</p>
<p class="auto-close">{{ 'cart.autoClose' | translate }}</p>