Orders 7877 accessibility returns entry points

.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

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)

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");

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": {

templates/components/account/orders-list.html

@@ -21,20 +21,24 @@ <h3 class="account-heading">{{lang 'account.orders.heading' }}</h3>
                 {{/if}}
             </div>
             <div class="account-product-body">
-                <div class="account-orderStatus">
-                    <h6 class="account-orderStatus-label">{{this.status}}</h6>
-                    {{#if this.return_url}}
-                        {{#or ../settings.returns_v2_enabled ../settings.returns_enabled}}
-                            <a class="account-orderStatus-action" href="{{this.return_url}}">
-                                {{lang 'account.orders.return_items' }}
-                            </a>
-                        {{/or}}
-                    {{/if}}
-                </div>
+                {{!-- Title and status share a flex row so focus reaches the order link before the
+                      "Return Items" action (WCAG 2.4.3) while the status block still reserves space. --}}
+                <div class="account-product-heading">
+                    <h5 class="account-product-title">
+                        <a href="{{this.details_url}}">{{lang 'account.orders.list.order_number' number=this.id}}</a>
+                    </h5>
 
-                <h5 class="account-product-title">
-                    <a href="{{this.details_url}}">{{lang 'account.orders.list.order_number' number=this.id}}</a>
-                </h5>
+                    <div class="account-orderStatus">
+                        <h6 class="account-orderStatus-label">{{this.status}}</h6>
+                        {{#if this.return_url}}
+                            {{#or ../settings.returns_v2_enabled ../settings.returns_enabled}}
+                                <a class="account-orderStatus-action" href="{{this.return_url}}" aria-label="{{lang 'account.orders.return_items_for' number=this.id}}">
+                                    {{lang 'account.orders.return_items' }}
+                                </a>
+                            {{/or}}
+                        {{/if}}
+                    </div>
+                </div>
                 <p class="account-product-description">{{lang 'account.orders.list.product_details' num_products=this.total_quantity cost=this.total.formatted}}</p>
 
                 <div class="account-product-details">

templates/pages/account/orders/details.html

@@ -185,7 +185,7 @@ <h3 class="account-heading">{{lang 'account.orders.details.actions'}}</h3>
                     </form>
                     {{#or settings.returns_v2_enabled settings.returns_enabled}}
                         {{#if order.is_complete}}
-                            <a href="{{order.return_url}}" class="button">{{lang 'account.orders.details.return'}}</a>
+                            <a href="{{order.return_url}}" class="button" aria-label="{{lang 'account.orders.return_items_for' number=order.id}}">{{lang 'account.orders.details.return'}}</a>
                         {{/if}}
                     {{/or}}
                 </div>