fix(icons): icon-only button accessibility pass
Swept every icon-only button app-wide for an accessible name. Found three relying on title-only (not reliably announced by screen readers) or nothing at all: region-selector's detect-location button, the carousel add-to-cart button, and the subcategories add-to-cart button (had no label at all). All now have aria-label. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -51,7 +51,7 @@
|
|||||||
<span class="current-price">{{ product.price }} {{ product.currency }}</span>
|
<span class="current-price">{{ product.price }} {{ product.currency }}</span>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<button class="cart-icon-btn" (click)="addToCart($event, product)" [title]="'carousel.addToCart' | translate">
|
<button class="cart-icon-btn" (click)="addToCart($event, product)" [attr.aria-label]="'carousel.addToCart' | translate">
|
||||||
<app-icon name="cart" [size]="16" />
|
<app-icon name="cart" [size]="16" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
<div class="dropdown-header">
|
<div class="dropdown-header">
|
||||||
<span>{{ 'location.chooseRegion' | translate }}</span>
|
<span>{{ 'location.chooseRegion' | translate }}</span>
|
||||||
@if (!detecting()) {
|
@if (!detecting()) {
|
||||||
<button class="detect-btn" (click)="detectLocation()" title="{{ 'location.detectAuto' | translate }}">
|
<button class="detect-btn" (click)="detectLocation()" [attr.aria-label]="'location.detectAuto' | translate">
|
||||||
<app-icon name="locate" [size]="14" />
|
<app-icon name="locate" [size]="14" />
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -78,7 +78,7 @@
|
|||||||
<span class="current-price">{{ item.price }} {{ item.currency }}</span>
|
<span class="current-price">{{ item.price }} {{ item.currency }}</span>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<button class="item-cart-btn" (click)="addToCart(item.itemID, $event)">
|
<button class="item-cart-btn" (click)="addToCart(item.itemID, $event)" [attr.aria-label]="'carousel.addToCart' | translate">
|
||||||
<app-icon name="cart" [size]="16" />
|
<app-icon name="cart" [size]="16" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user