diff --git a/.claude/skills/accessibility/SKILL.md b/.claude/skills/accessibility/SKILL.md index 0c64ad92b8..bb90390f28 100644 --- a/.claude/skills/accessibility/SKILL.md +++ b/.claude/skills/accessibility/SKILL.md @@ -110,6 +110,10 @@ Design applicable requirements into the solution, then edit. never use color alone; pointer targets ≥24×24 CSS px unless SC 2.5.8 exception applies. In Cornerstone, `color("greys","base")` (#999) fails for text — use `color("greys","dark")` (#666). + - **`prefers-reduced-motion` targets substantial/auto-playing motion** + (parallax, carousels, looping scenes). Transient loading spinners are + exempt (SC 2.2.2, A) and reduced-motion coverage for them is AAA — don't + add per-spinner overrides. 7. **Translatable strings.** No hardcoded English in ARIA. Add a key to `lang/en.json`, reference via `{{lang '...'}}` or diff --git a/CHANGELOG.md b/CHANGELOG.md index fde5b3ba10..8dd0e8013d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## Draft +- Add accessibility to returns entry-point links on the orders list and order details pages: order-scoped `aria-label`s and correct keyboard focus order (ORDERS-7877) - Add accessibility to return detail page: status-badge screen-reader context and dialog semantics on the shared alert modal (ORDERS-7875) - Add accessibility to returns list page and an in-repo accessibility skill (ORDERS-7878) - Fix accessibility issues in create-return flow: avoid double announcements on submit errors, drop a redundant focus-on-load, and simplify the submit button's ARIA description (ORDERS-7874) diff --git a/assets/scss/components/stencil/account/_account.scss b/assets/scss/components/stencil/account/_account.scss index 7a4e78f6e3..79e72c2e1b 100644 --- a/assets/scss/components/stencil/account/_account.scss +++ b/assets/scss/components/stencil/account/_account.scss @@ -373,6 +373,17 @@ $account-backorder-textColor: #757575; } } +// Orders list: title + status/return share a flex row so the status block reserves +// its own space while the order link stays first in the DOM for focus order (WCAG 2.4.3). +.account-product-heading { + @include breakpoint("small") { + align-items: flex-start; + display: flex; + gap: spacing("half"); + justify-content: space-between; + } +} + .account-orderStatus-label { background-color: stencilColor("label-backgroundColor"); color: stencilColor("label-color"); diff --git a/lang/en.json b/lang/en.json index a934875557..3de296aa2b 100755 --- a/lang/en.json +++ b/lang/en.json @@ -352,6 +352,7 @@ "refunded_quantity": "({qty} refunded)", "return_item": "Return", "return_items": "Return Items?", + "return_items_for": "Return Items for order #{number}", "order_placed": "Order Placed", "last_update": "Last Update", "list": { diff --git a/templates/components/account/orders-list.html b/templates/components/account/orders-list.html index 7da8381ccd..c00a36c24e 100644 --- a/templates/components/account/orders-list.html +++ b/templates/components/account/orders-list.html @@ -21,20 +21,24 @@
{{lang 'account.orders.list.product_details' num_products=this.total_quantity cost=this.total.formatted}}