shopify 4.3.0 → 4.5.0

package/dist/analytics-DMUNCDGT.js

@@ -0,0 +1 @@
+import{ta as a,ua as b,va as c,wa as d,xa as e,ya as f}from"./chunk-3EQY5B4S.js";import"./chunk-ZDF5N422.js";import"./chunk-MPW2YJWU.js";import"./chunk-HX3TALXV.js";import"./chunk-TM534QSE.js";import"./chunk-Q3WOWDUU.js";import"./chunk-WTYH2O47.js";import"./chunk-T7KHS6RF.js";import"./chunk-BU7R7NFL.js";import"./chunk-5C7HDTHJ.js";import"./chunk-YYLEWVO6.js";import"./chunk-EJDWYASP.js";import"./chunk-RJ5VF3QY.js";import"./chunk-7UNQOKZW.js";import"./chunk-GB3YC4TI.js";import"./chunk-7HZG7FBK.js";import"./chunk-N5U5Q2MG.js";import"./chunk-AUZCENYI.js";import"./chunk-BXDZX3BS.js";import"./chunk-A4SBXDZB.js";import"./chunk-NJOO5XJV.js";import"./chunk-ZG7BVVT2.js";import"./chunk-2O22LZKV.js";import"./chunk-MGPLKG23.js";import"./chunk-NNOSZ447.js";import"./chunk-773TIA5M.js";import"./chunk-636CTEW7.js";import"./chunk-T6CC5WUU.js";import"./chunk-UQWFDL3F.js";import"./chunk-I5A6BPCP.js";import"./chunk-CX5CC6P5.js";import"./chunk-ET2CGROE.js";import"./chunk-TOLPNBZK.js";import"./chunk-CRALWNNO.js";import"./chunk-VKWPEFWQ.js";export{f as compileData,c as recordError,e as recordEvent,d as recordRetry,b as recordTiming,a as reportAnalyticsEvent};

package/dist/analytics-GAPN4I6R.js

@@ -0,0 +1 @@
+import{qa as a,ra as b,sa as c}from"./chunk-3EQY5B4S.js";import"./chunk-ZDF5N422.js";import"./chunk-MPW2YJWU.js";import"./chunk-HX3TALXV.js";import"./chunk-TM534QSE.js";import"./chunk-Q3WOWDUU.js";import"./chunk-WTYH2O47.js";import"./chunk-T7KHS6RF.js";import"./chunk-BU7R7NFL.js";import"./chunk-5C7HDTHJ.js";import"./chunk-YYLEWVO6.js";import"./chunk-EJDWYASP.js";import"./chunk-RJ5VF3QY.js";import"./chunk-7UNQOKZW.js";import"./chunk-GB3YC4TI.js";import"./chunk-7HZG7FBK.js";import"./chunk-N5U5Q2MG.js";import"./chunk-AUZCENYI.js";import"./chunk-BXDZX3BS.js";import"./chunk-A4SBXDZB.js";import"./chunk-NJOO5XJV.js";import"./chunk-ZG7BVVT2.js";import"./chunk-2O22LZKV.js";import"./chunk-MGPLKG23.js";import"./chunk-NNOSZ447.js";import"./chunk-773TIA5M.js";import"./chunk-636CTEW7.js";import"./chunk-T6CC5WUU.js";import"./chunk-UQWFDL3F.js";import"./chunk-I5A6BPCP.js";import"./chunk-CX5CC6P5.js";import"./chunk-ET2CGROE.js";import"./chunk-TOLPNBZK.js";import"./chunk-CRALWNNO.js";import"./chunk-VKWPEFWQ.js";export{b as getEnvironmentData,c as getSensitiveEnvironmentData,a as startAnalytics};

package/dist/assets/hydrogen/routes/locale-check.ts

