sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(storefront): polish cart

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/pages/cart/cart.component.html
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>