re-work some remix lessons

Author: bradwestfall

remix/lessons/05-forms-and-actions/lecture/routes/_products-layout._index.tsx

@@ -81,6 +81,7 @@ export default function ProductsIndex() {
                   onClick={() => addToCart(product.id)}
                   className="button button-outline whitespace-nowrap"
                   type="submit"
+                  aria-label="Add To Cart"
                 >
                   <Icon name="cart" /> {quantityInCart > 0 && quantityInCart}
                 </button>

remix/lessons/05-forms-and-actions/lecture/routes/_products-layout.final.tsx

@@ -74,7 +74,11 @@ function AddToCart({ productId, quantityInCart = 0 }: AddProps) {
     <fetcher.Form method="post">
       <input type="hidden" name="productId" value={productId} />
       <input type="hidden" name="quantity" value={quantityInCart + 1} />
-      <button type="submit" className="button button-outline whitespace-nowrap">
+      <button
+        type="submit"
+        className="button button-outline whitespace-nowrap"
+        aria-label="Add To Cart"
+      >
         <Icon name="cart" /> {quantityInCart > 0 && quantityInCart}
       </button>
     </fetcher.Form>

remix/lessons/05-forms-and-actions/practice-final/components/CartButtons.tsx

@@ -13,7 +13,11 @@ export function AddToCart({ productId, quantityInCart = 0 }: AddProps) {
     <fetcher.Form method="post" action="/cart">
       <input type="hidden" name="productId" value={productId} />
       <input type="hidden" name="quantity" value={quantityInCart + 1} />
-      <button type="submit" className="button button-outline whitespace-nowrap">
+      <button
+        type="submit"
+        className="button button-outline whitespace-nowrap"
+        aria-label="Add To Cart"
+      >
         <Icon name="cart" /> {quantityInCart > 0 && quantityInCart}
       </button>
     </fetcher.Form>

remix/lessons/05-forms-and-actions/practice/GUIDE.md

@@ -21,14 +21,14 @@ When the app gets bigger, we'll want a more general route for the cart action --
 
 1. Move the action in `_products-layout._index.tsx` function and it's dependencies (imports) to a new file at `routes/cart.tsx`.
 2. Refactor your `<Form>` components to have an action prop that points to this new path. By default, the lack of an action told Redux to send your data to the same path you're on which is why you didn't need an action before.
+3. Refactor the `<Form>`s to be `<fetcher.Form>` instead.
+4. You'll need to call `useFetcher` to get a `fetcher` object which replaces `useNavigation`
 
-Example: `<Form method="post" action="/cart">`
+Example: `<fetcher.Form method="post" action="/cart">`
 
 Make sure adding to the cart works before you continue
 
 # Task 3
 
 1. Move the two buttons and their forms to the `components/CartButtons.tsx` file. We'll use this file to export any cart/button related components (two components for now).
 2. Some of the work in `CartButtons.tsx` has been done for you. Once you get the code moved, you should make sure it still works and you can add to the cart before you continue.
-3. Refactor the `<Form>`s to be `<fetcher.Form>` instead.
-4. You'll need to call `useFetcher` to get a `fetcher` object

remix/lessons/05-forms-and-actions/practice/routes/_products-layout._index.tsx

@@ -45,7 +45,11 @@ export default function ProductsIndex() {
               </div>
               <div className="flex gap-2">
                 {/* Task 1 */}
-                <button type="submit" className="button button-outline whitespace-nowrap">
+                <button
+                  type="submit"
+                  className="button button-outline whitespace-nowrap"
+                  aria-label="Add To Cart"
+                >
                   <Icon name="cart" /> {quantityInCart > 0 && quantityInCart}
                 </button>
                 <button type="submit" className="button">