@@ -1,4 +1,4 @@
-import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import type {LoaderFunctionArgs} from 'react-router';
 
 export async function loader({params, context}: LoaderFunctionArgs) {
   const {language, country} = context.storefront.i18n;
@@ -7,8 +7,8 @@ export async function loader({params, context}: LoaderFunctionArgs) {
     params.locale &&
     params.locale.toLowerCase() !== `${language}-${country}`.toLowerCase()
   ) {
-    // If the locale URL param is defined, yet we still are still at the default locale
-    // then the the locale param must be invalid, send to the 404 page
+    // If the locale URL param is defined, yet we are still at the default locale
+    // then the locale param must be invalid, send to the 404 page
     throw new Response(null, {status: 404});
   }
 

package/dist/assets/hydrogen/starter/CHANGELOG.md

@@ -1,5 +1,111 @@
 # skeleton
 
+## 2026.4.4
+
+### Patch Changes
+
+- Updated dependencies [[`23431c956193420bce3442e9e5cc711dc95cc497`](https://github.com/Shopify/hydrogen/commit/23431c956193420bce3442e9e5cc711dc95cc497)]:
+  - @shopify/hydrogen@2026.4.4
+
+## 2026.4.3
+
+### Patch Changes
+
+- Include line item children recursively in cart. ([#3753](https://github.com/Shopify/hydrogen/pull/3753)) by [@martin-pettersson](https://github.com/martin-pettersson)
+
+- Add generic cart result typing to `createCartHandler` so custom cart fragments can use their generated fragment types. ([#3767](https://github.com/Shopify/hydrogen/pull/3767)) by [@andguy95](https://github.com/andguy95)
+
+- Widen React Router peer dependency ranges so Hydrogen packages accept compatible React Router 7.16 patch versions without npm peer dependency conflicts. New Hydrogen projects now default to React Router 7.16.0. ([#3771](https://github.com/Shopify/hydrogen/pull/3771)) by [@fredericoo](https://github.com/fredericoo)
+
+- Updated dependencies [[`3ccc22e0a3407298e835104e29adfb036f261474`](https://github.com/Shopify/hydrogen/commit/3ccc22e0a3407298e835104e29adfb036f261474), [`a810db483c108ac8bbeaac45595b130ed95a2ec7`](https://github.com/Shopify/hydrogen/commit/a810db483c108ac8bbeaac45595b130ed95a2ec7), [`d17057eb4630710743e81b83573973100ec56d23`](https://github.com/Shopify/hydrogen/commit/d17057eb4630710743e81b83573973100ec56d23), [`995190036d99e02ba6fb559b8e3c406c90043599`](https://github.com/Shopify/hydrogen/commit/995190036d99e02ba6fb559b8e3c406c90043599), [`39f2b326e9fddda36b1d12149794bf4ffcc0d4b8`](https://github.com/Shopify/hydrogen/commit/39f2b326e9fddda36b1d12149794bf4ffcc0d4b8)]:
+  - @shopify/hydrogen@2026.4.3
+
+## 2026.4.2
+
+### Patch Changes
+
+- Add support for Vite 7 and Vite 8. Hydrogen remains backwards-compatible with Vite 5+. ([#3617](https://github.com/Shopify/hydrogen/pull/3617)) by [@frandiox](https://github.com/frandiox)
+
+  Mini Oxygen's dev server has been refactored to use the [Vite Environment API](https://vite.dev/guide/api-environment), which is the standard way to run non-browser runtimes in Vite. This replaces the previous custom middleware approach with a first-class `FetchableDevEnvironment`, improving compatibility with Vite's built-in HMR and module invalidation.
+
+  New Hydrogen projects created with `npm create @shopify/hydrogen` will default to Vite 8. The `vite-tsconfig-paths` plugin is no longer needed in the skeleton template since Vite 8 supports `resolve.tsconfigPaths` natively.
+
+- Updated dependencies [[`dc49699c799997d5893bc06e444f888e86a3bc29`](https://github.com/Shopify/hydrogen/commit/dc49699c799997d5893bc06e444f888e86a3bc29), [`50df825c57159757529f5f9f62c258d4de2a4b97`](https://github.com/Shopify/hydrogen/commit/50df825c57159757529f5f9f62c258d4de2a4b97), [`51f1e77fe63be5e5ded4ef0c91942bc304f1abc4`](https://github.com/Shopify/hydrogen/commit/51f1e77fe63be5e5ded4ef0c91942bc304f1abc4)]:
+  - @shopify/hydrogen@2026.4.2
+
+## 2026.4.1
+
+### Patch Changes
+
+- Fix `set-cookie-parser` and `cookie` resolution warnings during `dev` by using Vite's nested dependency syntax (`react-router > dep`). These are CJS transitive dependencies of `react-router` that weren't resolvable by bare name with strict package managers like pnpm. ([#3698](https://github.com/Shopify/hydrogen/pull/3698)) by [@fredericoo](https://github.com/fredericoo)
+
+- Updated dependencies [[`f84ab400c62d89827574d0fa65ba310a2e75f36f`](https://github.com/Shopify/hydrogen/commit/f84ab400c62d89827574d0fa65ba310a2e75f36f)]:
+  - @shopify/hydrogen@2026.4.1
+
+## 2026.4.0
+
+### Major Changes
+
+- Update Storefront API and Customer Account API from 2026-01 to 2026-04. ([#3651](https://github.com/Shopify/hydrogen/pull/3651)) by [@itsjustriley](https://github.com/itsjustriley)
+
+  ## Breaking changes
+
+  **JSON metafield values limited to 128KB**: When using API version 2026-04 or later, the Storefront API limits JSON type metafield writes to 128KB. This limit applies at the API level - Hydrogen passes through to the Storefront API without additional restriction. Apps that used JSON metafields before April 1, 2026 are grandfathered at the existing 2MB limit. Large metafield values continue to be readable by all API versions.
+
+  ## New features
+
+  **New `MERCHANDISE_LINE_TRANSFORMERS_RUN_ERROR` cart error code**: Cart operations (`cartCreate`, `cartLinesAdd`, etc.) now return a specific `MERCHANDISE_LINE_TRANSFORMERS_RUN_ERROR` error code when a Cart Transform Function fails at runtime, instead of the previous generic `INVALID` error code. If you handle cart errors in your storefront code, you may want to add handling for this new code.
+
+  ## Changelog links
+  - [Storefront API 2026-04 changelog](https://shopify.dev/changelog?filter=api&api_version=2026-04&api_type=storefront-graphql)
+  - [Customer Account API 2026-04 changelog](https://shopify.dev/changelog?filter=api&api_version=2026-04&api_type=customer-account-graphql)
+
+### Patch Changes
+
+- Updated dependencies [[`e7215ed0d7a74cacfa8c935f414c1cf32fc2ccd0`](https://github.com/Shopify/hydrogen/commit/e7215ed0d7a74cacfa8c935f414c1cf32fc2ccd0), [`92ab8e8b59807bbdb5dbecaa18629292d5566135`](https://github.com/Shopify/hydrogen/commit/92ab8e8b59807bbdb5dbecaa18629292d5566135), [`b0caa5c013380c7837f049f48da089a1671e2c6d`](https://github.com/Shopify/hydrogen/commit/b0caa5c013380c7837f049f48da089a1671e2c6d)]:
+  - @shopify/hydrogen@2026.4.0
+
+## 2026.1.4
+
+### Patch Changes
+
+- Remove redundant Storefront API proxy route from skeleton template. The server now automatically proxies requests to `/api/:version/graphql.json` via `createRequestHandler` with `proxyStandardRoutes: true` (enabled by default since December 2025). ([#3572](https://github.com/Shopify/hydrogen/pull/3572)) by [@itsjustriley](https://github.com/itsjustriley)
+
+  Developers no longer need a manual route file for the tokenless Storefront API. Existing apps with this route can safely delete it - the server-level proxy provides the same functionality with better cookie forwarding and analytics integration.
+
+- Updated dependencies [[`b0a75c1d759706931876f056662de2497cb3e688`](https://github.com/Shopify/hydrogen/commit/b0a75c1d759706931876f056662de2497cb3e688), [`a44ee3566b9bb9a7f43f05dfaae6f1f2ab1d548f`](https://github.com/Shopify/hydrogen/commit/a44ee3566b9bb9a7f43f05dfaae6f1f2ab1d548f)]:
+  - @shopify/hydrogen@2026.1.4
+
+## 2026.1.3
+
+### Patch Changes
+
+- Improve screen reader experience for paginated product grids by hiding decorative arrow characters from assistive technology. ([#3557](https://github.com/Shopify/hydrogen/pull/3557)) by [@itsjustriley](https://github.com/itsjustriley)
+
+- Fix broken `aria-label` on territory code input in address form. The label was the raw developer string `"territoryCode"` instead of a human-readable `"Country code"`. ([#3607](https://github.com/Shopify/hydrogen/pull/3607)) by [@itsjustriley](https://github.com/itsjustriley)
+
+- Add aria-label to ProductPrice for improved screen reader accessibility ([#3558](https://github.com/Shopify/hydrogen/pull/3558)) by [@itsjustriley](https://github.com/itsjustriley)
+
+- Updated dependencies [[`108243003a7f36349a446478f4e8ab0cade3e13a`](https://github.com/Shopify/hydrogen/commit/108243003a7f36349a446478f4e8ab0cade3e13a)]:
+  - @shopify/hydrogen@2026.1.3
+
+## 2026.1.2
+
+### Patch Changes
+
+- Improve gift card accessibility in Skeleton template ([#3518](https://github.com/Shopify/hydrogen/pull/3518)) by [@itsjustriley](https://github.com/itsjustriley)
+
+- Updated shopify/cli dependencies for cli-hydrogen ([#3553](https://github.com/Shopify/hydrogen/pull/3553)) by [@andguy95](https://github.com/andguy95)
+
+- Updated loaders that used `customerAccount.handleAuthStatus()` to now await it. ([#3523](https://github.com/Shopify/hydrogen/pull/3523)) by [@fredericoo](https://github.com/fredericoo)
+
+  ### Migration
+
+  If you call `handleAuthStatus()` in your own loaders, update those callsites to use `await`.
+
+- Updated dependencies [[`16b0e7baca0dfd1fb330d12dac924c7593d169a8`](https://github.com/Shopify/hydrogen/commit/16b0e7baca0dfd1fb330d12dac924c7593d169a8), [`1c19b87782818dbdb4252754d2d44eb9a44fe50f`](https://github.com/Shopify/hydrogen/commit/1c19b87782818dbdb4252754d2d44eb9a44fe50f), [`029fa2d0e2297f67b37c650ba8e875ee5dee81b3`](https://github.com/Shopify/hydrogen/commit/029fa2d0e2297f67b37c650ba8e875ee5dee81b3)]:
+  - @shopify/hydrogen@2026.1.2
+
 ## 2026.1.1
 
 ### Patch Changes

package/dist/assets/hydrogen/starter/app/components/Aside.tsx

@@ -5,6 +5,7 @@ import {
   useEffect,
   useState,
 } from 'react';
+import {useId} from 'react';
 
 type AsideType = 'search' | 'cart' | 'mobile' | 'closed';
 type AsideContextValue = {
@@ -34,7 +35,7 @@ export function Aside({
 }) {
   const {type: activeType, close} = useAside();
   const expanded = type === activeType;
-
+  const id = useId();
   useEffect(() => {
     const abortController = new AbortController();
 
@@ -57,11 +58,12 @@ export function Aside({
       aria-modal
       className={`overlay ${expanded ? 'expanded' : ''}`}
       role="dialog"
+      aria-labelledby={id}
     >
       <button className="close-outside" onClick={close} />
       <aside>
         <header>
-          <h3>{heading}</h3>
+          <h3 id={id}>{heading}</h3>
           <button className="close reset" onClick={close} aria-label="Close">
             &times;
           </button>

package/dist/assets/hydrogen/starter/app/components/CartMain.tsx

@@ -1,4 +1,4 @@
-import {useOptimisticCart, type OptimisticCartLine} from '@shopify/hydrogen';
+import {useOptimisticCart} from '@shopify/hydrogen';
 import {Link} from 'react-router';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import {useAside} from '~/components/Aside';
@@ -23,8 +23,8 @@ function getLineItemChildrenMap(lines: CartLine[]): LineItemChildrenMap {
       children[parentId].push(line);
     }
     if ('lineComponents' in line) {
-      const children = getLineItemChildrenMap(line.lineComponents);
-      for (const [parentId, childIds] of Object.entries(children)) {
+      const lineChildren = getLineItemChildrenMap(line.lineComponents);
+      for (const [parentId, childIds] of Object.entries(lineChildren)) {
         if (!children[parentId]) children[parentId] = [];
         children[parentId].push(...childIds);
       }
@@ -50,7 +50,10 @@ export function CartMain({layout, cart: originalCart}: CartMainProps) {
   const childrenMap = getLineItemChildrenMap(cart?.lines?.nodes ?? []);
 
   return (
-    <div className={className}>
+    <section
+      className={className}
+      aria-label={layout === 'page' ? 'Cart page' : 'Cart drawer'}
+    >
       <CartEmpty hidden={linesCount} layout={layout} />
       <div className="cart-details">
         <p id="cart-lines" className="sr-only">
@@ -79,7 +82,7 @@ export function CartMain({layout, cart: originalCart}: CartMainProps) {
         </div>
         {cartHasItems && <CartSummary cart={cart} layout={layout} />}
       </div>
-    </div>
+    </section>
   );
 }
 

package/dist/assets/hydrogen/starter/app/components/CartSummary.tsx

@@ -1,7 +1,7 @@
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import type {CartLayout} from '~/components/CartMain';
 import {CartForm, Money, type OptimisticCart} from '@shopify/hydrogen';
-import {useEffect, useRef} from 'react';
+import {useEffect, useId, useRef, useState} from 'react';
 import {useFetcher} from 'react-router';
 
 type CartSummaryProps = {
@@ -12,11 +12,16 @@ type CartSummaryProps = {
 export function CartSummary({cart, layout}: CartSummaryProps) {
   const className =
     layout === 'page' ? 'cart-summary-page' : 'cart-summary-aside';
+  const summaryId = useId();
+  const discountsHeadingId = useId();
+  const discountCodeInputId = useId();
+  const giftCardHeadingId = useId();
+  const giftCardInputId = useId();
 
   return (
-    <div aria-labelledby="cart-summary" className={className}>
-      <h4>Totals</h4>
-      <dl className="cart-subtotal">
+    <div aria-labelledby={summaryId} className={className}>
+      <h4 id={summaryId}>Totals</h4>
+      <dl role="group" className="cart-subtotal">
         <dt>Subtotal</dt>
         <dd>
           {cart?.cost?.subtotalAmount?.amount ? (
@@ -26,8 +31,16 @@ export function CartSummary({cart, layout}: CartSummaryProps) {
           )}
         </dd>
       </dl>
-      <CartDiscounts discountCodes={cart?.discountCodes} />
-      <CartGiftCard giftCardCodes={cart?.appliedGiftCards} />
+      <CartDiscounts
+        discountCodes={cart?.discountCodes}
+        discountsHeadingId={discountsHeadingId}
+        discountCodeInputId={discountCodeInputId}
+      />
+      <CartGiftCard
+        giftCardCodes={cart?.appliedGiftCards}
+        giftCardHeadingId={giftCardHeadingId}
+        giftCardInputId={giftCardInputId}
+      />
       <CartCheckoutActions checkoutUrl={cart?.checkoutUrl} />
     </div>
   );
@@ -48,8 +61,12 @@ function CartCheckoutActions({checkoutUrl}: {checkoutUrl?: string}) {
 
 function CartDiscounts({
   discountCodes,
+  discountsHeadingId,
+  discountCodeInputId,
 }: {
   discountCodes?: CartApiQueryFragment['discountCodes'];
+  discountsHeadingId: string;
+  discountCodeInputId: string;
 }) {
   const codes: string[] =
     discountCodes
@@ -57,13 +74,17 @@ function CartDiscounts({
       ?.map(({code}) => code) || [];
 
   return (
-    <div>
+    <section aria-label="Discounts">
       {/* Have existing discount, display it with a remove option */}
       <dl hidden={!codes.length}>
         <div>
-          <dt>Discount(s)</dt>
+          <dt id={discountsHeadingId}>Discounts</dt>
           <UpdateDiscountForm>
-            <div className="cart-discount">
+            <div
+              className="cart-discount"
+              role="group"
+              aria-labelledby={discountsHeadingId}
+            >
               <code>{codes?.join(', ')}</code>
               &nbsp;
               <button type="submit" aria-label="Remove discount">
@@ -77,11 +98,11 @@ function CartDiscounts({
       {/* Show an input to apply a discount */}
       <UpdateDiscountForm discountCodes={codes}>
         <div>
-          <label htmlFor="discount-code-input" className="sr-only">
+          <label htmlFor={discountCodeInputId} className="sr-only">
             Discount code
           </label>
           <input
-            id="discount-code-input"
+            id={discountCodeInputId}
             type="text"
             name="discountCode"
             placeholder="Discount code"
@@ -92,7 +113,7 @@ function CartDiscounts({
           </button>
         </div>
       </UpdateDiscountForm>
-    </div>
+    </section>
   );
 }
 
@@ -118,52 +139,110 @@ function UpdateDiscountForm({
 
 function CartGiftCard({
   giftCardCodes,
+  giftCardHeadingId,
+  giftCardInputId,
 }: {
   giftCardCodes: CartApiQueryFragment['appliedGiftCards'] | undefined;
+  giftCardHeadingId: string;
+  giftCardInputId: string;
 }) {
   const giftCardCodeInput = useRef<HTMLInputElement>(null);
+  const removeButtonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const previousCardIdsRef = useRef<string[]>([]);
   const giftCardAddFetcher = useFetcher({key: 'gift-card-add'});
+  const [removedCardIndex, setRemovedCardIndex] = useState<number | null>(null);
 
   useEffect(() => {
     if (giftCardAddFetcher.data) {
-      giftCardCodeInput.current!.value = '';
+      if (giftCardCodeInput.current !== null) {
+        giftCardCodeInput.current.value = '';
+      }
     }
   }, [giftCardAddFetcher.data]);
 
+  useEffect(() => {
+    const currentCardIds = giftCardCodes?.map((card) => card.id) || [];
+
+    if (removedCardIndex !== null && giftCardCodes) {
+      const focusTargetIndex = Math.min(
+        removedCardIndex,
+        giftCardCodes.length - 1,
+      );
+      const focusTargetCard = giftCardCodes[focusTargetIndex];
+      const focusButton = focusTargetCard
+        ? removeButtonRefs.current.get(focusTargetCard.id)
+        : null;
+
+      if (focusButton) {
+        focusButton.focus();
+      } else if (giftCardCodeInput.current) {
+        giftCardCodeInput.current.focus();
+      }
+
+      setRemovedCardIndex(null);
+    }
+
+    previousCardIdsRef.current = currentCardIds;
+  }, [giftCardCodes, removedCardIndex]);
+
+  const handleRemoveClick = (cardId: string) => {
+    const index = previousCardIdsRef.current.indexOf(cardId);
+    if (index !== -1) {
+      setRemovedCardIndex(index);
+    }
+  };
+
   return (
-    <div>
+    <section aria-label="Gift cards">
       {giftCardCodes && giftCardCodes.length > 0 && (
         <dl>
-          <dt>Applied Gift Card(s)</dt>
+          <dt id={giftCardHeadingId}>Applied Gift Card(s)</dt>
           {giftCardCodes.map((giftCard) => (
-            <RemoveGiftCardForm key={giftCard.id} giftCardId={giftCard.id}>
-              <div className="cart-discount">
+            <dd key={giftCard.id} className="cart-discount">
+              <RemoveGiftCardForm
+                giftCardId={giftCard.id}
+                lastCharacters={giftCard.lastCharacters}
+                onRemoveClick={() => handleRemoveClick(giftCard.id)}
+                buttonRef={(el: HTMLButtonElement | null) => {
+                  if (el) {
+                    removeButtonRefs.current.set(giftCard.id, el);
+                  } else {
+                    removeButtonRefs.current.delete(giftCard.id);
+                  }
+                }}
+              >
                 <code>***{giftCard.lastCharacters}</code>
                 &nbsp;
                 <Money data={giftCard.amountUsed} />
-                &nbsp;
-                <button type="submit">Remove</button>
-              </div>
-            </RemoveGiftCardForm>
+              </RemoveGiftCardForm>
+            </dd>
           ))}
         </dl>
       )}
 
       <AddGiftCardForm fetcherKey="gift-card-add">
         <div>
+          <label htmlFor={giftCardInputId} className="sr-only">
+            Gift card code
+          </label>
           <input
+            id={giftCardInputId}
             type="text"
             name="giftCardCode"
             placeholder="Gift card code"
             ref={giftCardCodeInput}
           />
           &nbsp;
-          <button type="submit" disabled={giftCardAddFetcher.state !== 'idle'}>
+          <button
+            type="submit"
+            disabled={giftCardAddFetcher.state !== 'idle'}
+            aria-label="Apply gift card code"
+          >
             Apply
           </button>
         </div>
       </AddGiftCardForm>
-    </div>
+    </section>
   );
 }
 
@@ -187,10 +266,16 @@ function AddGiftCardForm({
 
 function RemoveGiftCardForm({
   giftCardId,
+  lastCharacters,
   children,
+  onRemoveClick,
+  buttonRef,
 }: {
   giftCardId: string;
+  lastCharacters: string;
   children: React.ReactNode;
+  onRemoveClick?: () => void;
+  buttonRef?: (el: HTMLButtonElement | null) => void;
 }) {
   return (
     <CartForm
@@ -201,6 +286,15 @@ function RemoveGiftCardForm({
       }}
     >
       {children}
+      &nbsp;
+      <button
+        type="submit"
+        aria-label={`Remove gift card ending in ${lastCharacters}`}
+        onClick={onRemoveClick}
+        ref={buttonRef}
+      >
+        Remove
+      </button>
     </CartForm>
   );
 }

package/dist/assets/hydrogen/starter/app/components/Header.tsx

@@ -136,7 +136,7 @@ function SearchToggle() {
   );
 }
 
-function CartBadge({count}: {count: number | null}) {
+function CartBadge({count}: {count: number}) {
   const {open} = useAside();
   const {publish, shop, cart, prevCart} = useAnalytics();
 
@@ -154,14 +154,14 @@ function CartBadge({count}: {count: number | null}) {
         } as CartViewPayload);
       }}
     >
-      Cart {count === null ? <span>&nbsp;</span> : count}
+      Cart <span aria-label={`(items: ${count})`}>{count}</span>
     </a>
   );
 }
 
 function CartToggle({cart}: Pick<HeaderProps, 'cart'>) {
   return (
-    <Suspense fallback={<CartBadge count={null} />}>
+    <Suspense fallback={<CartBadge count={0} />}>
       <Await resolve={cart}>
         <CartBanner />
       </Await>

package/dist/assets/hydrogen/starter/app/components/PaginatedResourceSection.tsx

@@ -2,15 +2,17 @@ import * as React from 'react';
 import {Pagination} from '@shopify/hydrogen';
 
 /**
- * <PaginatedResourceSection > is a component that encapsulate how the previous and next behaviors throughout your application.
+ * <PaginatedResourceSection> encapsulates the previous and next pagination behaviors throughout your application.
  */
 export function PaginatedResourceSection<NodesType>({
   connection,
   children,
+  ariaLabel,
   resourcesClassName,
 }: {
   connection: React.ComponentProps<typeof Pagination<NodesType>>['connection'];
   children: React.FunctionComponent<{node: NodesType; index: number}>;
+  ariaLabel?: string;
   resourcesClassName?: string;
 }) {
   return (
@@ -23,15 +25,33 @@ export function PaginatedResourceSection<NodesType>({
         return (
           <div>
             <PreviousLink>
-              {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
+              {isLoading ? (
+                'Loading...'
+              ) : (
+                <span>
+                  <span aria-hidden="true">↑</span> Load previous
+                </span>
+              )}
             </PreviousLink>
             {resourcesClassName ? (
-              <div className={resourcesClassName}>{resourcesMarkup}</div>
+              <div
+                aria-label={ariaLabel}
+                className={resourcesClassName}
+                role={ariaLabel ? 'region' : undefined}
+              >
+                {resourcesMarkup}
+              </div>
             ) : (
               resourcesMarkup
             )}
             <NextLink>
-              {isLoading ? 'Loading...' : <span>Load more ↓</span>}
+              {isLoading ? (
+                'Loading...'
+              ) : (
+                <span>
+                  Load more <span aria-hidden="true">↓</span>
+                </span>
+              )}
             </NextLink>
           </div>
         );

package/dist/assets/hydrogen/starter/app/components/ProductPrice.tsx

@@ -9,7 +9,7 @@ export function ProductPrice({
   compareAtPrice?: MoneyV2 | null;
 }) {
   return (
-    <div className="product-price">
+    <div aria-label="Price" className="product-price" role="group">
       {compareAtPrice ? (
         <div className="product-price-on-sale">
           {price ? <Money data={price} /> : null}

package/dist/assets/hydrogen/starter/app/lib/context.ts

@@ -1,6 +1,7 @@
 import {createHydrogenContext} from '@shopify/hydrogen';
 import {AppSession} from '~/lib/session';
 import {CART_QUERY_FRAGMENT} from '~/lib/fragments';
+import type {CartApiQueryFragment} from 'storefrontapi.generated';
 
 // Define the additional context object
 const additionalContext = {
@@ -16,6 +17,10 @@ type AdditionalContextType = typeof additionalContext;
 
 declare global {
   interface HydrogenAdditionalContext extends AdditionalContextType {}
+
+  // Augment HydrogenCustomCartFragment with the codegen'd cart fragment type so
+  // that context.cart.get() and all cart mutations return the extended cart type.
+  interface HydrogenCustomCartFragment extends CartApiQueryFragment {}
 }
 
 /**