fix: WCAG 2.2.2 hero autoplay pause control, invisible keyboard-focusable cart button, literal hex token
Some checks failed
Architecture Governance / architecture (push) Has been cancelled

- Hero widget autoplay had no pause control and ignored
  prefers-reduced-motion (WCAG 2.2.2 requires a way to pause
  auto-updating content lasting >5s). Added a pause/resume toggle
  button and skip autoplay entirely when the OS prefers reduced motion.
- Cart's swipe-reveal delete-btn-mobile was reachable by Tab even
  while invisible (opacity: 0, only the touch-swipe gesture could
  reveal it) - a confusing, unusable focus stop for keyboard users.
  Now tabindex=-1 + aria-hidden until swiped. Keyboard users already
  had a full removal path via the always-visible header remove button;
  this just stops the redundant hidden button from being a dead tab
  stop.
- stars.component.scss hardcoded #cdd6d5 for the unfilled-star color
  instead of the --border-color design token.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-08-13 10:12:41 +04:00
parent 178b5f0dc7
commit bad3002006
7 changed files with 55 additions and 3 deletions

View File

@@ -98,7 +98,13 @@
</div>
</div>
<button class="delete-btn-mobile" (click)="removeItem(item)" [attr.aria-label]="'cart.removeItem' | translate">
<button
class="delete-btn-mobile"
(click)="removeItem(item)"
[attr.aria-label]="'cart.removeItem' | translate"
[attr.tabindex]="swipedItemId() === item.itemID ? null : -1"
[attr.aria-hidden]="swipedItemId() === item.itemID ? null : 'true'"
>
<app-icon name="trash" [size]="20" />
</button>
</div>